/* =========================================================================
   Style « sobre » — blanc dominant, noir en ponctuation

   Le site s'inverse : le blanc devient le fond par défaut, et le noir ne
   sert plus qu'aux moments qui doivent trancher, le bandeau d'accueil, les
   bandes d'appel à l'action et le pied de page. C'est la respiration d'un
   site de produit : on lit sur du blanc, on regarde sur du noir.

   Deux autres partis pris. La colonne de texte s'élargit, parce qu'elle
   était presque deux fois plus étroite que les grilles d'à côté et que la
   page paraissait pincée. Et les titres quittent la police condensée en
   capitales pour une graisse haute en casse normale.

   Rien n'est remplacé dans le thème : cette couche se pose par-dessus et se
   retire en supprimant l'option rayan_studio_style.
   ========================================================================= */

body.rayan-sobre {
	/* Trois fonds, pas quatre. Le bleu du thème et le noir bleuté ont disparu.
	   Restent le blanc, le noir, et un blanc à peine teinté qui sert à séparer
	   deux sections claires qui se suivent : sans lui, quatre sections
	   blanches d'affilée se lisent comme une seule page sans articulation. */
	--sobre-blanc: #ffffff;
	--sobre-papier: #efeff2;
	--sobre-noir: #000000;

	--sobre-texte: #1d1d1f;
	/* Fonce juste ce qu'il faut : sur le blanc, #6e6e73 passait le seuil de
	   contraste ; sur le fond teinte il tombait a 4,42 pour 4,5 exiges. */
	--sobre-discret: #68686d;
	--sobre-filet: rgba(0, 0, 0, 0.14);
	--sobre-filet-fort: rgba(0, 0, 0, 0.28);
	--sobre-accent: #b8340d;

	--sobre-nuit-texte: #f5f5f7;
	--sobre-nuit-discret: #a2abb2;
	--sobre-nuit-filet: rgba(255, 255, 255, 0.18);
	--sobre-nuit-accent: #ff8b6b;

	--sobre-rayon: 18px;
	--sobre-rayon-petit: 12px;
	--sobre-courbe: cubic-bezier(0.32, 0.72, 0, 1);

	/* La colonne de texte était à 44rem quand les grilles allaient à 80 :
	   l'écart se voyait à chaque changement de bloc. */
	--wp--style--global--content-size: 56rem;
	--wp--style--global--wide-size: 74rem;

	background: var(--sobre-blanc);
	color: var(--sobre-texte);
	-webkit-font-smoothing: antialiased;
}

/* ---- 1. Le jour par défaut ---------------------------------------------- */

body.rayan-sobre .wp-site-blocks,
body.rayan-sobre main {
	background-color: var(--sobre-blanc);
}

/* Les fonds nommés du thème, encre et acier, sont neutralisés : c'est
   l'alternance des sections qui décide de la couleur, pas la classe. */
body.rayan-sobre .has-encre-background-color,
body.rayan-sobre .has-acier-background-color,
body.rayan-sobre .is-style-section-claire {
	background-color: transparent !important;
}

body.rayan-sobre p,
body.rayan-sobre li,
body.rayan-sobre .has-craie-color {
	color: var(--sobre-texte);
}

body.rayan-sobre .has-brume-color,
body.rayan-sobre p[style*="uppercase"],
body.rayan-sobre .has-flamme-color {
	color: var(--sobre-discret) !important;
}

/* ---- 2. Les titres ------------------------------------------------------
   Anton en capitales donne un air d'affiche. Manrope en graisse haute,
   casse normale et approche resserrée donne un air de document. */

body.rayan-sobre h1,
body.rayan-sobre h2,
body.rayan-sobre h3,
body.rayan-sobre h4,
body.rayan-sobre .wp-block-site-title a,
body.rayan-sobre .has-anton-font-family {
	font-family: var(--wp--preset--font-family--manrope) !important;
	font-weight: 800;
	text-transform: none;
	letter-spacing: -0.028em;
	color: var(--sobre-texte);
}

body.rayan-sobre h1 {
	font-size: clamp(2.5rem, 5vw, 4.2rem);
	line-height: 1.06;
	letter-spacing: -0.035em;
}

body.rayan-sobre h2 {
	font-size: clamp(1.85rem, 3.2vw, 2.75rem);
	line-height: 1.12;
	letter-spacing: -0.032em;
	margin-bottom: 0.6em;
}

body.rayan-sobre h3 {
	font-size: clamp(1.2rem, 1.9vw, 1.5rem);
	line-height: 1.24;
}

body.rayan-sobre .has-anton-font-family {
	letter-spacing: -0.03em;
}

