/*
Theme Name: VitiSense
Theme URI: https://vitisense.local
Author: Prestataire web VitiSense
Description: Thème bloc du projet Interreg Rhin Supérieur VitiSense (laboratoire ICube). Trilingue FR/EN/DE avec Polylang, polices hébergées localement, charte graphique v1.1.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.5.4
License: GNU General Public License v2 or later
Text Domain: vitisense
*/

/* Styles complémentaires à theme.json (composants rendus en PHP). */

.vs-skip:focus { position: fixed; top: 8px; left: 8px; z-index: 1000; background: #fff; padding: 8px 12px; }

:where(a, button, summary):focus-visible { outline: 2px solid var(--wp--preset--color--vert-profond); outline-offset: 2px; }

/* Marges haute et basse de l'en-tête : modifier ces valeurs pour l'affiner */
:root { --vs-entete-marge: 6px; --vs-entete-marge-mobile: 6px; }
header.wp-block-template-part > .wp-block-group { padding-top: var(--vs-entete-marge) !important; padding-bottom: var(--vs-entete-marge) !important; }
@media (max-width: 781px) { header.wp-block-template-part > .wp-block-group { padding-top: var(--vs-entete-marge-mobile) !important; padding-bottom: var(--vs-entete-marge-mobile) !important; } }

/* En-tête (bandeau FEDER + logos + menu) fixé en haut au défilement, sous la barre d'admin WP */
header.wp-block-template-part { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 100; background: #fff; }
@media (max-width: 600px) { header.wp-block-template-part { top: 0; } } /* la barre d'admin n'est plus fixe sous 600 px */
html { scroll-padding-top: 120px; } /* les ancres ne passent pas sous l'en-tête */

/* Bandeau institutionnel */
.vs-bandeau { background: var(--wp--preset--color--fond-clair); color: var(--wp--preset--color--vert-profond); font-size: var(--wp--preset--font-size--legende); }
.vs-bandeau__inner { max-width: var(--wp--style--global--wide-size); margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.vs-placeholder-logo { display: inline-flex; align-items: center; justify-content: center; border: 1px dashed #B9C8AC; background: #fff; color: var(--wp--preset--color--gris); padding: 6px 10px; font-size: 11px; min-height: 40px; }

/* En-tête */
.vs-logo img { display: block; height: 56px; width: auto; min-width: 90px; }
/* Logo Interreg : assez haut pour que la mention « Cofinancé par l'UE » reste lisible */
.vs-entete-interreg img { display: block; height: 96px; width: auto; max-width: 100%; }
.vs-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 28px; }
.vs-nav a { color: var(--wp--preset--color--anthracite); text-decoration: none; font-size: 17px; font-weight: 500; padding: 6px 0; border-bottom: 2px solid transparent; }
.vs-nav a:hover, .vs-nav .current-menu-item > a, .vs-nav .current_page_item > a { color: var(--wp--preset--color--vert-profond); border-bottom-color: var(--wp--preset--color--vert-signature); }
.vs-langues { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; font-size: var(--wp--preset--font-size--ui); }
.vs-langues a { display: block; padding: 4px 6px; text-decoration: none; color: var(--wp--preset--color--gris); border-radius: 4px; }
.vs-langues li + li::before { content: "·"; color: var(--wp--preset--color--gris); margin-right: 2px; }
.vs-langues li { display: flex; align-items: center; }
.vs-langues .is-current a { color: var(--wp--preset--color--vert-profond); font-weight: 500; text-decoration: underline; }
.vs-langues .is-untranslated a { opacity: .6; }
.vs-bouton { display: inline-block; background: var(--wp--preset--color--vert-signature); color: #fff !important; font-size: var(--wp--preset--font-size--ui); font-weight: 500; border-radius: 6px; padding: 10px 18px; text-decoration: none; }
.vs-bouton:hover { background: var(--wp--preset--color--vert-profond); }

/* ---------- Accueil (d'après la maquette) ---------- */
.vs-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.vs-hero { gap: 56px !important; padding: 24px 0 40px; }
.vs-hero > .wp-block-column:first-child { flex: 1.1 1 0 !important; }
.vs-hero > .wp-block-column:last-child { flex: 1 1 0 !important; min-width: 0; }
.vs-hero .vs-accroche { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--vert-profond); margin: 0 0 14px; }
.vs-hero h1 { font-size: 30px; margin: 0 0 18px; }
.vs-hero h1 + p { color: var(--wp--preset--color--gris); line-height: 1.65; max-width: 46ch; margin: 0 0 28px; }
.vs-hero .wp-block-buttons { gap: 14px; }
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--wp--preset--color--vert-profond); border: 1px solid var(--wp--preset--color--vert-signature); padding: 9px 17px; }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--fond-clair); color: var(--wp--preset--color--vert-profond); }

