/*
Theme Name: K-AFRO
Author: K-AFRO
Description: Thème sur mesure du magazine K-AFRO.
Version: 1.0.15
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: k-afro
*/

/* =========================================================
   SOMMAIRE
   1.  Structure et header
   2.  Textes, titres et dates
   3.  Cartes des listes (Query Loop)
   4.  Boutons
   5.  Fil d Ariane
   6.  Pastilles de filtre
   7.  Composants : accordéon, cartes numérotées, bouton, histoire
   8.  Fiche lieu / restaurant
   9.  Infos pratiques
   10. Galerie photos
   11. Fiches article, event, interview
   12. Formulaire de contact
   13. Calendrier des events
   14. Pages légales
   15. Accessibilité
   16. Mobile, ordinateur et réglages généraux (fin de fichier,
       pour passer devant les règles ci-dessus)
   ========================================================= */


/* =========================================================
   1. STRUCTURE ET HEADER
   ========================================================= */

/* Pas d espace entre header, contenu et footer */
.wp-site-blocks > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Partie noire du header collée en haut de l écran */
header.wp-block-template-part:has(.kafro-header-main),
header.wp-block-template-part .wp-block-group:has(.kafro-header-main) {
  display: contents;
}
.kafro-header-main {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 100;
}
@media (max-width: 600px) {
  .kafro-header-main { top: 0; }
}

/* Classe « kafro-wrap » : les éléments passent à la ligne sur mobile */
@media (max-width: 781px) {
  .kafro-wrap,
  .kafro-wrap .is-layout-flex { flex-wrap: wrap !important; row-gap: 16px; }
  .kafro-wrap > * { min-width: 0; }
  .kafro-wrap p, .kafro-wrap a { white-space: nowrap; }

  /* Magazine de l accueil : mêmes cartes que Upcoming Events (image en haut, titre et catégorie dessous, sans extrait) */
  .kafro-magazine .wp-block-post-template { gap: 40px !important; }
  .kafro-magazine .wp-block-post-template .is-layout-flex { flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 16px !important; }
  .kafro-magazine .is-layout-flex > .wp-block-post-featured-image { order: -1; flex: 0 0 auto !important; width: 100% !important; max-width: none !important; height: auto !important; margin: 0 !important; }
  .kafro-magazine .is-layout-flex > .wp-block-post-featured-image img { width: 100% !important; height: auto !important; aspect-ratio: 3 / 2; object-fit: cover; }
  .kafro-magazine .is-layout-flex > .wp-block-group { flex: 1 1 auto !important; width: 100% !important; min-width: 0; }
  .kafro-magazine .is-layout-flex .wp-block-post-excerpt { display: none !important; }

  /* Footer : les menus passent à la ligne au lieu de déborder */
  footer.wp-block-template-part .is-layout-flex { flex-wrap: wrap !important; row-gap: 24px; }
  footer.wp-block-template-part .is-layout-flex > * { min-width: 0; }
}


/* =========================================================
   2. TEXTES, TITRES ET DATES
   ========================================================= */

/* Titre des fiches : largeur limitée, lignes équilibrées */
.kafro-title {
  max-width: 960px;
  margin-left: auto !important;
  margin-right: auto !important;
  text-wrap: balance;
}

/* Chapô des fiches */
.kafro-chapo {
  max-width: 720px;
  margin-left: auto !important;
  margin-right: auto !important;
  text-wrap: balance;
}

/* Texte d intro des pages : même largeur que le chapô, centré */
.kafro-lead {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
  text-wrap: balance;
}

/* Intro en taille H3 (pages Services et About) */
.kafro-lead-h3,
.kafro-lead-h3 p {
  font-size: var(--wp--preset--font-size--h-3) !important;
  font-weight: 400 !important;
  line-height: 1.4;
}

/* Garde un texte sur une seule ligne (ex. « Show more → ») */
.kafro-nowrap, .kafro-nowrap a { white-space: nowrap; }

/* Toutes les dates en noir */
.wp-block-post-date,
.wp-block-post-date a,
.event-date {
  color: var(--wp--preset--color--foreground) !important;
}
.event-date { font-size: var(--wp--preset--font-size--small); }

/* Extrait cliquable dans les cartes */
.kafro-excerpt-link, .kafro-excerpt-link:hover { color: inherit; text-decoration: none !important; }
.kafro-excerpt-link:hover { color: var(--wp--preset--color--text-muted); }


/* =========================================================
   3. CARTES DES LISTES (QUERY LOOP)
   ========================================================= */

/* Effet de survol commun à toutes les cartes */
.wp-block-post-template .wp-block-post-featured-image {
  overflow: hidden;
  border-radius: 8px;
  isolation: isolate;
}
.wp-block-post-template .wp-block-post-featured-image img {
  border-radius: 8px;
  transition: transform 0.3s ease-out;
}
.wp-block-post-template li:hover .wp-block-post-featured-image img {
  transform: scale(1.03);
}
.wp-block-post-template .wp-block-post-title a {
  text-decoration: none;
  transition: color 0.2s ease-out;
}
.wp-block-post-template li:hover .wp-block-post-title a {
  color: var(--wp--preset--color--primary);
}