body.rayan-sobre .wp-block-site-title a {
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

body.rayan-sobre p[style*="uppercase"] {
	letter-spacing: 0.08em !important;
	font-size: 0.8rem !important;
	font-weight: 600;
}

body.rayan-sobre {
	font-size: 1.0625rem;
	line-height: 1.62;
}

/* Deux rythmes, selon ce qu'on regarde.

   Les sections pleine largeur se touchent : leur limite est le changement de
   fond, pas un vide. Un vide entre deux bandes teintées les ferait lire comme
   des cartes posées sur la page, pas comme des bandes.

   Les blocs qui ne sont pas des bandes, dans les fiches par exemple, gardent
   au contraire de la marge : là il n'y a pas de fond pour les séparer. */
body.rayan-sobre .entry-content > :is(.wp-block-group, .wp-block-cover).alignfull:not(.wp-block-cover),
body.rayan-sobre main > .wp-block-group.alignfull {
	margin-block: 0;
	padding-block: clamp(4.5rem, 9vw, 8rem);
}

body.rayan-sobre main > .wp-block-group:not(.alignfull),
body.rayan-sobre .entry-content > .wp-block-group:not(.alignfull) {
	margin-block: clamp(4.5rem, 9vw, 8rem);
}

/* Les sections noires respirent davantage encore : c'est ce qui les fait
   lire comme un moment, et pas comme une bande de couleur. */
body.rayan-sobre :is(.rayan-nuit, .is-style-section-acier) {
	padding-block: clamp(5rem, 10vw, 9rem) !important;
	margin-block: 0 !important;
}

/* Un surtitre appelle son titre : on les rapproche et on éloigne le reste. */
body.rayan-sobre p[style*="uppercase"] {
	margin-bottom: 0.9rem !important;
}

body.rayan-sobre h2 + p,
body.rayan-sobre h3 + p {
	margin-top: 0.35em;
}

/* ---- 3. Les liens ------------------------------------------------------- */

body.rayan-sobre a:where(:not(.wp-block-button__link, .wp-element-button, .est-actif)) {
	color: var(--sobre-texte);
	text-decoration-color: var(--sobre-filet-fort);
	text-underline-offset: 0.25em;
	text-decoration-thickness: 1px;
	transition: color 0.25s var(--sobre-courbe),
		text-decoration-color 0.25s var(--sobre-courbe);
}

body.rayan-sobre a:where(:not(.wp-block-button__link, .wp-element-button, .est-actif)):hover {
	color: var(--sobre-accent);
	text-decoration-color: var(--sobre-accent);
}

/* ---- 4. Les deux autres fonds -----------------------------------------
   Le noir ne tombe pas au hasard : le plugin le réserve au bandeau qui ouvre
   et à la bande qui ferme quand elle appelle à réserver. Le pied de page est
   noir par nature. Tout ce que ces sections contiennent s'inverse ici, en une
   seule fois.

   Le blanc teinté, lui, ne fait qu'une chose : empêcher deux sections claires
   voisines d'avoir le même fond. */

/* Le bandeau d'accueil est exclu : c'est un bloc de couverture, il a sa
   photo et son propre voile. Un aplat opaque sur le conteneur recouvrait la
   photo et l'accueil s'ouvrait sur un rectangle noir. */
body.rayan-sobre :is(.rayan-nuit, .is-style-section-acier):not(.rayan-hero-video):not(.rayan-banniere),
body.rayan-sobre footer.wp-block-template-part,
body.rayan-sobre footer.wp-block-template-part > .wp-block-group {
	background-color: var(--sobre-noir) !important;
	color: var(--sobre-nuit-texte);
}

body.rayan-sobre :is(.rayan-hero-video, .rayan-banniere) {
	color: var(--sobre-nuit-texte);
}

/* Le voile du bandeau reprend sa couleur : c'est lui qui assombrit la photo
   pour que le titre blanc se lise, et c'est lui que le defilement fait
   monter. Sans couleur, il ne voilait plus rien. */
/* Le bandeau d'accueil garde son voile plat, comme avant : c'est la demande.
   Il reste donc le seul dont le voile ne suit pas la photo, et son surtitre
   descend a 2,6 de contraste sur les zones les plus claires. */
body.rayan-sobre .rayan-hero-video .wp-block-cover__background {
	background-color: var(--sobre-noir) !important;
}

body.rayan-sobre .rayan-teinte {
	background-color: var(--sobre-papier) !important;
}

/* Sur le fond teinté, une carte au filet seul disparaîtrait à moitié : elle
   passe au blanc, et c'est elle qui ressort au lieu de son contour. */
body.rayan-sobre .rayan-teinte :is(.has-border-color, .wp-block-column.has-border-color) {
	background: var(--sobre-blanc);
}

body.rayan-sobre :is(.rayan-nuit, .is-style-section-acier) :is(p, li, h1, h2, h3, h4, strong, .has-craie-color),
body.rayan-sobre :is(.rayan-hero-video, .rayan-banniere) :is(p, li, h1, h2, h3, h4, strong, .has-craie-color),
body.rayan-sobre footer.wp-block-template-part :is(p, li, h1, h2, h3, h4, strong, .has-craie-color) {
	color: var(--sobre-nuit-texte);
}

body.rayan-sobre :is(.rayan-nuit, .is-style-section-acier) :is(.has-brume-color, .has-flamme-color, p[style*="uppercase"]),
body.rayan-sobre :is(.rayan-hero-video, .rayan-banniere) :is(.has-brume-color, .has-flamme-color, p[style*="uppercase"]),
body.rayan-sobre footer.wp-block-template-part :is(.has-brume-color, .has-flamme-color, p[style*="uppercase"]) {
	color: var(--sobre-nuit-discret) !important;
}

body.rayan-sobre :is(.rayan-nuit, .is-style-section-acier) a:where(:not(.wp-block-button__link, .wp-element-button, .est-actif)),
body.rayan-sobre :is(.rayan-hero-video, .rayan-banniere) a:where(:not(.wp-block-button__link, .wp-element-button, .est-actif)),
body.rayan-sobre footer.wp-block-template-part a:where(:not(.wp-block-button__link, .wp-element-button, .est-actif)) {
	color: var(--sobre-nuit-texte);
	text-decoration-color: var(--sobre-nuit-filet);
}

body.rayan-sobre :is(.rayan-nuit, .is-style-section-acier) a:where(:not(.wp-block-button__link, .est-actif)):hover,
body.rayan-sobre :is(.rayan-hero-video, .rayan-banniere) a:where(:not(.wp-block-button__link, .est-actif)):hover,
body.rayan-sobre footer.wp-block-template-part a:where(:not(.wp-block-button__link, .est-actif)):hover {
	color: var(--sobre-nuit-accent);
	text-decoration-color: var(--sobre-nuit-accent);
}

/* ---- 5. Les encadrés sur fond noir -------------------------------------
   Ils se dessinent au filet clair, sans aplat : sur une bande noire un
   aplat gris ajouterait une quatrième valeur pour rien. */

body.rayan-sobre :is(.rayan-nuit, .is-style-section-acier) :is(.has-border-color, .wp-block-column.has-border-color),
body.rayan-sobre :is(.rayan-nuit, .is-style-section-acier) .rayan-agenda {
	background: transparent !important;
	border-color: var(--sobre-nuit-filet) !important;
}

body.rayan-sobre :is(.rayan-nuit, .is-style-section-acier) .rayan-situation {
	border-top-color: var(--sobre-nuit-filet) !important;
}

body.rayan-sobre :is(.rayan-nuit, .is-style-section-acier) .rayan-situation:hover {
	background-color: rgba(255, 255, 255, 0.05);
}

/* ---- 6. L'en-tête ------------------------------------------------------
   Blanc dépoli. Sur l'accueil seulement, il reste transparent tant qu'on
   est sur le bandeau sombre, et son texte y passe en clair. */

body.rayan-sobre .rayan-header {
	background-color: rgba(255, 255, 255, 0.72) !important;
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 0;
	transition: background-color 0.4s var(--sobre-courbe),
		box-shadow 0.4s var(--sobre-courbe);
	z-index: 40;
}

/* Le filet sous l'en-tete a disparu : au repos il tracait une ligne entre
   deux surfaces que leur couleur separait deja, et sur le bandeau photo il
   se lisait comme une rayure.
   Une ombre tres douce le remplace, et seulement une fois qu'on defile :
   la ou l'en-tete passe reellement au-dessus du contenu, il faut bien qu'il
   s'en detache. Une ombre le fait sans dessiner de trait. */
body.rayan-sobre .rayan-header.est-defile {
	box-shadow: 0 1px 24px -14px rgba(0, 0, 0, 0.45);
}

body.rayan-sobre .rayan-header .wp-block-site-title a {
	color: var(--sobre-texte);
	text-decoration: none;
}

body.rayan-sobre .rayan-header .wp-block-navigation a {
	color: var(--sobre-discret);
	text-decoration: none;
	transition: color 0.25s var(--sobre-courbe);
}

body.rayan-sobre .rayan-header .wp-block-navigation a:hover {
	color: var(--sobre-texte);
}

/* L'en-tête n'est pas superposé au bandeau : il occupe sa propre bande.
   Le rendre transparent le poserait donc sur le blanc du corps, et son
   texte clair y disparaîtrait. Il reste dépoli partout.

   Le logo est un dessin clair : sur fond blanc il doit s'inverser. */
body.rayan-sobre .rayan-header .wp-block-site-logo img {
	filter: invert(1);
	transition: filter 0.3s var(--sobre-courbe);
}

/* ---- 7. Les boutons ----------------------------------------------------- */

body.rayan-sobre .wp-block-button__link {
	border-radius: 980px;
	padding: 0.72rem 1.45rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	background-color: var(--sobre-texte);
	color: var(--sobre-blanc);
	border: 0;
	transition: transform 0.22s var(--sobre-courbe), opacity 0.22s var(--sobre-courbe);
}

body.rayan-sobre .wp-block-button__link:hover {
	transform: translateY(-1px);
	opacity: 0.88;
}

body.rayan-sobre .wp-block-button__link:active {
	transform: translateY(0) scale(0.985);
}

/* Sur les bandes sombres, le bouton s'inverse à son tour. */
body.rayan-sobre :is(.rayan-nuit, .is-style-section-acier) .wp-block-button__link,
body.rayan-sobre footer.wp-block-template-part .wp-block-button__link,
body.rayan-sobre :is(.rayan-hero-video, .rayan-banniere) .wp-block-button__link {
	background-color: var(--sobre-nuit-texte);
	color: var(--sobre-noir);
}

body.rayan-sobre .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--sobre-texte);
	border: 1px solid var(--sobre-filet-fort);
}

