/*
Theme Name: Djao-Rakitine
Theme URI: https://djaorakitine.com
Author: Fred Pixlab
Author URI: https://fredpixlab.com
Description: Thème sur mesure de l'agence Djao-Rakitine, successeur de Lay Theme. Bilingue intégré (anglais par défaut, français sous /fr/), contenus en blocs WordPress.
Version: 0.4.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: djao
*/

/* Police de l'agence. Fichier hérité de Lay (uploads/2017/04), déclaré dans functions.php.
   Licence web à confirmer par l'agence (docs/releve-design-lay.md). */

:root {
	--djao-marge: 5vw;          /* Lay : frameMargin 5 % */
	--djao-largeur: 960px;      /* Lay : misc_options_max_width */
	--djao-haut: 220px;         /* Lay : topFrameMargin */
	--djao-transition: 0.6s;    /* Lay : navigation_transition_duration */
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--noir);
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; transition: opacity .2s; }
a:hover { opacity: .6; }
a:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

/* ---------- En-tête : logo à gauche, menu à droite, non fixe ---------- */
.djao-entete {
	width: 100%;
	max-width: calc(var(--djao-largeur) + 2 * var(--djao-marge));
	margin: 0 auto;
	padding: 66px var(--djao-marge) 0;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
}
.djao-logo img { width: 240px; }
.djao-logo .djao-logo-texte { font-size: var(--wp--preset--font-size--titre); }

.djao-menu { padding-top: 34px; }
.djao-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 50px; }
.djao-menu .current-menu-item > a,
.djao-menu .current-menu-ancestor > a,
.djao-menu .current_page_item > a { color: var(--wp--preset--color--gris); }

.djao-burger { display: none; }

/* ---------- Contenu ---------- */
.djao-contenu {
	flex: 1 0 auto;
	width: 100%;
	max-width: calc(var(--djao-largeur) + 2 * var(--djao-marge));
	margin: 0 auto;
	padding: calc(var(--djao-haut) - 66px - 40px) var(--djao-marge) 4vw;
}
/*
 * Espacements : une seule échelle pour tout le site.
 *   rangée  : entre deux images ou deux blocs de la grille (Lay : 4 à 8 %) ;
 *   texte   : entre deux paragraphes, une ligne ;
 *   légende : entre une image et sa légende.
 * Les blocs Langue n'ajoutent pas d'enveloppe : leurs paragraphes sont au même niveau que les
 * images, d'où les règles « texte suivi de texte » ci-dessous.
 */
:root {
	--djao-esp-rangee: clamp(48px, 7vw, 96px);
	--djao-esp-texte: 1em;
	--djao-esp-legende: 12px;
}
.djao-article > *,
.djao-contenu .wp-block-column > * { margin: 0; }

/* Par défaut, grand espace : entre images, rangées, et avant un titre. */
.djao-article > * + * { margin-top: var(--djao-esp-rangee); }
/* Texte suivi de texte (hors légendes) : une ligne. */
:is(.djao-article, .djao-contenu .wp-block-column) > :is(p, ul, ol, .wp-block-buttons):not(.djao-legende) + :is(p, ul, ol, .wp-block-buttons):not(.djao-legende) { margin-top: var(--djao-esp-texte); }
/* Sous un titre : une demi-ligne. */
:is(.djao-article, .djao-contenu .wp-block-column) > :is(h1, h2, h3) + * { margin-top: calc(var(--djao-esp-texte) / 2); }
/* Dans une colonne : une ligne entre deux éléments, quels qu'ils soient. */
.djao-contenu .wp-block-column > * + * { margin-top: var(--djao-esp-texte); }

/* Rangées : les colonnes WordPress reprennent la grille 12 colonnes de Lay (gouttière 1 %). */
.djao-contenu .wp-block-columns { gap: 1%; margin-bottom: 0; }
.djao-contenu .wp-block-columns.is-style-ecartees { justify-content: space-between; }

/* Texte courant : une seule taille partout. */
.djao-article p:not([class*="-font-size"]) { font-size: var(--wp--preset--font-size--texte); }

