/**
 * Solid 3 — styles complémentaires.
 *
 * theme.json couvre les couleurs, la typographie et les espacements.
 * Ce fichier ne contient que ce qu'il ne sait pas exprimer : la bannière
 * et son menu superposé, les états de survol, et quelques composants
 * éditoriaux (chiffres clés, timeline, cartes).
 *
 * Convention : tout est préfixé .s3- pour ne jamais entrer en conflit
 * avec les classes du cœur de WordPress.
 */

/* ─────────────────────────────────────────────────────────────
   1. Bannière d'accueil
   ───────────────────────────────────────────────────────────── */

/* Ratio 4,8:1, celui du fichier livré (3840 × 800). Tenu par aspect-ratio
   plutôt que par une hauteur fixe : la bannière reste pleine largeur et se
   réduit proportionnellement.

   Le dégradé est posé en fond et étiré — background-size: 100% 100%. C'est
   volontaire : l'image est strictement uniforme d'un bord à l'autre, donc
   l'étirement horizontal ne déforme rien, alors qu'un `cover` rognerait le
   haut sombre et le bas clair, c'est-à-dire le dégradé lui-même. */
.s3-banner {
	position: relative;
	width: 100%;
	aspect-ratio: 4.8 / 1;
	min-height: 200px;
	background-image: url("../images/banner.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────
   2. Menu superposé à la bannière
   ───────────────────────────────────────────────────────────── */

/* Le menu se pose en BAS de la bannière, comme sur le croquis. C'est ce
   qui rend le voile inutile : à cette hauteur le dégradé vaut #DAE0E5 ou
   plus clair, et le libellé en bleu profond y tient 10,2:1.

   Mesuré sur assets/images/banner.png, à mi-largeur :
     70 % de la hauteur  #B5C1CB   7,4:1
     80 %                #CED6DC   9,2:1
     85 %                #DAE0E5  10,2:1
   Le menu n'atteint le fond le plus sombre que s'il passe sur deux lignes,
   et 7,4:1 reste largement au-dessus du seuil AA. */
.s3-banner-nav {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--wp--preset--spacing--40) 1.15rem;
}

.s3-banner-nav .wp-block-navigation {
	gap: clamp(1.25rem, 3vw, 2.75rem);
}

.s3-banner-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--navy);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--x-small);
	padding-bottom: 4px;
	border-bottom: 1px solid transparent;
	transition: color 0.25s ease, border-color 0.25s ease;
}

/* Le libellé ne change pas de couleur au survol : l'orange sur le clair de
   la bannière ne donne que 2,6:1. C'est le filet orange qui signale l'état
   actif — l'orange marque, il ne porte jamais le texte. */
.s3-banner-nav .wp-block-navigation-item__content:hover,
.s3-banner-nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--navy);
	border-bottom-color: var(--wp--preset--color--orange);
}

/* ─────────────────────────────────────────────────────────────
   3. Logo central sous la bannière
   ───────────────────────────────────────────────────────────── */

/* Le logo se posait a cheval sur la banniere, dont le menu occupait alors
   le HAUT. Le menu etant passe en bas, le chevauchement masquait deux
   entrees : le logo descend donc entierement sous la bande, comme sur le
   croquis du client. */
.s3-logo-center {
	display: flex;
	justify-content: center;
	padding-top: var(--wp--preset--spacing--50);
	position: relative;
	z-index: 6;
}

.s3-logo-center figure {
	margin: 0;
}

.s3-logo-center img,
.s3-logo-center svg {
	width: 300px;
	max-width: 60vw;
	height: auto;
}

/* Arrivee du triangle, reprise de la proposition du client. Elle est
   appliquee au logo deja en place et non a un ecran d'accueil plein cadre :
   celui-ci retarderait l'acces au contenu a chaque visite, y compris pour
   un investisseur qui revient consulter une page precise.

   Le mot-symbole ne bouge pas. Seul #s3-mark est anime — d'ou le SVG
   insere dans la page plutot que charge en <img> (voir le commentaire de
   patterns/brand-logo-animated.php). */
.s3-logo-anim {
	line-height: 0;
}

