/*
Theme Name: Catinus
Theme URI:
Author: Étude François Catinus
Description: Thème enfant de Twenty Twenty-Five pour l'étude notariale François Catinus. Reprend la charte de la maquette Adobe XD (couleurs, typographies, espacements) sous forme de tokens theme.json. La mise en page se compose dans l'éditeur natif de WordPress.
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: catinus
*/

/* ==========================================================================
   Styles complémentaires — à n'utiliser QUE pour ce que theme.json ne sait
   pas faire. Tout ce qui est couleur / typo / espacement passe par theme.json.

   Variables disponibles (générées par theme.json) :
     --wp--preset--color--{base|contrast|accent-1|accent-2|accent-3|accent-4}
     --wp--preset--font-size--{small|nav|base|large|card|label|h2|h1}
     --wp--preset--font-family--{heading|body}
     --wp--preset--spacing--{20|30|40|50|60|70|80|90}
   ========================================================================== */

/* --- Composants repris de la maquette ------------------------------------ */

/* Distance entre le bord de la fenêtre et le bord du contenu (conteneur 1230px).
   Sert aux éléments qui débordent volontairement de la grille. */
:root { --catinus-bleed: max(1.5rem, (100vw - 1230px) / 2); }

/* Sous-titre de section : trait partant du BORD GAUCHE de la page, puis le mot
   en italique. Mesuré sur la maquette (trait de 0 à 104 px sur un écran 1440).
   Usage : ajouter la classe « catinus-section-label » (panneau Avancé du bloc)
   à un groupe horizontal contenant [Séparateur] + [Titre]. */
.catinus-section-label { display: flex; align-items: center; column-gap: 24px; }
.catinus-section-label hr.wp-block-separator {
	flex: 0 0 auto;
	height: 2px;
	border: 0;                 /* un <hr> tire sa couleur de sa bordure : on la retire… */
	background-color: var(--wp--preset--color--contrast);  /* …donc la couleur passe ici */
	opacity: 1;
	width: var(--catinus-bleed);
	margin-left: calc(-1 * var(--catinus-bleed));
	margin-right: 0;
	max-width: none;
}
/* Variante colonne de droite : trait court, sans débord. */
.catinus-section-label--stub hr.wp-block-separator { width: 90px; margin-left: 0; }
/* Variante sur fond bleu (section À propos) : trait blanc. */
.catinus-section-label--light hr.wp-block-separator {
	background-color: var(--wp--preset--color--accent-3);
}

/* Débordement d'un bloc jusqu'au bord droit de la page (visuel du hero). */
.catinus-bleed-right { margin-right: calc(-1 * var(--catinus-bleed)); }

/* Carte blanche flottante en débord sur une image (hero, contact).
   Usage : classe sur un groupe placé juste après un bloc image, lui-même dans
   un groupe portant la classe « catinus-overlay-parent ». */
.catinus-overlay-parent { position: relative; }
.catinus-overlay-card {
	position: absolute;
	left: -1.5rem;
	bottom: -1.5rem;
	max-width: 320px;
	background: var(--wp--preset--color--base);
	box-shadow: 0 12px 32px rgb(0 0 0 / 0.10);
	padding: 1.5rem 1.75rem;
}

@media (max-width: 781px) {
	.catinus-section-label hr.wp-block-separator { width: 48px; margin-left: 0; }
	.catinus-bleed-right { margin-right: 0; }
	.catinus-overlay-card { position: static; max-width: none; margin-top: 1rem; }
}

/* --- Emplacements médias calibrés sur la maquette ------------------------ */
/* Chaque emplacement est un vrai bloc Image : il suffit de cliquer dessus et
   de téléverser. Le ratio est imposé en CSS, l'image se recadre toute seule. */

/* Icônes des cartes Compétences — 48 x 48 (carré), mesuré sur la maquette */
.catinus-icon img { width: 48px; height: 48px; object-fit: contain; }
.catinus-icon .components-placeholder { min-height: 48px; }

/* Petites icônes des coordonnées (contact) — 24 x 24 */
.catinus-icon-sm img { width: 24px; height: 24px; object-fit: contain; }

/* Visuel du hero — format carré */
.catinus-photo-square img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }

/* Photo de la section Contact — 3/4 */
.catinus-photo-43 img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }

/* Cartes photos « À propos » — portrait 1:2, légende posée sur l'image avec
   un dégradé bleu, comme sur la maquette. Groupe = image + paragraphe. */