body.rayan-sobre :is(.rayan-hero-video, .rayan-banniere) .wp-block-button.is-style-outline .wp-block-button__link,
body.rayan-sobre :is(.rayan-nuit, .is-style-section-acier) .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--sobre-nuit-texte);
	border-color: var(--sobre-nuit-filet);
}

/* ---- 8. Les surfaces et les cartes -------------------------------------- */

body.rayan-sobre .has-border-color,
body.rayan-sobre .wp-block-column.has-border-color {
	border-color: var(--sobre-filet) !important;
	border-radius: var(--sobre-rayon) !important;
	background: transparent;
	transition: border-color 0.3s var(--sobre-courbe), transform 0.3s var(--sobre-courbe),
		box-shadow 0.3s var(--sobre-courbe);
}

body.rayan-sobre .wp-block-column.has-border-color:hover {
	border-color: var(--sobre-filet-fort) !important;
	transform: translateY(-2px);
	box-shadow: 0 12px 32px -18px rgba(29, 29, 31, 0.4);
}

body.rayan-sobre .rayan-situation {
	border-top-color: var(--sobre-filet) !important;
	padding-inline: 0.75rem;
	border-radius: var(--sobre-rayon-petit);
	transition: background-color 0.3s var(--sobre-courbe);
}

body.rayan-sobre .rayan-situation:hover {
	background-color: rgba(29, 29, 31, 0.04);
}

/* ---- 9. Les images ------------------------------------------------------ */

body.rayan-sobre .wp-block-post-featured-image img,
body.rayan-sobre .wp-block-embed iframe,
body.rayan-sobre .rayan-facade,
body.rayan-sobre .rayan-agenda__cadre {
	border-radius: var(--sobre-rayon);
}

body.rayan-sobre .wp-block-gallery figure.wp-block-image {
	overflow: hidden;
	border-radius: var(--sobre-rayon-petit);
}

body.rayan-sobre .wp-block-gallery figure.wp-block-image img,
body.rayan-sobre .rayan-carte-projet img {
	transition: transform 0.6s var(--sobre-courbe);
}

body.rayan-sobre .wp-block-gallery figure.wp-block-image:hover img,
body.rayan-sobre .rayan-carte-projet:hover img {
	transform: scale(1.035);
}

body.rayan-sobre .rayan-carte-projet .wp-block-post-featured-image {
	overflow: hidden;
	border-radius: var(--sobre-rayon);
}

body.rayan-sobre .rayan-carte-projet:hover .wp-block-post-title a {
	color: var(--sobre-accent);
}

body.rayan-sobre .rayan-facade__play {
	transition: transform 0.35s var(--sobre-courbe);
}

body.rayan-sobre .rayan-facade:hover .rayan-facade__play {
	transform: translate(-50%, -50%) scale(1.08);
}

/* ---- 10. Le panneau de l'agenda ----------------------------------------- */