.s3-logo-anim #s3-mark {
	transform-box: fill-box;
	transform-origin: center;
	animation: s3-arrivee 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes s3-arrivee {
	from {
		opacity: 0;
		transform: scale(0.15);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ─────────────────────────────────────────────────────────────
   3 bis. Images de marque
   ───────────────────────────────────────────────────────────── */

/* Le symbole seul dans l'en-tête. Le lockup complet n'est pas utilisé
   ici : à cette taille son mot-symbole tomberait à 4 px de haut. Le nom
   est porté juste à côté par le titre du site. */
.s3-brand-mark {
	margin: 0;
	line-height: 0;
}

.s3-brand-mark img {
	width: 38px;
	height: auto;
	display: block;
}

.s3-brand-logo {
	margin: 0;
}

/* Portrait de l'equipe. Le ratio est fixe pour que la colonne ne bouge
   pas quand l'image est remplacee par une autre, cadree differemment. */
.s3-portrait {
	margin: 0;
}

.s3-portrait img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 20%;
	display: block;
}

/* Le logo clair du pied de page. */
.s3-brand-logo-inverse {
	margin: 0 0 1.5rem;
}

.s3-brand-logo-inverse img {
	width: 150px;
	max-width: 45%;
	height: auto;
	display: block;
}

/* ─────────────────────────────────────────────────────────────
   4. En-tête des pages intérieures
   ───────────────────────────────────────────────────────────── */

.s3-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(8, 48, 80, 0.09);
}

.s3-site-header .wp-block-navigation-item__content {
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	transition: color 0.25s ease, border-color 0.25s ease;
}

/* Même règle sur fond blanc : l'orange ne donne que 2,6:1 en texte.
   Le libellé passe en bleu profond, le filet orange fait la signalétique. */
.s3-site-header .wp-block-navigation-item__content:hover,
.s3-site-header .current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--navy);
	border-bottom-color: var(--wp--preset--color--orange);
}

/* ─────────────────────────────────────────────────────────────
   3 bis. Bascule de langue
   ───────────────────────────────────────────────────────────── */

/* Encadrée plutôt que soulignée : dans une barre de navigation, un mot de
   deux lettres traité comme les autres liens se lit comme une sixième
   rubrique. Le cadre dit « ceci n'est pas une page ». */
.s3-lang {
	display: inline-block;
	padding: 0.3rem 0.55rem;
	border: 1px solid rgba(8, 48, 80, 0.22);
	border-radius: 2px;
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1;
	text-decoration: none;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

.s3-lang:hover,
.s3-lang:focus-visible {
	border-color: var(--wp--preset--color--orange);
	background-color: rgba(255, 121, 24, 0.08);
	color: var(--wp--preset--color--navy);
}

/* Sur la bannière d'accueil, le menu est centré en bas. La bascule se pose
   dans le coin, sur la zone claire mesurée plus haut — jamais au centre,
   où elle déséquilibrerait le menu. */
.s3-lang--banner {
	position: absolute;
	right: var(--wp--preset--spacing--40);
	bottom: 1rem;
	z-index: 6;
}

/* ─────────────────────────────────────────────────────────────
   4 bis. Longueur de ligne
   ───────────────────────────────────────────────────────────── */

/* WordPress ne sait pas porter max-width dans les attributs d'un bloc.
   L'écrire directement dans le style en ligne rend le bloc invalide à
   l'ouverture de l'éditeur : WordPress régénère le HTML depuis les
   attributs, n'y retrouve pas la propriété, et affiche « Le bloc contient
   du contenu invalide ou inattendu ». La largeur passe donc par une
   classe, `className` étant un attribut reconnu.

   Ces classes ont un second rôle. Dans une mise en page « contenu
   contraint », WordPress pose margin-left et margin-right à auto, en
   !important, sur tout enfant plus étroit que sa colonne. Or nos titres et
   chapeaux limitent la longueur de ligne, ils ne demandent pas à être
   centrés : sans cette règle, le surtitre reste à gauche et le titre juste
   en dessous glisse au centre.

   Le centrage volontaire passe par « Aligner au centre » dans l'éditeur,
   qui pose has-text-align-center. */
[class*="s3-mesure-"] {
	/* Attention : margin-left: 0 ne convient pas. Dans une section en pleine
	   largeur, ce sont justement les marges automatiques qui creusent la
	   colonne de contenu ; les annuler colle le bloc au bord de l'écran
	   pendant que les titres, eux, restent dans la colonne. On recalcule
	   donc ce retrait et on ne libère que le côté droit. */
	margin-left: max(
		0px,
		(100% - var(--wp--style--global--content-size, 1180px)) / 2
	) !important;
	margin-right: auto !important;
}

.has-text-align-center[class*="s3-mesure-"] {
	margin-left: auto !important;
}

.s3-mesure-620 { max-width: 620px; }
.s3-mesure-640 { max-width: 640px; }
.s3-mesure-680 { max-width: 680px; }
.s3-mesure-720 { max-width: 720px; }
.s3-mesure-760 { max-width: 760px; }
.s3-mesure-860 { max-width: 860px; }
.s3-mesure-900 { max-width: 900px; }

/* ─────────────────────────────────────────────────────────────
   5. Surtitre éditorial
   ───────────────────────────────────────────────────────────── */

.is-style-eyebrow {
	font-size: var(--wp--preset--font-size--x-small) !important;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--steel);
	margin-bottom: 1rem;
}