.catinus-photo-card { position: relative; overflow: hidden; }
.catinus-photo-card img {
	aspect-ratio: 1 / 2;
	object-fit: cover;
	width: 100%;
	display: block;
}
.catinus-photo-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(25 69 117 / 0.85) 0%, rgb(25 69 117 / 0.15) 55%, rgb(25 69 117 / 0) 100%);
	pointer-events: none;
}
/* la légende (dernier paragraphe du groupe) passe par-dessus */
.catinus-photo-card > p:last-child {
	position: absolute;
	left: 1.25rem;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 2;
	margin: 0;
	color: var(--wp--preset--color--accent-3);
	font-family: var(--wp--preset--font-family--heading);
}
/* emplacement vide : on garde la hauteur pour voir la mise en page */
.catinus-photo-card { min-height: 380px; background: var(--wp--preset--color--accent-4); }

/* Badges flottants du hero — 2 cartes blanches en débord à gauche de l'image,
   la seconde décalée de 40 px vers la droite (mesuré sur la maquette). */
.catinus-badges {
	position: absolute;
	left: -80px;
	bottom: 15%;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}
.catinus-badges > p {
	margin: 0;
	min-width: 172px;
	background: var(--wp--preset--color--accent-3);
	box-shadow: 0 8px 24px rgb(25 69 117 / 0.14);
	border-radius: 4px;
	padding: 0.85rem 1.25rem;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--nav);
}
.catinus-badges > p:last-child { margin-left: 40px; }
.catinus-badges > p a { color: var(--wp--preset--color--contrast); }

@media (max-width: 781px) {
	.catinus-badges { position: static; flex-direction: row; flex-wrap: wrap; margin-top: 1rem; }
	.catinus-badges > p:last-child { margin-left: 0; }
	.catinus-photo-card { min-height: 300px; }
}

/* --- Carrousel Compétences ----------------------------------------------- */
/* Les cartes restent des blocs Groupe normaux, éditables un par un.
   Le thème n'ajoute que le défilement et les flèches (assets/js/carousel.js) :
   rien n'est écrit dans le contenu de la page. 4 cartes visibles à la fois. */

.catinus-carousel-wrap { position: relative; }

.catinus-carousel {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;              /* Firefox */
	-ms-overflow-style: none;
	padding-bottom: 0.5rem;
}
.catinus-carousel::-webkit-scrollbar { display: none; }

.catinus-carousel > .wp-block-group {
	flex: 0 0 25%;                      /* 4 cartes visibles */
	scroll-snap-align: start;
	padding-inline: var(--wp--preset--spacing--50);
	min-width: 0;
}
.catinus-carousel > .wp-block-group:first-child { padding-left: 0; }
/* trait vertical entre les cartes, comme sur la maquette */
.catinus-carousel > .wp-block-group + .wp-block-group {
	border-left: 1px solid var(--wp--preset--color--contrast);
}

/* Flèches injectées par carousel.js, en haut à droite de la rangée.
   Masquées tant qu'il y a 4 cartes ou moins (rien à faire défiler). */
.catinus-carousel-arrow {
	position: absolute;
	top: -66px;
	width: 44px;
	height: 44px;
	display: none;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	transition: background-color 150ms ease, color 150ms ease;
}
.catinus-carousel-wrap.is-scrollable .catinus-carousel-arrow { display: inline-flex; }
.catinus-carousel-arrow--prev { right: 60px; }
.catinus-carousel-arrow--next { right: 0; }
.catinus-carousel-arrow:hover:not([disabled]) {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--accent-3);
}
.catinus-carousel-arrow[disabled] { opacity: 0.3; cursor: default; }

@media (max-width: 1024px) {
	.catinus-carousel > .wp-block-group { flex-basis: 50%; }
}
@media (max-width: 640px) {
	.catinus-carousel > .wp-block-group { flex-basis: 85%; }
	.catinus-carousel-arrow { display: none !important; }  /* défilement au doigt */
}

/* Dans l'éditeur : pas de défilement, les cartes passent à la ligne pour
   rester toutes accessibles à l'édition. */
.editor-styles-wrapper .catinus-carousel { overflow-x: visible; flex-wrap: wrap; }
.editor-styles-wrapper .catinus-carousel > .wp-block-group { flex-basis: 25%; }

/* --- Navigation ---------------------------------------------------------- */

.wp-block-navigation {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
}
.wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--contrast);
	border: none;
	padding: 0.4rem 0;
	min-width: 220px;
}
.wp-block-navigation .wp-block-navigation__submenu-container a { color: var(--wp--preset--color--base); }
.wp-block-navigation .wp-block-navigation__submenu-container a:hover { color: var(--wp--preset--color--accent-1); }

/* Entrée de menu active */
.wp-block-navigation-item.current-menu-item > a { color: var(--wp--preset--color--accent-1); }