/* Carrousel : galerie .vs-carrousel transformée par assets/js/carrousel.js */
.vs-carrousel.vs-carrousel--actif { display: grid !important; position: relative; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--wp--preset--color--fond-clair); gap: 0 !important; margin: 0; }
.vs-carrousel--actif > figure.wp-block-image { grid-area: 1 / 1; width: 100% !important; height: 100%; margin: 0 !important; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.vs-carrousel--actif > figure.wp-block-image.is-active { opacity: 1; pointer-events: auto; }
.vs-carrousel--actif > figure.wp-block-image img { width: 100% !important; height: 100% !important; object-fit: cover; }
.vs-carrousel--actif > figure.wp-block-image figcaption { display: none !important; }
.vs-carrousel__fleche { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.88); color: var(--wp--preset--color--anthracite); font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(18,20,15,.15); }
.vs-carrousel__fleche:hover { background: #fff; }
.vs-carrousel__fleche--prev { left: 10px; }
.vs-carrousel__fleche--next { right: 10px; }
.vs-carrousel__legende { font-size: var(--wp--preset--font-size--legende); color: var(--wp--preset--color--gris); line-height: 1.5; margin: 12px 0 0; padding-left: 10px; border-left: 2px solid var(--wp--preset--color--vert-signature); min-height: 36px; }
.vs-carrousel__barre { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.vs-carrousel__points { display: flex; gap: 8px; }
.vs-carrousel__point { width: 8px; height: 8px; border-radius: 4px; border: 0; padding: 0; background: #B9C8AC; cursor: pointer; transition: width .2s ease; }
.vs-carrousel__point.is-active { width: 20px; background: var(--wp--preset--color--vert-signature); }
.vs-carrousel__pause { width: 28px; height: 28px; border: 1px solid #B9C8AC; border-radius: 50%; background: #fff; cursor: pointer; position: relative; }
.vs-carrousel__pause::before, .vs-carrousel__pause::after { content: ""; position: absolute; top: 9px; width: 3px; height: 9px; background: var(--wp--preset--color--vert-profond); }
.vs-carrousel__pause::before { left: 10px; } .vs-carrousel__pause::after { left: 15px; }
.vs-carrousel__pause.is-paused::after { display: none; }
.vs-carrousel__pause.is-paused::before { left: 10px; top: 8px; width: 0; height: 0; background: none; border-style: solid; border-width: 5.5px 0 5.5px 9px; border-color: transparent transparent transparent var(--wp--preset--color--vert-profond); }

/* Séparateur avant les actualités (trait + point vert, motif « circuit ») */
.vs-actualites { position: relative; padding-top: 56px; }
.vs-actualites::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--wp--preset--color--fond-clair); }
.vs-actualites::after { content: ""; position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--wp--preset--color--vert-signature); }

/* Encarts sous les actualités */
.vs-encarts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vs-encart { background: var(--wp--preset--color--fond-clair); border-radius: 8px; padding: 22px 20px; }
.vs-encart__titre { font-size: 20px !important; color: var(--wp--preset--color--vert-profond); margin: 0 0 8px; }
.vs-encart p { font-size: 13px; color: var(--wp--preset--color--gris); line-height: 1.55; margin: 0 0 10px; }
.vs-encart a { font-size: 13px; font-weight: 600; color: var(--wp--preset--color--vert-profond); text-decoration: none; }
.vs-encart a:hover { text-decoration: underline; }

@media (max-width: 781px) {
	.vs-hero { gap: 28px !important; padding-top: 8px; }
	.vs-hero > .wp-block-column:last-child { order: -1; }
	.vs-hero h1 { font-size: 24px; }
	.vs-encarts { grid-template-columns: 1fr; }
}

/* Listes newsletters / publications */
.vs-liste { list-style: none; margin: 0; padding: 0; }
.vs-liste > li { padding: 16px 0; border-bottom: 1px solid var(--wp--preset--color--fond-clair); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: baseline; }
.vs-liste__date { color: var(--wp--preset--color--gris); font-size: var(--wp--preset--font-size--legende); display: block; }
.vs-liste__titre { font-family: var(--wp--preset--font-family--titre); font-weight: 600; font-size: var(--wp--preset--font-size--carte); margin: 2px 0; }
.vs-liste__ref { color: var(--wp--preset--color--gris); font-size: 13px; }
.vs-liste__ref p { margin: 4px 0 0; }

/* Pied de page */
.vs-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.vs-logos img { display: block; height: 56px; width: auto; background: #fff; padding: 6px; }
.vs-logos a, .vs-entete-interreg a { display: block; transition: opacity .15s; }
.vs-logos a:hover, .vs-entete-interreg a:hover { opacity: .8; }
.vs-pied-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.vs-pied-menu a { color: #fff; font-size: var(--wp--preset--font-size--legende); }

/* Placeholder photo (charte §4) */
.vs-photo-placeholder { background: var(--wp--preset--color--fond-clair); border: 1px dashed #B9C8AC; min-height: 240px; display: flex; align-items: center; justify-content: center; color: var(--wp--preset--color--gris); font-size: var(--wp--preset--font-size--legende); }

@media (max-width: 781px) {
	.vs-logo img { height: 44px; }
	.vs-entete-interreg img { height: 60px; } /* reste visible sur mobile : obligation de publicité UE */
	.vs-nav ul { gap: 4px 16px; }
	.vs-nav a { font-size: 15px; }
}

/* Page Consortium : tuiles dépliables (blocs « Détails » dans un groupe .vs-cartes) */
.vs-cartes { gap: 16px; grid-auto-flow: dense; }
.vs-cartes { overflow-anchor: none; } /* la compensation du défilement est faite en JS */
.vs-cartes--instant .vs-carte:not(.vs-carte--anime), .vs-cartes--instant .vs-carte:not(.vs-carte--anime)::details-content { transition: none !important; }
.vs-carte { border: 1px solid var(--wp--preset--color--fond-clair); border-radius: 6px; background: #fff; transition: background-color .2s; interpolate-size: allow-keywords; }
.vs-carte > summary { list-style: none; cursor: pointer; padding: 16px 44px 16px 16px; position: relative; font-size: var(--wp--preset--font-size--ui); color: var(--wp--preset--color--gris); line-height: 1.4; }
.vs-carte > summary::-webkit-details-marker { display: none; }
.vs-carte > summary strong { display: block; font-family: var(--wp--preset--font-family--titre); font-size: var(--wp--preset--font-size--section); font-weight: 600; color: var(--wp--preset--color--anthracite); margin-bottom: 2px; }
.vs-carte > summary::after { content: "+"; position: absolute; top: 14px; right: 16px; width: 22px; height: 22px; border-radius: 50%; background: var(--wp--preset--color--fond-clair); color: var(--wp--preset--color--vert-profond); display: flex; align-items: center; justify-content: center; font-size: 16px; transition: transform .2s; }
.vs-carte:hover { border-color: var(--wp--preset--color--vert-signature); }
.vs-carte[open] { grid-column: 1 / -1; background: var(--wp--preset--color--fond-clair); border-color: var(--wp--preset--color--vert-signature); }
.vs-carte[open] > summary::after { transform: rotate(45deg); background: #fff; }
.vs-carte__corps { display: grid; grid-template-columns: minmax(200px, 320px) 1fr; gap: 24px; padding: 0 16px 16px; align-items: start; }
.vs-carte__corps > * { margin: 0; }
.vs-carte img, .vs-carte .vs-photo-placeholder { width: 100%; border-radius: 4px; }
.vs-carte .vs-photo-placeholder { min-height: 180px; }
.vs-carte__texte > :first-child { margin-top: 0; }
.vs-carte::details-content { block-size: 0; overflow: hidden; transition: block-size .25s, content-visibility .25s allow-discrete; }
.vs-carte[open]::details-content { block-size: auto; }
@media (max-width: 600px) {
	.vs-carte__corps { grid-template-columns: 1fr; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.vs-carte, .vs-carte::details-content, .vs-carte > summary::after { transition: none; }
}
.vs-equipe { border-top: 1px solid var(--wp--preset--color--fond-clair); padding-top: 24px; margin-top: 24px; scroll-margin-top: 16px; }
.vs-equipe > h3 { margin-bottom: 0; }
.vs-equipe > h3 + p { margin-top: 4px; }
.vs-etiquette { display: inline-block; background: #fff; color: var(--wp--preset--color--vert-profond); font-size: 12px; padding: 2px 8px; border-radius: 4px; }

/* Page Consortium : chercheurs (photo ronde + texte) */
.vs-chercheur { display: grid; grid-template-columns: fit-content(220px) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 20px; }
/* Bloc Image dans la colonne photo : taille imposée, quels que soient les réglages du bloc (largeur, alignement, légende). */
.vs-chercheur > :first-child figure, .vs-chercheur > :first-child .wp-block-image { width: 96px !important; max-width: 96px; margin: 0 !important; float: none !important; display: block !important; }
.vs-chercheur > :first-child img { width: 96px !important; height: 96px !important; max-width: none; border-radius: 50%; object-fit: cover; display: block; }
.vs-chercheur > :first-child figcaption { display: none; }
/* Tout bloc ajouté par erreur dans un chercheur (au-delà de photo + texte) passe en pleine largeur dessous. */
.vs-chercheur > :nth-child(n+3) { grid-column: 1 / -1; }
.vs-chercheur__photos { display: flex; gap: 8px; }
.vs-chercheur__photos > * { margin: 0 !important; }
.vs-chercheur__photos img, .vs-photo-chercheur { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: block; }
.vs-photo-chercheur { background: var(--wp--preset--color--fond-clair); border: 1px dashed #B9C8AC; display: flex; align-items: center; justify-content: center; color: var(--wp--preset--color--gris); font-size: 12px; }
.vs-chercheur__texte > :first-child { margin-top: 0; }
@media (max-width: 600px) {
	.vs-chercheur { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.vs-chercheur > :first-child figure, .vs-chercheur > :first-child .wp-block-image { width: 80px !important; max-width: 80px; }
	.vs-chercheur > :first-child img { width: 80px !important; height: 80px !important; }
	.vs-chercheur__photos img, .vs-photo-chercheur { width: 80px; height: 80px; }
}

/* Page Consortium : rangée de membres d'une équipe (photo ronde + nom dessous) */
.vs-membres { gap: 24px; margin-top: 20px; }
.vs-membre { width: 140px; text-align: center; }
.vs-membre > * { margin: 0 auto !important; }
.vs-membre > * + * { margin-top: 8px !important; }
.vs-membre figure, .vs-membre .wp-block-image { width: 96px !important; max-width: 96px; float: none !important; display: block !important; }
.vs-membre img { width: 96px !important; height: 96px !important; max-width: none; border-radius: 50%; object-fit: cover; display: block; }
.vs-membre figcaption { display: none; }
.vs-membre p { font-size: var(--wp--preset--font-size--ui); line-height: 1.35; }

/* Membres affichés par [vitisense_membres] : initiales en attendant le portrait */
.vs-photo-chercheur--initiales { border-style: solid; font-family: var(--wp--preset--font-family--titre); font-size: 24px; font-weight: 600; color: var(--wp--preset--color--vert-profond); }
.vs-chercheur__nom { margin-bottom: 0; }

/* Image dans une tuile dépliée (logo ou photo) : posée sur une carte blanche, jamais déformée */
.vs-carte__corps .wp-block-image { margin: 0; background: #fff; padding: 16px; border-radius: 6px; text-align: center; }
.vs-carte__corps .wp-block-image img { display: inline-block; width: auto !important; height: auto !important; max-width: 100%; max-height: 188px; vertical-align: middle; } /* jamais agrandie au-delà de sa taille réelle */