/* Catégories et termes des cartes en rouge, soulignés au survol */
.wp-block-post-template .wp-block-post-terms,
.wp-block-post-template .wp-block-post-terms a {
  color: var(--wp--preset--color--primary) !important;
}
.wp-block-post-template .wp-block-post-terms a:hover {
  text-decoration: underline;
}


/* =========================================================
   4. BOUTONS
   ========================================================= */

/* Les boutons ne se coupent jamais au milieu d un mot */
.wp-element-button, .wp-block-button__link { white-space: nowrap; }

.kafro-btn {
  display: inline-block;
  text-align: center;
  text-decoration: none;
}
.kafro-btn.btn-secondary {
  background: transparent;
  color: var(--wp--preset--color--foreground);
  border: 1px solid currentColor;
}
.kafro-btn.btn-secondary:hover {
  background: var(--wp--preset--color--foreground);
  color: var(--wp--preset--color--white);
}


/* =========================================================
   5. FIL D ARIANE : centré dans les articles et les pages
   ========================================================= */

.single .wp-block-breadcrumbs,
.single .rank-math-breadcrumb,
.page .wp-block-breadcrumbs,
.page .rank-math-breadcrumb {
  text-align: center;
}
.single .wp-block-breadcrumbs ol,
.single .wp-block-breadcrumbs ul,
.page .wp-block-breadcrumbs ol,
.page .wp-block-breadcrumbs ul {
  justify-content: center;
}


/* =========================================================
   6. PASTILLES DE FILTRE [kafro_filters] et toggle List / Calendar
   ========================================================= */

.kafro-pills { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.kafro-pills li { margin: 0; }
.kafro-pill { display: inline-block; padding: 8px 16px; border: 1px solid var(--wp--preset--color--border); border-radius: 999px; color: var(--wp--preset--color--foreground); background: var(--wp--preset--color--white); font-size: 15px; text-decoration: none !important; line-height: 1.2; transition: border-color .2s, background .2s, color .2s; }
.kafro-pill:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--foreground); }
.kafro-pill.is-active { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); }
.kafro-pill.is-active:hover { background: var(--wp--preset--color--black); border-color: var(--wp--preset--color--black); color: var(--wp--preset--color--white); }
.kafro-pill:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }

@media (max-width: 781px) {
  .kafro-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .kafro-pills::-webkit-scrollbar { display: none; }
  .kafro-pills li { flex: 0 0 auto; }
}

.kafro-view-toggle { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--wp--preset--color--border); border-radius: 999px; background: var(--wp--preset--color--white); }
.kafro-view-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px; color: var(--wp--preset--color--foreground); text-decoration: none !important; line-height: 1.2; transition: background .2s, color .2s; }
.kafro-view-btn:hover { color: var(--wp--preset--color--primary); }
.kafro-view-btn.is-active { background: var(--wp--preset--color--black); color: var(--wp--preset--color--white); }
.kafro-view-btn:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }

/* Pas de contour après un clic à la souris (gardé pour le clavier) */
.kafro-pill:focus:not(:focus-visible),
.kafro-view-btn:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; }


/* =========================================================
   7. COMPOSANTS : accordéon, cartes numérotées, bouton, histoire
   ========================================================= */

/* Liste dépliable (Services, FAQ) : Group avec la classe « kafro-accordion » */
.kafro-accordion .wp-block-details { margin: 0; padding: 18px 0; border-bottom: 1px solid var(--wp--preset--color--border); }
.kafro-accordion .wp-block-details summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; cursor: pointer; font-weight: 600; }
.kafro-accordion .wp-block-details summary::-webkit-details-marker { display: none; }
.kafro-accordion .wp-block-details summary::after { content: ""; flex: 0 0 18px; width: 18px; height: 18px; background-color: var(--wp--preset--color--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .2s ease; }
.kafro-accordion .wp-block-details[open] summary::after { transform: rotate(90deg); }
.kafro-accordion .wp-block-details summary:hover { color: var(--wp--preset--color--primary); }
.kafro-accordion .wp-block-details summary:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 4px; }
.kafro-accordion .wp-block-details > :not(summary) { margin-top: 12px; margin-bottom: 0; font-size: var(--wp--preset--font-size--small); }
.kafro-accordion .wp-block-details > :not(summary) a { font-weight: 600; }

/* Texte d un champ [kafro_text] */
.kafro-intro { max-width: 640px; }
.kafro-intro p { margin: 0 0 12px; }
.kafro-block p:empty, .kafro-block br:only-child { display: none; }