body.rayan-sobre .rayan-agenda {
	border-color: var(--sobre-filet) !important;
	border-radius: var(--sobre-rayon);
	background: transparent;
}

body.rayan-sobre .rayan-agenda__titre {
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 800;
	text-transform: none;
	letter-spacing: -0.028em;
	color: var(--sobre-texte);
}

body.rayan-sobre .rayan-agenda__creneaux,
body.rayan-sobre .rayan-agenda__note {
	color: var(--sobre-discret);
}

body.rayan-sobre .rayan-agenda__bouton {
	border-radius: 980px;
	padding: 0.8rem 1.5rem;
	background: var(--sobre-texte);
	color: var(--sobre-blanc);
	transition: transform 0.22s var(--sobre-courbe), opacity 0.22s var(--sobre-courbe);
}

body.rayan-sobre .rayan-agenda__bouton:hover {
	transform: translateY(-1px);
	opacity: 0.88;
	background: var(--sobre-texte);
}

/* ---- 11. L'apparition au défilement ------------------------------------
   Sans flou : appliqué à des sections entières il force une couche
   graphique de la taille de l'écran et fait ramer le défilement. */

@media (prefers-reduced-motion: no-preference) {
	body.rayan-sobre .rayan-reveal {
		opacity: 0;
		transform: translateY(26px);
		transition: opacity 0.8s var(--sobre-courbe), transform 0.8s var(--sobre-courbe);
	}

	body.rayan-sobre .rayan-reveal.est-visible {
		opacity: 1;
		transform: none;
	}

	body.rayan-sobre .rayan-reveal.est-visible > * {
		animation: sobre-monte 0.75s var(--sobre-courbe) both;
	}

	body.rayan-sobre .rayan-reveal.est-visible > *:nth-child(2) { animation-delay: 0.06s; }
	body.rayan-sobre .rayan-reveal.est-visible > *:nth-child(3) { animation-delay: 0.12s; }
	body.rayan-sobre .rayan-reveal.est-visible > *:nth-child(4) { animation-delay: 0.18s; }
	body.rayan-sobre .rayan-reveal.est-visible > *:nth-child(n + 5) { animation-delay: 0.24s; }

	body.rayan-sobre {
		scroll-behavior: smooth;
	}
}