/* Filet court au-dessus du surtitre — signal institutionnel discret,
   dans l'esprit des références envoyées par le client. */
.is-style-eyebrow::before {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	background: var(--wp--preset--color--orange);
	margin-bottom: 1.25rem;
}

/* ─────────────────────────────────────────────────────────────
   6. Chiffres clés
   ───────────────────────────────────────────────────────────── */

/* Chasse fixe : pendant le décompte les chiffres se succèdent, et des
   glyphes de largeurs différentes feraient trembler la ligne entière. */
.s3-stat__figure {
	font-size: clamp(2.25rem, 4.5vw, 3.5rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
	color: var(--wp--preset--color--navy);
	margin-bottom: 0.75rem;
}

.s3-stat__label {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--steel);
	margin-bottom: 0.6rem;
}

.s3-stat__note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--slate);
	line-height: 1.55;
}

/* Sur fond bleu profond, on inverse les valeurs pour garder le contraste. */
.has-navy-background-color .s3-stat__figure {
	color: var(--wp--preset--color--white);
}

.has-navy-background-color .s3-stat__note {
	color: rgba(255, 255, 255, 0.75);
}

.has-navy-background-color .s3-stat__label {
	color: var(--wp--preset--color--orange);
}

/* ─────────────────────────────────────────────────────────────
   7. Cartes
   ───────────────────────────────────────────────────────────── */

.wp-block-group.is-style-card {
	background: var(--wp--preset--color--paper);
	border: 1px solid rgba(8, 48, 80, 0.08);
	padding: var(--wp--preset--spacing--50);
	height: 100%;
	transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-group.is-style-card:hover {
	border-color: rgba(255, 121, 24, 0.45);
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(8, 48, 80, 0.08);
}

.wp-block-group.is-style-bordered {
	border-left: 2px solid var(--wp--preset--color--orange);
	padding-left: var(--wp--preset--spacing--40);
}

/* ─────────────────────────────────────────────────────────────
   8. Étiquettes (tags de services)
   ───────────────────────────────────────────────────────────── */

/* Liste sans puces — menu du pied de page. Le style « Aucun » proposé par
   WordPress ne pose pas de règle visuelle de lui-même : sans celle-ci, les
   liens du pied s'affichent avec leurs puces. */
.wp-block-list.is-style-none {
	list-style: none;
	padding-left: 0;
}

.s3-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1.75rem;
	padding: 0;
	list-style: none;
}

.s3-tags li {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--slate);
	border: 1px solid rgba(8, 48, 80, 0.15);
	border-radius: 999px;
	padding: 0.4rem 1rem;
}

/* ─────────────────────────────────────────────────────────────
   9. Timeline du parcours
   ───────────────────────────────────────────────────────────── */

.s3-timeline {
	position: relative;
	padding-left: 2.25rem;
}