/* Cartes grises numérotées [kafro_cards] */
.kafro-cards-wrap { margin: 80px 0 0; }
.kafro-cards-wrap.is-first { margin-top: 48px; }
.kafro-cards-title { margin: 0 0 24px; font-size: var(--wp--preset--font-size--h-2); }
.kafro-cards-subtitle { max-width: 720px !important; margin: -8px 0 32px; font-size: var(--wp--preset--font-size--h-3) !important; font-weight: 400 !important; line-height: 1.4; text-wrap: balance; }
.kafro-cards-wrap.is-center .kafro-cards-title,
.kafro-cards-wrap.is-center .kafro-cards-subtitle { text-align: center; }
.kafro-cards-wrap.is-center .kafro-cards-subtitle { margin-left: auto; margin-right: auto; }
.kafro-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; }
.kafro-card-item { margin: 0; padding: 32px; background: var(--wp--preset--color--surface); border-radius: 8px; }
.kafro-card-num { margin: 0 0 16px; }
.kafro-card-title { margin: 0 0 12px; font-size: var(--wp--preset--font-size--h-3); font-weight: 600; line-height: 1.3; }
.kafro-card-text,
.kafro-card-text p { font-size: var(--wp--preset--font-size--body) !important; }
.kafro-card-text p { margin: 0 0 8px; }

/* Bouton rouge centré [kafro_cta] */
.kafro-cta { display: flex !important; justify-content: center; width: 100%; max-width: none !important; margin: 40px 0 0; }

/* Titre + texte à gauche, image à droite [kafro_story] */
.kafro-story { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin: 120px 0 80px; }
.kafro-story-title { margin: 0 0 16px; font-size: var(--wp--preset--font-size--h-2); line-height: 1.2; }
.kafro-story-text p { margin: 0 0 12px; }
.kafro-story-image img { display: block; width: 100%; height: auto; border-radius: 4px; }

@media (max-width: 781px) {
  .kafro-cards { grid-template-columns: 1fr; }
  .kafro-story { grid-template-columns: 1fr; gap: 32px; margin: 80px 0 60px; }
}


/* =========================================================
   8. FICHE LIEU / RESTAURANT
   ========================================================= */

/* Photo principale et sa légende [kafro_main_image] */
.place-main-image {
  margin: 0 0 32px;
}
.place-main-image figcaption {
  margin-top: 12px;
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--text-muted);
  line-height: 1.5;
}

/* Logo arrondi */
.place-logo img { border-radius: 8px !important; }

/* Bouton du site : pleine largeur, sans dépasser de la colonne */
.place-aside .kafro-btn.btn-primary {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 20px;
  font-weight: 400;
  border-radius: 4px;
}

/* La colonne d infos reste visible au défilement (ordinateur) */
@media (min-width: 782px) {
  .place-aside > aside {
    position: sticky;
    top: 100px;
  }
}
@media (max-width: 781px) {
  .place-logo img { width: 120px !important; }
  .place-aside { position: static !important; top: auto !important; }
}

/* Masquer les paragraphes vides et retours à la ligne ajoutés par WordPress */
.kafro-card p:empty,
.kafro-card br,
.card-picks p:empty,
.card-picks br,
.practical-card p:empty,
.practical-card > br,
.place-gallery p:empty,
.place-gallery br {
  display: none;
}
.kafro-card p {
  margin: 0;
}

/* Carte grise : lignes « titre + valeur » séparées par un trait */
.info-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 0;
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.kafro-card .info-row:first-child,
.card-info .info-row:first-child {
  padding-top: 0;
}
.kafro-card .info-row:last-child,
.card-info .info-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.info-label {
  font-size: var(--wp--preset--font-size--body);
  font-weight: 600;
  color: var(--wp--preset--color--foreground);
}
.info-value {
  font-size: var(--wp--preset--font-size--small);
}
.info-value a {
  text-decoration: none;
}

/* Cuisine : drapeau au-dessus du nom */
.cuisine-value {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: var(--wp--preset--font-size--small);
}
.cuisine-flag {
  width: 36px;
  height: 24px;
  object-fit: cover;
  display: block;
}

/* Prix en symboles Won */
.price-stars {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 2px;
  color: var(--wp--preset--color--primary);
}
.price-stars .star-off {
  color: var(--wp--preset--color--border);
}

/* Horaires : jour à gauche, heures à droite */
.hours-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  font-size: var(--wp--preset--font-size--small);
}
.hours-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

/* Must Try : carte grise */
.card-picks {
  background: var(--wp--preset--color--surface);
  padding: 28px;
  border-radius: 8px;
}
.picks-heading {
  font-size: var(--wp--preset--font-size--h-2);
  font-weight: 600;
  margin: 0 0 20px;
}
.card-picks ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 24px;
}
.pick {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.pick > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pick img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.pick-title {
  font-size: 16px !important;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}
.pick p {
  margin: 0;
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--foreground);
}