@keyframes sobre-monte {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

body.rayan-sobre [id] {
	scroll-margin-top: 6rem;
}

/* ---- 12. Le papier garde sa mise en page -------------------------------- */

@media print {
	body.rayan-sobre .rayan-reveal {
		opacity: 1 !important;
		transform: none !important;
	}

	body.rayan-sobre h1,
	body.rayan-sobre h2,
	body.rayan-sobre h3 {
		font-family: var(--wp--preset--font-family--anton) !important;
		text-transform: uppercase;
		letter-spacing: 0.01em;
	}

	/* Sur le papier, aucun aplat : ni les bandes noires, ni la bande teintee,
	   ni l'ombre qui la fait deborder. Une page imprimee est blanche. */
	body.rayan-sobre .is-style-section-acier,
	body.rayan-sobre .rayan-nuit,
	body.rayan-sobre .rayan-teinte,
	body.rayan-sobre :is(.rayan-hero-video, .rayan-banniere),
	body.rayan-sobre footer.wp-block-template-part,
	body.rayan-sobre footer.wp-block-template-part > .wp-block-group {
		background: #ffffff !important;
		box-shadow: none !important;
		clip-path: none !important;
		color: #111111 !important;
	}

	body.rayan-sobre :is(.rayan-nuit, .rayan-teinte, .is-style-section-acier, .rayan-hero-video, .rayan-banniere, footer.wp-block-template-part) :is(p, li, h1, h2, h3, h4, strong, a) {
		color: #111111 !important;
	}

	body.rayan-sobre .entry-content > .wp-block-group:has(> .wp-block-gallery) {
		background: #ffffff !important;
		box-shadow: none !important;
		clip-path: none !important;
	}
}

/* ---- 13. Tout reste centre sur l'axe de la page -----------------------
 * Il y a eu ici une regle qui donnait un bord gauche commun a toutes les
 * sections : le titre, le texte et la grille partaient du meme trait, et la
 * ligne restait courte grace a une marge interieure a droite.
 *
 * Elle est retiree. On ne peut pas avoir en meme temps des lignes courtes,
 * un bord gauche partage avec les grilles, et un bloc centre sur la page :
 * la marge a droite deportait tout le texte vers la gauche et laissait un
 * vide. Des trois, c'est le centrage qui compte.
 *
 * La colonne de lecture et les grilles restent donc centrees chacune sur
 * l'axe de la page, comme le fait le thème. Ce qui reglait vraiment
 * l'impression d'etroitesse n'etait pas cette regle mais la largeur de
 * lecture, passee de 44 a 56 rem plus haut dans ce fichier. */

/* ---- 14. Le bouton de l'agenda sur fond noir -------------------------
 * Le bouton de l'agenda est un vrai <button>, pas un bouton de bloc : la
 * regle d'inversion ne l'atteignait pas et il restait gris sur noir. */

body.rayan-sobre :is(.rayan-nuit, .is-style-section-acier) .rayan-agenda__bouton {
	background-color: var(--sobre-nuit-texte);
	color: var(--sobre-noir);
	border-color: transparent;
}

body.rayan-sobre :is(.rayan-nuit, .is-style-section-acier) .rayan-agenda__bouton:hover,
body.rayan-sobre :is(.rayan-nuit, .is-style-section-acier) .rayan-agenda__bouton:focus-visible {
	background-color: #ffffff;
	color: var(--sobre-noir);
}


/* ---- 15. Pas de trou en bas des galeries, sur telephone -----------------
 * Sous 600 px les grilles passent a deux colonnes. Une galerie au nombre
 * impair d'images laissait alors sa derniere seule, avec un vide a cote.
 * Cette derniere prend toute la largeur : la rangee est pleine, et l'image
 * qui ferme la serie est celle qu'on voit le mieux. */

@media (max-width: 599px) {
	body.rayan-sobre .rayan-galerie > :last-child:nth-child(odd) {
		width: 100%;
	}
}

/* ---- 16. Le focus clavier reste visible sur fond clair ------------------
 * L'anneau de focus du theme est blanc : il etait fait pour un site sombre.
 * Sur le blanc il disparaissait, et le site devenait impraticable au
 * clavier. Il devient noir sur les fonds clairs, et reste blanc sur les
 * bandes noires ou il l'etait deja. */

body.rayan-sobre :is(a, button, input, select, textarea, .wp-element-button):focus-visible {
	outline: 3px solid var(--sobre-noir);
	outline-offset: 3px;
}

body.rayan-sobre
	:is(.rayan-nuit, .is-style-section-acier, .rayan-hero-video, .rayan-banniere, footer.wp-block-template-part)
	:is(a, button, input, select, textarea, .wp-element-button):focus-visible {
	outline-color: var(--sobre-nuit-texte);
}

/* ---- 17. Le pied de page touche la bande qui le precede ----------------
 * Le pied avait une marge haute de 20 px. Entre deux surfaces noires elle
 * dessinait un trait blanc en travers de la page, qui se lisait comme une
 * erreur d'assemblage. */

body.rayan-sobre footer.wp-block-template-part {
	margin-block-start: 0;
}

/* ---- 18. Les fiches aussi ont une bande -------------------------------
 * Une fiche n'est pas decoupee en sections : c'est un article d'un seul
 * tenant, et il restait blanc sur toute sa hauteur. La galerie devient sa
 * bande teintee, entre le texte et « Autres projets ». La fiche se lit
 * alors en trois surfaces : blanc, teinte, noir.
 *
 * Le fond deborde par une ombre portee plutot que par une largeur en vw :
 * une largeur en vw compte la barre de defilement et fabrique un
 * debordement horizontal sur les navigateurs qui la reservent. */

body.rayan-sobre .entry-content > .wp-block-group:has(> .wp-block-gallery) {
	background-color: var(--sobre-papier);
	box-shadow: 0 0 0 100vmax var(--sobre-papier);
	clip-path: inset(0 -100vmax);
	margin-block: clamp(4.5rem, 9vw, 8rem) 0;
	padding-block: clamp(4.5rem, 9vw, 8rem);
}

/* ---- 19. Les bandeaux des pages secondaires ---------------------------
 * L'accueil ouvre sur une image plein ecran. Les autres pages ouvrent sur
 * une bande plus basse : elles ont un travail a faire, pas une impression a
 * donner. On borne quand meme la hauteur pour qu'un ecran court ne reduise
 * pas la photo a un bandeau de titre. */

body.rayan-sobre .rayan-banniere {
	min-height: clamp(22rem, 52vh, 34rem) !important;
}

/* La photo se cadre haut : dans ces quatre images le visage est au-dessus du
   milieu, et un cadrage centre coupait le front. */
body.rayan-sobre .rayan-banniere .wp-block-cover__image-background {
	object-position: 50% 24%;
}

/* Le voile n'est pas uniforme mais glissant, sombre a gauche ou se pose le
   titre, clair a droite ou se tient le sujet. Un voile plat obligeait a
   choisir entre un texte lisible et une photo visible ; celui-ci laisse les
   deux. C'est aussi ce que fait l'exemple donne en reference. */
body.rayan-sobre .rayan-banniere .wp-block-cover__background {
	background-color: transparent !important;
	background-image: linear-gradient(
		100deg,
		rgba(0, 0, 0, 0.88) 0%,
		rgba(0, 0, 0, 0.8) 40%,
		rgba(0, 0, 0, 0.6) 72%,
		rgba(0, 0, 0, 0.24) 100%
	) !important;
	opacity: 1 !important;
}

/* Sur telephone la colonne occupe toute la largeur : le degrade se met a la
   verticale, sinon la fin de chaque ligne passerait sur la partie claire. */
@media (max-width: 781px) {
	body.rayan-sobre .rayan-banniere .wp-block-cover__background {
		background-image: linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.62) 0%,
			rgba(0, 0, 0, 0.78) 60%,
			rgba(0, 0, 0, 0.88) 100%
		) !important;
	}
}

/* Une ombre large et faible sous le texte des bandeaux. Le degrade suffit
   presque partout, mais une photo garde toujours un point tres clair, et
   c'est la que la ligne se perdait. L'ombre ne se voit que la. */
body.rayan-sobre :is(.rayan-banniere, .rayan-hero-video) :is(h1, h2, h3, p) {
	text-shadow: 0 1px 22px rgba(0, 0, 0, 0.55);
}

/* ---- 20. Les bandes d'appel se posent sur une photo -------------------
 * Elles etaient des aplats noirs pleine largeur, et l'aplat noir ne dit
 * rien. Elles portent maintenant une image, comme les bandeaux de tete.
 *
 * Leur texte est centre, pas aligne a gauche : le voile l'est aussi, plus
 * dense au milieu ou se tient le texte, plus leger sur les bords ou la
 * photo a le droit d'exister. */

body.rayan-sobre .rayan-appel .wp-block-cover__background {
	background-image: radial-gradient(
		115% 135% at 50% 50%,
		rgba(0, 0, 0, 0.8) 0%,
		rgba(0, 0, 0, 0.76) 44%,
		rgba(0, 0, 0, 0.69) 100%
	) !important;
}

@media (max-width: 781px) {
	body.rayan-sobre .rayan-appel .wp-block-cover__background {
		background-image: linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.56) 0%,
			rgba(0, 0, 0, 0.7) 50%,
			rgba(0, 0, 0, 0.56) 100%
		) !important;
	}
}

/* Une bande d'appel n'a pas a etre aussi haute qu'un bandeau de tete :
   elle porte trois lignes et un bouton. */
body.rayan-sobre .rayan-appel {
	min-height: clamp(19rem, 40vh, 27rem) !important;
}