.s3-timeline::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 0.5rem;
	bottom: 0.5rem;
	width: 1px;
	background: rgba(8, 48, 80, 0.15);
}

.s3-timeline__item {
	position: relative;
	padding-bottom: var(--wp--preset--spacing--50);
}

.s3-timeline__item:last-child {
	padding-bottom: 0;
}

.s3-timeline__item::before {
	content: "";
	position: absolute;
	left: -2.25rem;
	top: 0.55rem;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--orange);
}

.s3-timeline__period {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--orange);
	margin-bottom: 0.4rem;
}

/* ─────────────────────────────────────────────────────────────
   10. Bouton contour clair (sur fond navy)
   ───────────────────────────────────────────────────────────── */

.wp-block-button.is-style-outline-light .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--white);
	border: 1px solid rgba(255, 255, 255, 0.5);
}

.wp-block-button.is-style-outline-light .wp-block-button__link:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--white);
}

/* ─────────────────────────────────────────────────────────────
   11. Pied de page
   ───────────────────────────────────────────────────────────── */

.s3-footer {
	background: var(--wp--preset--color--navy);
	color: rgba(255, 255, 255, 0.72);
}

.s3-footer a {
	color: rgba(255, 255, 255, 0.85);
}

.s3-footer a:hover {
	color: var(--wp--preset--color--orange);
}

/* Mention réglementaire : volontairement discrète mais lisible.
   On reste au-dessus de 4.5:1 sur le navy — c'est du texte légal,
   il doit pouvoir être lu, pas seulement être présent.

   Elle occupe toute la largeur du pied de page, à la demande du client.
   La longueur de ligne qui en résulte (environ 120 caractères) dépasse ce
   qu'on recommande pour un texte suivi ; c'est acceptable ici parce que ce
   paragraphe se parcourt, il ne se lit pas de bout en bout. L'interligne
   est relevé à 1.75 pour que l'œil retrouve le début de la ligne suivante. */
.s3-disclaimer {
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.62);
}

/* ─────────────────────────────────────────────────────────────
   12. Responsive — bascule principale à 900 px (brief, slide 10)
   ───────────────────────────────────────────────────────────── */

@media (max-width: 900px) {

	/* La bannière garde toute la largeur mais gagne en hauteur relative,
	   sinon elle devient une bande illisible sur téléphone. */
	.s3-banner {
		aspect-ratio: 3 / 1;
		min-height: 160px;
	}

	/* Sur deux ou trois lignes, le menu remonterait dans la partie sombre
	   du dégradé. Il sort donc de la bannière et se pose sur fond clair,
	   où le bleu profond donne 13,6:1. */
	.s3-banner-nav {
		position: static;
		background: var(--wp--preset--color--paper);
		border-bottom: 1px solid var(--wp--preset--color--fog);
		padding: 0.85rem var(--wp--preset--spacing--30);
	}

	.s3-banner-nav .wp-block-navigation {
		gap: 0.75rem 1.25rem;
		justify-content: center;
	}

	.s3-logo-center {
		padding: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--30);
	}

	.s3-logo-center img,
	.s3-logo-center svg {
		width: 220px;
	}

	/* Le filigrane du hero est masqué sur petit écran (brief). */
	.s3-watermark {
		display: none;
	}

	.s3-timeline {
		padding-left: 1.75rem;
	}

	.s3-timeline__item::before {
		left: -1.75rem;
	}
}

/* ─────────────────────────────────────────────────────────────
   13. Filigrane du hero
   ───────────────────────────────────────────────────────────── */

.s3-watermark {
	position: absolute;
	right: -2%;
	bottom: -10%;
	width: 46%;
	max-width: 620px;
	opacity: 0.05;
	pointer-events: none;
	user-select: none;
}

/* ─────────────────────────────────────────────────────────────
   14. Accessibilité
   ───────────────────────────────────────────────────────────── */

.s3-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.s3-skip-link:focus {
	left: 0;
}

@media (prefers-reduced-motion: reduce) {

	/* Pas de raccourcissement ici : le triangle doit etre simplement la,
	   sans arrivee. */
	.s3-logo-anim #s3-mark {
		animation: none;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}