/* =========================================================
   9. INFOS PRATIQUES : carte grise, lignes, carte Google Maps
   ========================================================= */

.practical-card {
  background: var(--wp--preset--color--surface);
  padding: 32px;
  border-radius: 8px;
}
.practical-heading {
  font-size: var(--wp--preset--font-size--h-2);
  font-weight: 600;
  margin: 0 0 24px;
}
.practical-row {
  margin: 0 0 12px;
  font-size: var(--wp--preset--font-size--body);
}
.practical-row strong {
  font-weight: 600;
}
.practical-map {
  margin-top: 24px;
}
.practical-map iframe {
  display: block;
  width: 100%;
  height: 300px;
  border: 0;
}
.practical-card .map-links {
  margin-top: 16px;
}
.map-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}


/* =========================================================
   10. GALERIE PHOTOS : grille de 3 colonnes (2 sur mobile)
   ========================================================= */

.section-photos:not(:has(.place-gallery)) {
  display: none;
}
.gallery-heading {
  font-size: var(--wp--preset--font-size--h-2);
  font-weight: 600;
  margin: 0 0 24px;
}
.gallery-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.gallery-grid a {
  display: block;
  overflow: hidden;
  border-radius: 8px;
}
.gallery-grid img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s ease-out;
}
.gallery-grid a:hover img {
  transform: scale(1.03);
}
@media (max-width: 781px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}


/* =========================================================
   11. FICHES ARTICLE, EVENT, INTERVIEW
   ========================================================= */

.kafro-reading-time { color: var(--wp--preset--color--foreground); }
.kafro-featured-caption { margin: 12px 0 0; text-align: center; }
.kafro-meta-label { margin: 0 0 4px; }
@media (min-width: 782px) {
  .kafro-sticky { position: sticky; top: 32px; }
}


/* Fiche projet (Work) : titre, texte, bouton PDF et deux photos [kafro_project_extras] */
.kafro-project-extras { align-self: stretch; width: 100%; margin-top: 56px; }
.kafro-project-text { max-width: 720px; margin: 0 auto 32px; text-align: center; }
.kafro-project-heading { margin: 0 0 16px; font-size: var(--wp--preset--font-size--h-2); line-height: 1.25; }
.kafro-project-body p { margin: 0 0 12px; }
.kafro-project-body p:last-child { margin-bottom: 0; }
.kafro-project-cta { display: flex; justify-content: center; margin: 0 0 64px; }
.kafro-project-images { display: grid; gap: 24px; }
.kafro-project-image { margin: 0; }
.kafro-project-image img { display: block; width: 100%; height: auto; border-radius: 8px; }
@media (min-width: 782px) {
  .kafro-project-body,
  .kafro-project-body p { font-size: 20px !important; line-height: 1.6; }
}
@media (max-width: 781px) {
  .kafro-project-extras { margin-top: 40px; }
  .kafro-project-text { margin-left: 0; text-align: left; }
  .kafro-project-cta { justify-content: flex-start; margin-bottom: 40px; }
  .kafro-project-images { gap: 16px; }
}


/* Interviews : questions en 20 px, sans trait de séparation (section 26 de functions.php) */
html body .kafro-question {
  font-size: 20px !important;
  line-height: 1.3;
  margin-top: 20px !important;
  margin-bottom: 16px !important;
  padding-bottom: 0 !important;
  border: 0 !important;
  text-decoration: none !important;
}
/* Première question tout en haut (quand le bloc Content est vide) : pas de marge au-dessus */
html body .kafro-question.is-first {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}
html body .kafro-question::after,
html body .kafro-question::before { display: none !important; }
html body .kafro-question + hr,
html body .kafro-question + .wp-block-separator { display: none !important; }

/* Interviews : photo entre deux questions */
html body .kafro-interview-image { margin-top: 20px !important; margin-bottom: 20px !important; }
.kafro-interview-image img { display: block; width: 100%; height: auto; border-radius: 8px; }
.kafro-interview-image figcaption { margin-top: 12px; }


/* =========================================================
   12. FORMULAIRE DE CONTACT [kafro_contact_form]
   ========================================================= */

.kafro-contact { max-width: 720px; margin: 0 auto; }
.kafro-contact-form { display: grid; gap: 20px; padding: 40px; background: var(--wp--preset--color--surface); border-radius: 8px; }
.kafro-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.kafro-field label { display: block; margin: 0 0 6px; font-weight: 600; }
.kafro-req { color: var(--wp--preset--color--primary); }
.kafro-field input[type="text"], .kafro-field input[type="email"], .kafro-field select, .kafro-field textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--wp--preset--color--border); border-radius: 4px; background: var(--wp--preset--color--white); color: var(--wp--preset--color--foreground); font: inherit; }
.kafro-field textarea { min-height: 160px; resize: vertical; }
.kafro-field input:focus, .kafro-field select:focus, .kafro-field textarea:focus { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 1px; border-color: var(--wp--preset--color--primary); }
.kafro-field [aria-invalid="true"] { border-color: var(--wp--preset--color--primary); }
.kafro-field-error { display: block; margin-top: 6px; color: var(--wp--preset--color--primary); font-size: var(--wp--preset--font-size--small); }

