/*
Theme Name: LFITM
Theme URI: https://lfitm.org
Author: ICS Network Solutions
Description: Thème du Lycée Français International Théodore Monod (Abu Dhabi). Thème blocs (FSE) avec Médiathèque (albums photo et vidéos indépendants) et flux Instagram.
Version: 1.5.1
Requires at least: 6.4
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: lfitm
*/

/* Layout concept: photo-led pages, blue structure, red only for calls to action;
   the school path TPS → Terminale is the one signature device. */

:root {
	--lf-blue: #15336f;      /* bleu LFITM */
	--lf-blue-deep: #0d2150;
	--lf-red: #c51d34;       /* rouge LFITM, CTA only */
	--lf-sky: #e8eef9;       /* pale blue ground for bands */
	--lf-sand: #e9dfcc;      /* Saadiyat sand, used sparingly */
	--lf-ink: #1a2233;
	--lf-muted: #5a6478;
	--lf-paper: #ffffff;
	--lf-line: #d6deec;
	--lf-radius: 6px;
}

/* ---------- Header ---------- */
.lf-topbar { background: var(--lf-blue-deep); color: #fff; font-size: .85rem; }
.lf-topbar a { color: #fff; text-decoration: none; }
.lf-topbar a:hover, .lf-topbar a:focus-visible { text-decoration: underline; }
.lf-header { border-bottom: 1px solid var(--lf-line); background: var(--lf-paper); position: sticky; top: 0; z-index: 50; }
.admin-bar .lf-header { top: 32px; }
.lf-header .wp-block-site-logo img { height: 56px; width: auto; }
.lf-header .wp-block-navigation a { font-weight: 600; color: var(--lf-ink); }
.lf-header .wp-block-navigation a:hover { color: var(--lf-blue); }

/* ---------- Buttons ---------- */
.wp-block-button.is-style-lf-cta .wp-block-button__link { background: var(--lf-red); color: #fff; }
.wp-block-button.is-style-lf-cta .wp-block-button__link:hover { background: #a3172a; }
.wp-block-button.is-style-outline .wp-block-button__link { border-color: currentColor; }

/* ---------- Hero ---------- */
.lf-hero.wp-block-cover { border-radius: 0; }

/* ---------- School path (signature) ---------- */
.lf-path { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 4px solid var(--lf-blue); }
.lf-path > .wp-block-column, .lf-path .lf-step { padding: 1.25rem 1.25rem 1.5rem 0; border-right: 1px solid var(--lf-line); position: relative; }
.lf-path .lf-step:last-child, .lf-path > .wp-block-column:last-child { border-right: 0; }
.lf-path .lf-step::before, .lf-path > .wp-block-column::before { content: ""; position: absolute; top: -10px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--lf-paper); border: 4px solid var(--lf-blue); }
.lf-path .lf-grades { font-size: .85rem; color: var(--lf-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 781px) {
	.lf-path { grid-template-columns: 1fr; border-top: 0; border-left: 4px solid var(--lf-blue); }
	.lf-path .lf-step, .lf-path > .wp-block-column { padding: 0 0 1.25rem 1.5rem; border-right: 0; }
	.lf-path .lf-step::before, .lf-path > .wp-block-column::before { top: 2px; left: -10px; }
}

/* ---------- Figures ---------- */
.lf-figures { font-variant-numeric: tabular-nums; }
.lf-figures strong { display: block; font-family: var(--wp--preset--font-family--display); font-size: 2.6rem; line-height: 1; color: var(--lf-blue); font-weight: 400; }

/* ---------- Details (accordions / tabs replacement) ---------- */
.wp-block-details { border-top: 1px solid var(--lf-line); padding: .9rem 0; }
.wp-block-details:last-of-type { border-bottom: 1px solid var(--lf-line); }
.wp-block-details summary { font-weight: 700; color: var(--lf-blue); cursor: pointer; font-size: 1.1rem; }
.wp-block-details[open] summary { margin-bottom: .75rem; }

/* ---------- Downloads ---------- */
.lf-docs { list-style: none; padding-left: 0; columns: 2 18rem; column-gap: 2rem; }
.lf-docs li { break-inside: avoid; padding: .35rem 0; border-bottom: 1px dotted var(--lf-line); }
.lf-docs a { text-decoration: none; }
.lf-docs a::after { content: " PDF"; font-size: .7rem; letter-spacing: .04em; color: var(--lf-muted); }

/* ---------- Médiathèque cards ---------- */
.lf-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 1.5rem; }
.lf-media-card { display: block; text-decoration: none; color: inherit; }
.lf-media-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--lf-radius); display: block; }
.lf-media-card .lf-media-title { font-weight: 700; margin-top: .6rem; color: var(--lf-ink); }
.lf-media-card .lf-media-meta { font-size: .85rem; color: var(--lf-muted); }
.lf-media-card.is-video .lf-thumb { position: relative; }
.lf-media-card.is-video .lf-thumb::after { content: ""; position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: var(--lf-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 7v10l8-5z'/%3E%3C/svg%3E") center/32px no-repeat; }
.lf-media-card:hover .lf-media-title, .lf-media-card:focus-visible .lf-media-title { color: var(--lf-blue); text-decoration: underline; }

/* ---------- Instagram ---------- */
.lf-instagram-fallback { border: 1px solid var(--lf-line); border-radius: var(--lf-radius); padding: 1.5rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; justify-content: space-between; }

/* ---------- Contact form ---------- */
.lf-form { display: grid; gap: 1rem; max-width: 640px; }
.lf-form label { display: grid; gap: .35rem; font-weight: 600; }
.lf-form input, .lf-form textarea, .lf-form select { font: inherit; padding: .7rem .8rem; border: 1px solid #b9c4d8; border-radius: var(--lf-radius); }
.lf-form .lf-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lf-form .lf-consent { font-weight: 400; display: flex; gap: .5rem; align-items: flex-start; }
.lf-notice { padding: 1rem; border-radius: var(--lf-radius); background: var(--lf-sky); }

/* ---------- Footer ---------- */
.lf-footer { background: var(--lf-blue-deep); color: #dfe6f5; }
.lf-footer a { color: #fff; }
.lf-footer h2, .lf-footer h3 { color: #fff; }

/* ---------- Focus & motion ---------- */
:focus-visible { outline: 3px solid var(--lf-red); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

/* ---------- Layout fixes ---------- */


.lf-path .wp-block-image img, .lf-mission .wp-block-image img { width: 64px; height: auto; }
.lf-path .wp-block-image, .lf-mission .wp-block-image { margin-bottom: .25rem; }
.alignwide > .wp-block-columns, .alignfull > .wp-block-columns { width: 100%; }
.lf-path h3 a, .lf-mission h3 a { text-decoration: none; }
.lf-path h3 a:hover, .lf-mission h3 a:hover { text-decoration: underline; }
.lf-mission h3 { font-size: 1.15rem; }
/* ---------- Language switch ---------- */
.lf-lang { font-weight: 700; letter-spacing: .02em; }
.lf-lang a, .lf-lang span[aria-current] { color: #fff; }
.lf-lang span[aria-current] { text-decoration: underline; text-underline-offset: 3px; }
.lf-lang a { opacity: .75; text-decoration: none; }
.lf-lang a:hover, .lf-lang a:focus-visible { opacity: 1; }