/* Fiche projet : lignes serrées, comme le format Lay « labels » (interligne 1,8, sans marge). */
.djao-contenu p.has-gris-color { line-height: 1.8; }
:is(.djao-article, .djao-contenu .wp-block-column) > p.has-gris-color:not(.djao-legende) + p.has-gris-color:not(.djao-legende) { margin-top: 0; }

/* Légendes : 17 px, gris foncé, juste sous l'image. */
.djao-contenu p.djao-legende,
.djao-contenu p.djao-legende.has-petit-font-size { font-size: 17px; line-height: 1.5; color: var(--wp--preset--color--gris-fonce); }
.djao-contenu .wp-block-image + .djao-legende.djao-legende,
.djao-contenu .djao-legende + .djao-legende.djao-legende { margin-top: var(--djao-esp-legende); }

/* ---------- Fiche projet (inc/fiche.php) et briques ---------- */
/* Photo : image pleine largeur, légende 12 px dessous. */
.djao-photo { margin: 0; }
.djao-photo img { width: 100%; }
.djao-contenu figcaption.djao-legende { margin-top: var(--djao-esp-legende); font-size: 17px; line-height: 1.5; color: var(--wp--preset--color--gris-fonce); }

/* En-tête : titre et lieu sur 5 colonnes, fiche sur 6, une colonne vide entre (forme la plus courante sous Lay). */
.djao-fiche { display: grid; grid-template-columns: 41.67% 50%; justify-content: space-between; align-items: start; }
.djao-fiche h1 { margin: 0; }
.djao-fiche-lieu { margin: calc(var(--djao-esp-texte) / 2) 0 0; color: var(--wp--preset--color--gris-fonce); }
.djao-fiche-lignes p { margin: 0; line-height: 1.8; color: var(--wp--preset--color--gris); }

/* Texte : mêmes espacements qu'un texte posé directement dans la page. */
.djao-texte > * { margin: 0; }
.djao-texte > * + * { margin-top: var(--djao-esp-texte); }
.djao-texte > :is(h1, h2, h3) + * { margin-top: calc(var(--djao-esp-texte) / 2); }
.djao-texte > p.has-gris-color + p.has-gris-color { margin-top: 0; }

/* Deux colonnes : la gouttière de la grille Lay (1 %). */
.djao-deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--djao-esp-rangee) 1%; align-items: start; }

/* Crédit et « More projects » : deux vignettes sur 5 colonnes chacune, écartées. */
.djao-credit-projet { color: var(--wp--preset--color--gris); }
.djao-autres h2 { margin: 0 0 calc(var(--djao-esp-texte) / 2); }
.djao-autres-grille { display: flex; justify-content: space-between; gap: 1%; }
.djao-autres-grille > * { flex: 0 1 41.67%; margin: 0; }

/* ---------- Vignette de projet ---------- */
.djao-vignette a { display: block; }
/* Proportions imposées seulement si le bloc en demande : sinon celles de l'image (attributs width/height).
   Un « aspect-ratio: auto » les effaçait et laissait la hauteur provisoire de 1 500 px de WordPress. */
.djao-vignette img { width: 100%; }
.djao-vignette[style*="--djao-ratio"] img { aspect-ratio: var(--djao-ratio); object-fit: cover; }
.djao-vignette-titre { margin-top: 8px; }

/* Grille d'accueil (inc/accueil.php) : par deux, 5 colonnes sur 12 chacune, écartées ;
   une vignette « grande » prend toute la largeur. */
.djao-grille-accueil {
	display: grid; grid-template-columns: 41.67% 41.67%; justify-content: space-between;
	align-items: center; row-gap: var(--djao-esp-rangee);
}
.djao-grille-accueil > * { margin: 0; }
.djao-grille-accueil .djao-vignette-grande { grid-column: 1 / -1; }