/* Liste Subject : flèche fine décalée vers la gauche */
.kafro-contact .kafro-field select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-right: 44px !important;
  background-color: var(--wp--preset--color--white) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 20px center !important;
  background-size: 12px 12px !important;
  cursor: pointer;
}

/* Case de consentement : à gauche de la phrase, l ensemble centré */
.kafro-field .kafro-consent { display: flex !important; align-items: center; justify-content: center; gap: 12px; margin: 0; text-align: left; font-weight: 400; font-size: var(--wp--preset--font-size--small); cursor: pointer; }
.kafro-consent input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--wp--preset--color--primary); }
.kafro-consent a { color: inherit; text-decoration: underline; }
.kafro-consent-field .kafro-field-error { text-align: center; }

.kafro-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kafro-contact-submit { justify-self: start; border: 0; cursor: pointer; }
.kafro-contact-alert { padding: 14px 16px; border-left: 3px solid var(--wp--preset--color--primary); background: var(--wp--preset--color--white); }
.kafro-contact-success { padding: 40px; background: var(--wp--preset--color--surface); border-radius: 8px; text-align: center; }
.kafro-contact-success p { margin: 0; }
.kafro-contact-success-title { margin-bottom: 8px !important; font-size: var(--wp--preset--font-size--h-3); font-weight: 600; }

@media (max-width: 781px) {
  .kafro-contact-form { padding: 24px; }
  .kafro-row { grid-template-columns: 1fr; }
  .kafro-contact-submit { justify-self: stretch; }
}


/* =========================================================
   13. CALENDRIER DES EVENTS [kafro_calendar]
   ========================================================= */

.kafro-view-calendar .kafro-events-list { display: none !important; }

.kafro-calendar { max-width: 840px; margin: 32px auto 0; scroll-margin-top: 140px; }
.kafro-cal-head { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 16px; min-height: 40px; }
.kafro-cal-title { margin: 0; min-width: 200px; text-align: center; font-size: var(--wp--preset--font-size--h-4); }
.kafro-cal-nav { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--wp--preset--color--border); border-radius: 50%; color: var(--wp--preset--color--foreground); text-decoration: none !important; transition: border-color .2s, color .2s; }
.kafro-cal-nav:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); }
.kafro-cal-today { position: absolute; top: 50%; right: 0; transform: translateY(-50%); padding: 6px 14px; border: 1px solid var(--wp--preset--color--border); border-radius: 999px; color: var(--wp--preset--color--foreground); font-size: var(--wp--preset--font-size--small); text-decoration: none !important; }
.kafro-cal-today:hover { border-color: var(--wp--preset--color--primary); }

.kafro-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--wp--preset--color--border); border-left: 1px solid var(--wp--preset--color--border); }
.kafro-cal-weekday { padding: 6px 8px; border-right: 1px solid var(--wp--preset--color--border); border-bottom: 1px solid var(--wp--preset--color--border); background: var(--wp--preset--color--surface); font-size: 12px; font-weight: 600; text-transform: uppercase; }
.kafro-cal-cell { min-width: 0; min-height: 84px; padding: 6px; border-right: 1px solid var(--wp--preset--color--border); border-bottom: 1px solid var(--wp--preset--color--border); background: var(--wp--preset--color--white); }
.kafro-cal-cell.is-empty { background: var(--wp--preset--color--surface); }
.kafro-cal-day { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 13px; font-weight: 600; }
.kafro-cal-cell.is-past .kafro-cal-day { color: var(--wp--preset--color--text-muted); }
.kafro-cal-cell.is-today .kafro-cal-day { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); }

.kafro-cal-events { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; margin: 4px 0 0; padding: 0; list-style: none; }
.kafro-cal-events li { min-width: 0; margin: 0; }
.kafro-cal-event { display: block; max-width: 100%; padding: 3px 6px; border-radius: 4px; background: var(--ev, var(--wp--preset--color--primary)); color: var(--ev-text, #FFFFFF) !important; font-size: 13px !important; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none !important; transition: filter .2s, opacity .2s; }
.kafro-cal-event:hover { filter: brightness(.85); }
.kafro-cal-event.is-continued { opacity: .85; }
.kafro-cal-event.is-past { opacity: .4; }
.kafro-cal-event.is-past:hover { opacity: .75; filter: none; }
.kafro-cal-event:focus-visible { outline: 2px solid var(--wp--preset--color--black); outline-offset: 2px; }

.kafro-cal-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin: 0 0 16px; padding: 0; list-style: none; font-size: var(--wp--preset--font-size--small); }
.kafro-cal-legend li { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.kafro-cal-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--ev); }