/* ---- 21. Le bandeau ne clignote pas en blanc --------------------------
 * Le conteneur d'un bloc Couverture peint son fond au-dessus de sa photo,
 * pas en dessous : c'est pour cette raison qu'un fond noir sur le bandeau
 * masquait l'image, plus tot dans ce fichier. Le laisser transparent reglait
 * l'image mais laissait la page blanche tant que la photo n'etait pas
 * decodee, avec un titre blanc dessus, donc invisible.
 *
 * L'ordre des calques est donc ecrit explicitement : la photo au-dessus du
 * fond, le voile au-dessus de la photo, le texte au-dessus du voile. Le noir
 * du conteneur ne sert plus qu'au dixieme de seconde ou la photo manque. */

body.rayan-sobre :is(.rayan-banniere, .rayan-hero-video) {
	background-color: var(--sobre-noir) !important;
}

body.rayan-sobre :is(.rayan-banniere, .rayan-hero-video) .wp-block-cover__image-background {
	z-index: 0;
}

body.rayan-sobre :is(.rayan-banniere, .rayan-hero-video) .wp-block-cover__background {
	z-index: 1;
}

body.rayan-sobre :is(.rayan-banniere, .rayan-hero-video) .wp-block-cover__inner-container {
	z-index: 2;
}

/* Sur une bande d'appel, le chapeau passe du gris discret au blanc du texte.
   C'est ce qui permet d'alleger le voile : le gain de contraste vient de
   l'encre, pas de l'assombrissement de la photo. */
body.rayan-sobre .rayan-appel :is(p, .has-brume-color) {
	color: var(--sobre-nuit-texte) !important;
}

/* ---- 22. Le filtre des realisations repond tout de suite ---------------
 * Les fiches ecartees sortent de la grille, celle qui reste garde sa place.
 * Le filtre actif se remplit : sans cela, on ne sait plus ce qu'on regarde. */

body.rayan-sobre .rayan-ecarte {
	display: none;
}

body.rayan-sobre :is(.rayan-filtres, .rayan-pilule) a.est-actif {
	background-color: var(--sobre-texte);
	border-color: var(--sobre-texte);
	color: var(--sobre-blanc);
}

/* Le compte n'est la que pour les lecteurs d'ecran. */
body.rayan-sobre .rayan-filtres__compte {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---- 23. La fleche avance quand on survole son lien -------------------
 * Un deplacement de deux pixels, pas davantage : c'est une reponse, pas une
 * animation. La fleche reste dans le texte et se copie avec lui. */

body.rayan-sobre .rayan-fleche {
	display: inline-block;
	transition: transform 0.25s var(--sobre-courbe);
	will-change: transform;
}

body.rayan-sobre a:hover .rayan-fleche,
body.rayan-sobre a:focus-visible .rayan-fleche,
body.rayan-sobre .rayan-carte-projet:hover .rayan-fleche,
body.rayan-sobre .wp-block-post:hover .rayan-fleche {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	body.rayan-sobre .rayan-fleche {
		transition: none;
	}
}

/* ---- 24. Les grilles arrivent une carte apres l'autre -----------------
 * Le decalage vient du rang pose par le script. Sans script, la regle ne
 * s'applique pas : elle est enfermee dans .rayan-reveal, une classe que le
 * theme n'ajoute que lorsque l'apparition est active. */

@media (prefers-reduced-motion: no-preference) {
	body.rayan-sobre
		.rayan-reveal
		:is(.wp-block-columns, .wp-block-post-template, .rayan-galerie)
		> * {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity 0.55s var(--sobre-courbe), transform 0.55s var(--sobre-courbe);
		transition-delay: calc(var(--rang, 0) * 70ms);
	}

	body.rayan-sobre
		.rayan-reveal.est-visible
		:is(.wp-block-columns, .wp-block-post-template, .rayan-galerie)
		> * {
		opacity: 1;
		transform: none;
	}
}

/* ---- 25. La carte entiere est cliquable -------------------------------
 * Le titre etait le seul point d'entree. Il couvre maintenant toute la
 * carte, ce qui donne une cible large au doigt comme a la souris. Les liens
 * de sport et de type restent au-dessus : ils menent ailleurs. */

body.rayan-sobre .wp-block-post-template > li {
	position: relative;
}

body.rayan-sobre .wp-block-post-template > li .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--sobre-rayon);
}

body.rayan-sobre .wp-block-post-template > li .wp-block-post-terms a {
	position: relative;
	z-index: 1;
}

/* ---- 26. Les pastilles de filtre repondent au survol ------------------
 * Elles avaient un contour et rien d'autre : rien ne disait qu'on pouvait
 * cliquer. Le contour se fonce, le fond se pose a peine. */

body.rayan-sobre :is(.rayan-filtres, .rayan-pilule) a {
	transition: background-color 0.22s var(--sobre-courbe),
		border-color 0.22s var(--sobre-courbe), color 0.22s var(--sobre-courbe);
}

body.rayan-sobre :is(.rayan-filtres, .rayan-pilule) a:hover:not(.est-actif) {
	background-color: rgba(29, 29, 31, 0.06);
	border-color: var(--sobre-filet-fort);
}

/* Le contour des pastilles restait au bleu-gris du theme, seule trace de
   l'ancienne palette encore visible sur une page claire. */
body.rayan-sobre :is(.rayan-filtres, .rayan-pilule) a:not(.est-actif) {
	border-color: var(--sobre-filet);
}

/* ---- 27. Le menu montre ou l'on est -----------------------------------
 * La page courante prend un trait sous son entree, et le gris passe au noir.
 * La rubrique courante, quand on est sur une fiche, prend le meme trait en
 * plus discret : on est dans « Realisations » sans y etre exactement. */

body.rayan-sobre .rayan-header .wp-block-navigation a {
	position: relative;
	padding-block: 0.25rem;
}

body.rayan-sobre .rayan-header .wp-block-navigation a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1.5px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.28s var(--sobre-courbe);
}

body.rayan-sobre .rayan-header .wp-block-navigation a:hover::after,
body.rayan-sobre .rayan-header .wp-block-navigation a:focus-visible::after {
	transform: scaleX(1);
}

body.rayan-sobre .rayan-header .wp-block-navigation a[aria-current]::after {
	transform: scaleX(1);
}