/* ---------- Project list (inc/liste.php) : l'allure du tableau TablePress d'avant ---------- */
.djao-liste-cadre { max-width: 91.67%; }
.djao-liste { width: 100%; border-collapse: collapse; }
.djao-liste th, .djao-liste td { padding: 8px 10px 10px 6px; text-align: left; vertical-align: top; border-bottom: 1px solid #ddd; }
.djao-liste th { font-weight: inherit; vertical-align: bottom; border-bottom-color: #ccc; }
.djao-liste th button {
	display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%;
	padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.djao-liste th button::after { content: "↕"; font-size: .8em; color: #bbb; }
.djao-liste th[aria-sort="ascending"] button::after { content: "↑"; color: inherit; }
.djao-liste th[aria-sort="descending"] button::after { content: "↓"; color: inherit; }
.djao-liste tbody tr { cursor: pointer; transition: background-color .2s; }
.djao-liste tbody tr:hover { background: #f5f5f5; }
.djao-liste tbody tr.djao-liste-sans-lien { cursor: default; }
.djao-liste tbody tr.djao-liste-sans-lien:hover { background: none; }
.djao-liste td a:hover { opacity: 1; }

/* ---------- Pied de page collant ---------- */
.djao-pied {
	width: 100%;
	max-width: calc(var(--djao-largeur) + 2 * var(--djao-marge));
	margin: 0 auto;
	padding: 40px var(--djao-marge) 32px;
	color: var(--wp--preset--color--gris);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px;
}
.djao-pied a { color: inherit; }
.djao-credit { flex-basis: 100%; margin: 0; text-align: right; font-size: 11px; line-height: 1; }
.djao-credit a { color: #8e9093; }

/* Formulaire Mailchimp du pied de page (code d'intégration Mailchimp) : police et gris du site. */
.djao-pied #mc_embed_signup { background: none; font: inherit; width: 100%; }
.djao-pied #mc_embed_signup input,
.djao-pied #mc_embed_signup .button {
	font-family: inherit; font-size: var(--wp--preset--font-size--texte); font-weight: 300; letter-spacing: .02em; border-radius: 0;
}
.djao-pied #mc_embed_signup form input.email,
.djao-pied #mc_embed_signup form input.email::placeholder { font-family: inherit !important; font-weight: 300; }
.djao-pied #mc_embed_signup form input.email { border: 1px solid var(--wp--preset--color--filet); color: var(--wp--preset--color--noir); }
.djao-pied #mc_embed_signup .button { background: var(--wp--preset--color--gris); color: #fff; height: auto; padding: 6px 16px; }
.djao-pied #mc_embed_signup .button:hover { background: var(--wp--preset--color--gris-fonce); }

/* ---------- Langue ---------- */
.djao-langues a[aria-current="true"] { color: var(--wp--preset--color--gris); }

/* ---------- Fondus entre les pages (navigateurs récents ; ailleurs, changement direct) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--djao-transition); }
@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- Téléphone : une colonne, menu repliable (Lay : barre de 80 px) ---------- */
@media (max-width: 600px) {
	:root { --djao-haut: 40px; --djao-marge: 10px; }
	.djao-entete { padding-top: 24px; align-items: center; }
	.djao-logo img { width: auto; height: 30px; }
	.djao-burger {
		display: block; background: none; border: 0; padding: 8px; cursor: pointer;
		color: var(--wp--preset--color--gris); font: inherit;
	}
	.djao-menu { display: none; padding-top: 0; }
	.djao-entete.is-ouvert { flex-wrap: wrap; }
	.djao-entete.is-ouvert .djao-menu { display: block; width: 100%; }
	.djao-entete.is-ouvert .djao-menu ul { flex-direction: column; gap: 12px; font-size: 21px; padding: 16px 0; }
	.djao-contenu { padding-top: 32px; }
	.djao-contenu .wp-block-columns { gap: 20px; }
	.djao-fiche, .djao-deux-colonnes { grid-template-columns: 1fr; gap: 20px; }
	.djao-grille-accueil { grid-template-columns: 1fr; row-gap: 40px; }
	.djao-liste-cadre { max-width: none; overflow-x: auto; }
	.djao-liste { min-width: 640px; }
	.djao-autres-grille { flex-direction: column; gap: 20px; }
}