.kafro-agenda { display: none; margin: 0; padding: 0; list-style: none; }

@media (max-width: 781px) {
  .kafro-calendar { scroll-margin-top: 100px; }
  .kafro-cal-head { flex-wrap: wrap; }
  .kafro-cal-title { min-width: 0; flex: 1 1 auto; }
  .kafro-cal-today { position: static; transform: none; flex-basis: 100%; text-align: center; }
  .kafro-cal-grid { display: none; }
  .kafro-agenda { display: grid; gap: 24px; }
  .kafro-agenda-day { margin: 0; }
  .kafro-agenda-date { margin: 0 0 8px; font-weight: 600; }
  .kafro-agenda-day.is-past .kafro-agenda-date { color: var(--wp--preset--color--text-muted); }
  .kafro-agenda-today { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); font-size: var(--wp--preset--font-size--small); font-weight: 600; }
  .kafro-agenda .kafro-cal-event { padding: 10px 14px; font-size: var(--wp--preset--font-size--body) !important; white-space: normal; }
  .kafro-agenda-empty { padding: 24px; border-radius: 8px; background: var(--wp--preset--color--surface); text-align: center; }
  .kafro-cal-legend { justify-content: flex-start; }
}


/* =========================================================
   14. PAGES LÉGALES : intertitres H2
   ========================================================= */

.page-template-legal .wp-block-post-content h2 {
  font-size: var(--wp--preset--font-size--h-3) !important;
  margin-top: 48px !important;
  margin-bottom: 12px !important;
}


/* =========================================================
   15. ACCESSIBILITÉ : contour visible au clavier
   ========================================================= */

a:focus-visible,
.wp-element-button:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}


/* =========================================================
   16. MOBILE, ORDINATEUR ET RÉGLAGES GÉNÉRAUX
   (anciennement section 23 de functions.php)
   ========================================================= */

/* =========================================================
   1. MOBILE (781 px et moins)
   ========================================================= */