body.rayan-sobre .rayan-header .wp-block-navigation a[aria-current="page"] {
	color: var(--sobre-texte);
}

body.rayan-sobre .rayan-header .wp-block-navigation a[aria-current="true"]::after {
	opacity: 0.4;
}

@media (prefers-reduced-motion: reduce) {
	body.rayan-sobre .rayan-header .wp-block-navigation a::after {
		transition: none;
	}
}

/* ---- 28. Le retour en tete de fiche -----------------------------------
 * Une fiche se trouve souvent par un moteur de recherche. Sans ce lien, le
 * seul chemin vers le reste du travail passait par le menu. */

body.rayan-sobre .rayan-retour {
	margin-bottom: 1.6rem !important;
}

body.rayan-sobre .rayan-retour a {
	color: var(--sobre-discret);
	text-decoration: none;
}

body.rayan-sobre .rayan-retour a:hover {
	color: var(--sobre-texte);
}

/* ---- 29. Les cartes de tarifs donnent sa place au prix ----------------
 * Surtitre, liste, prix et lien se suivaient au meme rythme : le montant,
 * qui est la raison d'etre de la page, ne ressortait pas. Il descend en bas
 * de carte, derriere un filet, et le lien vient juste apres. Les trois
 * cartes s'alignent alors sur leur prix, quelle que soit la longueur de la
 * liste au-dessus. */

body.rayan-sobre .wp-block-column.has-border-color:has(> .has-x-large-font-size) {
	display: flex;
	flex-direction: column;
	padding: clamp(1.4rem, 2.2vw, 1.9rem) !important;
}

body.rayan-sobre
	.wp-block-column.has-border-color:has(> .has-x-large-font-size)
	> .has-x-large-font-size {
	margin-top: auto;
	padding-top: 1.15rem;
	border-top: 1px solid var(--sobre-filet);
}

body.rayan-sobre
	.wp-block-column.has-border-color:has(> .has-x-large-font-size)
	> :last-child {
	margin-top: 0.7rem;
}

/* ---- 30. Des cibles tactiles a la taille d'un doigt --------------------
 * Au doigt, les liens d'action mesuraient 21 px de haut et les entrees du
 * pied de page 23 px, la ou le minimum tenable est 24 et le confortable 44.
 *
 * Les liens pris dans une phrase ne sont pas touches : les agrandir ferait
 * sauter l'interligne du paragraphe, et la norme les excepte pour cette
 * raison. Seuls sont vises les liens qui sont seuls sur leur ligne : ceux
 * qui portent une fleche, les entrees du pied, le nom du site.
 *
 * inline-block plutot qu'un simple remplissage vertical : sur un element
 * en ligne, le remplissage deborde sur les lignes voisines sans ecarter le
 * texte, et deux cibles finissent par se recouvrir. */

@media (max-width: 781px) {
	body.rayan-sobre a:has(> .rayan-fleche),
	body.rayan-sobre footer.wp-block-template-part p a,
	body.rayan-sobre .rayan-header .wp-block-site-title a,
	body.rayan-sobre .rayan-retour a {
		display: inline-block;
		padding-block: 0.5rem;
	}
}

/* ---- 31. Les dernieres cibles trop petites au doigt --------------------
 * Deux familles avaient echappe au reglage precedent, faute d'etre des
 * liens a fleche ou des entrees de pied de page.
 *
 * Les etiquettes de sport et de type, sur les cartes et en tete de fiche :
 * elles sont seules sur leur ligne, chacune mene a un filtre, et elles
 * mesuraient 21 px.
 *
 * Le bouton d'agrandissement des photos de galerie, pose par WordPress dans
 * le coin de chaque image : 20 px, sur une page dont les photos sont le
 * sujet. */

@media (max-width: 781px) {
	body.rayan-sobre .wp-block-post-terms a {
		display: inline-block;
		padding-block: 0.45rem;
	}

	body.rayan-sobre .wp-block-image .lightbox-trigger {
		min-width: 44px;
		min-height: 44px;
	}
}

/* ---- 32. Rien entre la derniere bande et le pied de page --------------
 * Les gabarits d'archive et de fiche posent un remplissage bas sur le
 * contenu principal. Quand la page se termine par une bande pleine largeur,
 * ce remplissage glisse une lame blanche entre la photo et le pied noir.
 *
 * Les pages ordinaires n'avaient pas le defaut : leur contenu ne porte pas
 * ce remplissage. La regle ne s'applique donc que la ou une bande ferme
 * vraiment la page. */

body.rayan-sobre main:has(> .alignfull:last-child) {
	padding-bottom: 0 !important;
}

/* ---- 33. Le telephone ---------------------------------------------------
 * Vu a 375 px, page par page, le 1er septembre 2026. Quatre defauts.
 *
 * Le menu ne s'ouvrait pas. L'en-tete porte un backdrop-filter, et un
 * backdrop-filter fait de son element le bloc conteneur de tout descendant
 * en position fixed. L'overlay du menu, fixed, restait donc enferme dans les
 * 71 px de l'en-tete ; et son fond « encre » etait neutralise par la regle 1.
 * Il s'ouvrait a 71 px de haut, transparent, ses liens poses sur le logo.
 *
 * Les titres gardaient leur taille de bureau : 54 px sur 335 px de large,
 * six lignes pour le heros, six pour une fiche. Le premier ecran n'etait
 * que du titre.
 *
 * Les bandeaux : une photo panoramique, 2,4 fois plus large que haute, en
 * fond d'un cadre de 375 x 479. Il n'en restait que le tiers central,
 * agrandi trois fois, sous un voile a 0,88. On ne voyait rien.
 *
 * Et trop de texte : la bande d'appel repetait telephone, adresse et SIRET
 * juste au-dessus d'un pied de page qui les porte deja. */

/* Le menu. Tant qu'il est ouvert, l'en-tete perd son depoli et l'overlay
   retrouve l'ecran entier. Blanc, opaque, des entrees grandes et espacees. */
body.rayan-sobre .rayan-header:has(.is-menu-open) {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

body.rayan-sobre .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--sobre-blanc) !important;
	padding: 5.5rem 1.5rem 2rem !important;
}

body.rayan-sobre .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--sobre-texte) !important;
	font-size: 1.75rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	padding: 0.85rem 0;
	text-decoration: none;
}

body.rayan-sobre .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current] {
	color: var(--sobre-discret) !important;
}

body.rayan-sobre .wp-block-navigation__responsive-container-close {
	color: var(--sobre-texte) !important;
	top: 0.9rem;
	right: 1.25rem;
}

@media (max-width: 599px) {
	/* Les titres se replient a la mesure de l'ecran. */
	body.rayan-sobre .has-colossal-font-size {
		font-size: 2.5rem !important;
		line-height: 1.04 !important;
	}

	body.rayan-sobre .has-giant-font-size,
	body.rayan-sobre main h1:not([class*="font-size"]) {
		font-size: 2.05rem !important;
		line-height: 1.08 !important;
	}

	body.rayan-sobre .has-xx-large-font-size {
		font-size: 1.7rem !important;
	}

	body.rayan-sobre :is(.rayan-banniere, .rayan-hero-video, .rayan-appel) p.has-large-font-size {
		font-size: 1.0625rem !important;
		line-height: 1.5 !important;
	}

	/* Les bandeaux : moins hauts, donc moins recadres et moins agrandis ;
	   la photo cadree un peu plus bas ; le voile, plus haut dans ce fichier,
	   la laisse exister. */
	body.rayan-sobre .rayan-banniere {
		min-height: clamp(15rem, 40vh, 21rem) !important;
		padding-top: 2.5rem !important;
		padding-bottom: 2.5rem !important;
	}

	body.rayan-sobre .rayan-banniere .wp-block-cover__image-background {
		object-position: 50% 32%;
	}

	body.rayan-sobre .rayan-appel {
		min-height: 0 !important;
	}

	/* L'en-tete : le bouton prenait 55 % de la largeur. */
	body.rayan-sobre .rayan-header .wp-block-button__link {
		padding: 0.55rem 1rem;
		font-size: 0.875rem;
	}

	/* La bande d'appel ne repete plus le pied de page. */
	body.rayan-sobre .rayan-appel p.has-small-font-size {
		display: none;
	}

	/* Le pied : chaque entree de navigation prenait 44 px, sur deux ecrans. */
	body.rayan-sobre footer.wp-block-template-part p a {
		padding-block: 0.3rem;
	}

	body.rayan-sobre footer.wp-block-template-part .wp-block-columns {
		gap: 1.25rem;
	}
}

/* ---- 34. Sur telephone, la photo et le texte se separent ----------------
 * Mesure faite a 375 px, au pixel le plus clair sous chaque ligne : aucun
 * voile uniforme ne laisse voir la photo tout en tenant 4,5 de contraste
 * sur un texte de 17 px. A 0,92 d'opacite, Contact plafonne encore a 3,5,
 * et la photo n'existe plus. Le voile n'est pas le bon outil ici.
 *
 * Le bandeau se coupe donc en deux : la photo en haut, entiere, a peine
 * teintee ; le texte en dessous, sur du noir. La photo est enfin visible,
 * et le contraste ne depend plus d'elle. Les bandes d'appel font pareil,
 * avec une image plus courte. Le heros d'accueil aussi : sur telephone il
 * n'a pas de video, c'est une photo sous un voile, et son titre mesurait
 * 2,07 de contraste au pire pixel. */
@media (max-width: 599px) {
	body.rayan-sobre :is(.rayan-banniere, .rayan-hero-video) {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		min-height: 0 !important;
		padding: 0 !important;
		background-color: var(--sobre-noir) !important;
	}

	body.rayan-sobre :is(.rayan-banniere, .rayan-hero-video) .wp-block-cover__image-background {
		position: static !important;
		width: 100% !important;
		height: 56vw !important;
		object-fit: cover !important;
		object-position: 50% 30% !important;
	}

	body.rayan-sobre .rayan-appel .wp-block-cover__image-background {
		height: 46vw !important;
	}

	/* Le voile ne couvre plus que la photo, et a peine : un leger fondu
	   vers le noir du texte, pour que la coupure ne soit pas un trait. */
	body.rayan-sobre :is(.rayan-banniere, .rayan-hero-video) .wp-block-cover__background {
		position: absolute !important;
		top: 0;
		left: 0;
		width: 100%;
		height: 56vw;
		bottom: auto;
		background-image: linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.06) 0%,
			rgba(0, 0, 0, 0.12) 70%,
			rgba(0, 0, 0, 0.55) 100%
		) !important;
	}

	body.rayan-sobre .rayan-appel .wp-block-cover__background {
		height: 46vw;
	}

	body.rayan-sobre :is(.rayan-banniere, .rayan-hero-video) .wp-block-cover__inner-container {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 1.4rem 1.25rem 2rem !important;
		box-sizing: border-box !important;
		background-color: var(--sobre-noir);
	}

	body.rayan-sobre :is(.rayan-banniere, .rayan-hero-video) .wp-block-cover__inner-container :is(h1, h2, h3, p) {
		text-shadow: none;
	}

	body.rayan-sobre .rayan-appel .wp-block-cover__inner-container {
		padding-top: 1.75rem !important;
	}
}

/* ---- 35. La bande demo dans la bande photo du telephone -----------------
 * Le script pose une balise <video> muette dans le bandeau d'accueil sous
 * 600 px. Elle prend exactement la place de la photo, 56vw de haut, entre la
 * photo (dessous) et le voile (dessus), et ne se montre qu'une fois en
 * lecture : jusque-la, c'est la photo qu'on voit. */
@media (max-width: 599px) {
	body.rayan-sobre .rayan-hero-video__fond--telephone {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: auto;
		width: 100%;
		height: 56vw;
		overflow: hidden;
		z-index: 0;
		pointer-events: none;
	}

	body.rayan-sobre .rayan-hero-video__fond--telephone video {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 30%;
		opacity: 0;
		transition: opacity 0.8s var(--sobre-courbe);
	}

	body.rayan-sobre .rayan-hero-video__fond--telephone.est-pret video {
		opacity: 1;
	}
}