@media (max-width: 781px) {

  /* --- Espaces --- */
  body {
    --wp--preset--spacing--80: 48px;
    --wp--preset--spacing--70: 40px;
    --wp--preset--spacing--60: 32px;
  }
  html body .wp-site-blocks > main {
    padding-top: 32px !important;
    padding-bottom: 48px !important;
  }

  /* Grands paddings et marges reglés dans les blocs : reduits */
  html body .wp-site-blocks [style*="padding-top:120px"],
  html body .wp-site-blocks [style*="padding-top:100px"],
  html body .wp-site-blocks [style*="padding-top:80px"],
  html body .wp-site-blocks [style*="padding-top:var(--wp--preset--spacing--80)"],
  html body .wp-site-blocks [style*="padding-top:var(--wp--preset--spacing--70)"] { padding-top: 40px !important; }
  html body .wp-site-blocks [style*="padding-bottom:120px"],
  html body .wp-site-blocks [style*="padding-bottom:100px"],
  html body .wp-site-blocks [style*="padding-bottom:80px"],
  html body .wp-site-blocks [style*="padding-bottom:var(--wp--preset--spacing--80)"],
  html body .wp-site-blocks [style*="padding-bottom:var(--wp--preset--spacing--70)"] { padding-bottom: 40px !important; }
  html body .wp-site-blocks [style*="margin-top:60px"],
  html body .wp-site-blocks [style*="margin-top:48px"],
  html body .wp-site-blocks [style*="margin-top:var(--wp--preset--spacing--60)"],
  html body .wp-site-blocks [style*="margin-top:var(--wp--preset--spacing--50)"] { margin-top: 24px !important; }

  /* --- Header --- */
  body .kafro-hide-mobile { display: none !important; }
  body .kafro-left-mobile,
  body .wp-block-group:has(> .wp-block-search) > p { text-align: left !important; flex: 1 1 auto; margin-right: auto !important; padding-right: 16px; }
  body .kafro-header-main .wp-block-navigation { margin-left: auto !important; justify-content: flex-end !important; }
  body .wp-block-group:has(> .wp-block-search) > .wp-block-search { flex: 0 0 auto; width: auto !important; max-width: 100%; margin-right: 0 !important; }
  body .wp-block-search__button { box-sizing: border-box; margin: 0 !important; }
  body .kafro-header-main { padding-left: 20px !important; padding-right: 20px !important; }
  body .kafro-header-main > * { padding-left: 0 !important; padding-right: 0 !important; }

  /* --- Footer --- */
  .wp-site-blocks > :last-child > * { padding-left: 32px !important; padding-right: 32px !important; }
  .wp-site-blocks > :last-child > * .wp-block-group,
  .wp-site-blocks > :last-child > * .wp-block-columns { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; }
  .wp-site-blocks > :last-child .is-layout-constrained > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
  .wp-site-blocks > :last-child .wp-block-separator { width: 100% !important; max-width: none !important; }
  .wp-site-blocks > :last-child .is-layout-flex:not(.is-vertical) { row-gap: 32px !important; }

  /* --- Filtres : titres et pastilles a gauche, pastilles qui defilent --- */
  body .kafro-filters { overflow: visible !important; flex-wrap: wrap !important; }
  body .kafro-filter-label { text-align: left !important; align-self: flex-start; width: 100%; }
  html body .wp-block-group:has(> .kafro-pills) { align-items: flex-start !important; }
  html body .kafro-pills {
    justify-content: flex-start !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    margin-left: 0 !important;
  }

  /* --- Fil d Ariane a gauche --- */
  html body [class*="breadcrumb"],
  html body [class*="breadcrumb"] ol,
  html body [class*="breadcrumb"] ul { justify-content: flex-start !important; text-align: left !important; margin-left: 0 !important; }
  html body [class*="breadcrumb"] { align-self: flex-start !important; }

  /* --- Toutes les pages hors fiches : titres, textes et boutons a gauche --- */
  html body:not(.single) .wp-block-heading,
  html body:not(.single) .wp-block-post-title,
  html body:not(.single) .wp-block-query-title,
  html body:not(.single) p.has-text-align-center,
  html body:not(.single) .kafro-lead,
  html body:not(.single) .kafro-lead p,
  html body:not(.single) .kafro-cards-wrap.is-center .kafro-cards-title,
  html body:not(.single) .kafro-cards-wrap.is-center .kafro-cards-subtitle {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  html body:not(.single) main .wp-block-group.is-vertical,
  html body:not(.single) .wp-site-blocks > .wp-block-group.is-vertical,
  html body:not(.single) .wp-site-blocks > div > .wp-block-group.is-vertical { align-items: flex-start !important; }
  html body:not(.single) main .wp-block-buttons,
  html body:not(.single) .wp-site-blocks > :not(:first-child):not(:last-child) .wp-block-buttons,
  html body:not(.single) .kafro-cta { justify-content: flex-start !important; }

  /* --- Fiches : en-tete a gauche (titre, chapo, categorie, legende) --- */
  html body.single .wp-block-group.is-vertical:has(> .wp-block-post-title) { align-items: flex-start !important; }
  html body.single .wp-block-group.is-vertical:has(> .wp-block-post-title) > * { align-self: stretch; }
  html body.single .wp-block-post-title,
  html body.single .wp-block-post-title.has-text-align-center,
  html body.single .kafro-title,
  html body.single .kafro-chapo,
  html body.single .kafro-chapo p,
  html body.single .wp-block-post-excerpt__excerpt {
    text-align: left !important;
    align-self: stretch !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  html body.single .kafro-featured-caption,
  html body.single .wp-element-caption { text-align: left !important; }
  html body.single .wp-block-group:has(> .wp-block-post-terms) { justify-content: flex-start !important; }

  /* --- Fiches : espaces entre categorie, image, legende et texte --- */
  html body.single .wp-site-blocks > main { padding-bottom: 0 !important; margin-bottom: 0 !important; }
  html body.single .wp-site-blocks > main > .wp-block-group,
  html body.single .wp-site-blocks > main > .wp-block-group > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  html body.single .wp-site-blocks > main ~ .wp-block-group[style*="margin-top:var(--wp--preset--spacing--40)"] { margin-top: 24px !important; }
  html body.single .wp-site-blocks > main ~ .wp-block-group:has(> .wp-block-post-featured-image) { margin-bottom: 0 !important; }
  html body.single .wp-block-post-featured-image { margin-top: 24px !important; }
  html body.single .kafro-featured-caption { margin-top: 8px !important; margin-bottom: 0 !important; }
}

/* =========================================================
   2. ORDINATEUR (782 px et plus)
   ========================================================= */
@media (min-width: 782px) {
  /* Toggle List / Calendar centre */
  body .kafro-view-toggle {
    display: flex !important;
    width: max-content;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Fiches : ligne categorie + temps de lecture centree */
  body.single .wp-block-group:has(> .wp-block-post-terms):has(.kafro-reading-time) { justify-content: center !important; }

  /* Fiches projet : texte centre */
  body.single-project .wp-block-post-content,
  body.single-project .wp-block-post-content p,
  body.single-project .wp-block-post-content h2,
  body.single-project .wp-block-post-content h3,
  body.single-project .wp-block-post-content li { text-align: center !important; }

  /* Pastilles : une seule ligne qui defile si besoin */
  body .kafro-pills {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }
  body .kafro-pills li { flex: 0 0 auto; }
}

/* =========================================================
   3. GENERAL (toutes tailles)
   ========================================================= */

/* --- Structure et espaces --- */
html, body { overflow-x: clip; }
.wp-site-blocks > header + * { margin-block-start: 0 !important; }
.wp-site-blocks > :last-child { margin-block-start: 0 !important; }
html body .wp-site-blocks > main {
  padding-top: 48px !important;
  padding-bottom: 64px !important;
}
/* Pages qui commencent par une banniere : pas d espace au-dessus */
html body .wp-site-blocks > main:has(> .wp-block-cover:first-child) { padding-top: 0 !important; }
html body .wp-site-blocks > main > .wp-block-cover:first-child {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}

/* Page Services : titre au meme niveau que les autres pages */
@media (min-width: 782px) {
  html body.page-template-services .wp-site-blocks > main {
    padding-top: 80px !important;
  }
}
  
.kafro-hide { display: none !important; }

/* --- Titres H2 en 20 px --- */
body.single-event .practical-heading { font-size: 20px !important; }
body.single-post .wp-block-post-content h2,
body.single-interview .wp-block-post-content h2,
body.single-event .wp-block-post-content h2 { font-size: 20px !important; line-height: 1.3; }

/* --- Pastilles --- */
body .kafro-pill { padding: 8px 16px !important; font-size: 15px !important; }

/* --- Fiche restaurant --- */
body.single-place main { --wp--preset--font-size--small: var(--wp--preset--font-size--body); }
body.single-place .wp-element-caption,
body.single-place .practical-row,
body.single-place .hours-row,
body.single-place .pick p,
body.single-place .info-value { font-size: var(--wp--preset--font-size--body) !important; }
body.single-place .wp-element-caption { color: var(--wp--preset--color--foreground) !important; }
body.single-place .place-section-heading,
body.single-place .practical-heading,
body.single-place .picks-heading,
body.single-place .gallery-heading { font-size: var(--wp--preset--font-size--h-2) !important; line-height: 1.25; }
html body.single-place .section-photos { padding-top: 40px !important; }

/* --- Banniere : titre et extrait toujours centres --- */
html body.single .wp-block-cover h1.wp-block-post-title,
html body.single .wp-block-cover .wp-block-post-excerpt,
html body.single .wp-block-cover .wp-block-post-excerpt__excerpt {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- Recherche du header --- */
body .wp-block-search__button {
  background: transparent !important;
  border: 1px solid var(--wp--preset--color--black) !important;
  color: var(--wp--preset--color--black) !important;
}
body .wp-block-search__button svg { fill: currentColor; }
body .wp-block-search__button:hover {
  background: var(--wp--preset--color--black) !important;
  color: var(--wp--preset--color--white) !important;
}
body .wp-block-search__inside-wrapper { gap: 8px; }
body .wp-block-search__input { border: 1px solid var(--wp--preset--color--black) !important; border-radius: 4px; }

/* --- Menu burger ouvert --- */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  padding-top: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: center !important;
  justify-content: center !important;
  gap: 28px !important;
  width: 100%;
  text-align: center;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  justify-content: center !important;
  width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size: 22px !important;
  padding: 4px 0 !important;
}

/* =========================================================
   4. FICHES PROJET MOBILE (en dernier pour passer devant)
   ========================================================= */
@media (max-width: 781px) {
  html body.single-project .wp-block-group.is-vertical { align-items: flex-start !important; }
  html body.single-project .wp-block-post-content,
  html body.single-project .wp-block-post-content p,
  html body.single-project .wp-block-post-content h2,
  html body.single-project .wp-block-post-content h3,
  html body.single-project .wp-block-post-content li,
  html body.single-project h1.wp-block-post-title,
  html body.single-project h2.wp-block-post-title,
  html body.single-project .wp-block-post-title.has-text-align-center {
    text-align: left !important;
    align-self: stretch !important;
    margin-left: 0 !important;
  }
  html body.single-project .wp-block-buttons,
  html body.single-project .wp-block-buttons.is-content-justification-center {
    justify-content: flex-start !important;
    align-self: stretch !important;
  }
}

/* Fiche restaurant : espace réduit avant la section Photos (ordinateur et mobile)
   Avant : 80 px (bas du contenu) + 64 px (bas de main) + 40 px (haut de Photos) */
html body.single-place .wp-site-blocks > main {
  padding-bottom: 0 !important;
}
html body.single-place .wp-site-blocks > main > .wp-block-group[style*="padding-bottom:80px"] {
  padding-bottom: 40px !important;
}
html body.single-place .section-photos {
  margin-top: 0 !important;
  padding-top: 40px !important;
}

/* Fiches (event, article, interview) : 30 px entre la ligne des catégories et la grande image */
html body.single .wp-site-blocks > main:has(~ .wp-block-group > .wp-block-post-featured-image) {
  padding-bottom: 30px !important;
  margin-bottom: 0 !important;
}
html body.single .wp-site-blocks > main ~ .wp-block-group:has(> .wp-block-post-featured-image) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
html body.single .wp-site-blocks > main ~ .wp-block-group > .wp-block-post-featured-image {
  margin-top: 0 !important;
}