/*
Theme Name: 6clicks
Theme URI: https://www.6clicks.ch
Author: 6clicks
Author URI: https://www.6clicks.ch
Description: Thème de base FSE pour les sites 6clicks.ch. CSS natif, sans build.
Version: 1.11.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 6clicks
Tags: full-site-editing, block-patterns, wide-blocks, accessibility-ready, translation-ready
*/

/*
L'essentiel de la mise en forme vit dans theme.json.
Ce fichier ne contient que ce qui ne s'exprime pas en presets :
composants maison, icônes, et quelques ajustements de blocs.
*/

/* ---------------------------------------------------------------- Icônes */

.icon {
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: var(--icon-size, 3rem);
	height: var(--icon-size, 3rem);
	flex: none;
}

.icon--depannage {
	background-image: url("assets/icons/depannage.svg");
}
.icon--design {
	background-image: url("assets/icons/design.svg");
}
.icon--formation {
	background-image: url("assets/icons/formation.svg");
}
.icon--formation-p {
	background-image: url("assets/icons/formation-p.svg");
}
.icon--john {
	background-image: url("assets/icons/john.svg");
}
.icon--linkedin {
	background-image: url("assets/icons/linkedin.svg");
}
.icon--realisations {
	background-image: url("assets/icons/realisations.svg");
}
.icon--refind {
	background-image: url("assets/icons/refind.svg");
}
.icon--sixclicks {
	background-image: url("assets/icons/sixclicksborder.svg");
}
.icon--wordpress {
	background-image: url("assets/icons/wordpress.svg");
}
.icon--wp2 {
	background-image: url("assets/icons/wp2.svg");
}
.icon--wp2border {
	background-image: url("assets/icons/wp2border.svg");
}
.icon--wplogo {
	background-image: url("assets/icons/wplogo.svg");
}

.icon--sm {
	--icon-size: 1.5rem;
}
.icon--lg {
	--icon-size: 6rem;
}

/* Variante colorable : l'icône prend la couleur du texte courant.
   Réservée aux SVG monochromes. */
.icon--mask {
	background-image: none;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.icon--mask.icon--linkedin {
	mask-image: url("assets/icons/linkedin.svg");
	-webkit-mask-image: url("assets/icons/linkedin.svg");
}
.icon--mask.icon--wordpress {
	mask-image: url("assets/icons/wordpress.svg");
	-webkit-mask-image: url("assets/icons/wordpress.svg");
}

/* ---------------------------------------------------------------- En-tête */

.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background-color: var(--wp--preset--color--snow);
}

.site-header .wp-block-site-title a {
	text-decoration: none;
}

/* ------------------------------------------------------------- Accessibilité */

:where(
	a:focus-visible,
	button:focus-visible,
	input:focus-visible,
	.wp-element-button:focus-visible
) {
	outline: 2px solid var(--wp--preset--color--violet);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------- Contenu */

.post-entry + .post-entry {
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--50);
	border-block-start: 1px solid var(--wp--preset--color--muted);
}

.wp-block-post-featured-image img {
	border-radius: 4px;
}

/* ------------------------------------------------------------------- Liens

   Soulignement réservé aux liens du contenu (articles, pages) : ceux de
   l'en-tête et du pied de page restent nus. La classe .lien-deco permet de
   l'ajouter ailleurs au cas par cas.

   Le soulignement natif ne peut pas être animé : on le remplace par un
   ::before positionné sous le texte, qui remonte de 2px au survol.

   Un lien qui enveloppe une image n'est pas du texte : il garde son trait nu,
   d'où l'exclusion des liens contenant un média. */

.wp-block-post-content
	a:where(:not(.wp-element-button)):not(:has(img, picture, svg, video)),
a.lien-deco:not(:has(img, picture, svg, video)) {
	position: relative;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.wp-block-post-content
	a:where(:not(.wp-element-button)):not(:has(img, picture, svg, video)):hover,
a.lien-deco:not(:has(img, picture, svg, video)):hover {
	opacity: 0.8;
}

.wp-block-post-content
	a:where(:not(.wp-element-button)):not(:has(img, picture, svg, video))::before,
a.lien-deco:not(:has(img, picture, svg, video))::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 1px;
	background-color: currentColor;
	transition: bottom 0.2s ease;
}

.wp-block-post-content
	a:where(:not(.wp-element-button)):not(:has(img, picture, svg, video)):hover::before,
a.lien-deco:not(:has(img, picture, svg, video)):hover::before {
	bottom: 2px;
}

/* Filet de sécurité pour les blocs média, dont le lien peut envelopper une
   figure plutôt que l'image elle-même. */
.wp-block-post-content
	:where(.wp-block-image, .wp-block-gallery, .wp-block-post-featured-image, .wp-block-media-text, figure)
	a::before {
	content: none;
}

/* Pas de trait sous une image, mais la même réaction au survol que les liens
   de texte : l'image s'éclaircit et monte de 2px.
   inline-block, sans quoi translate resterait sans effet sur un lien en ligne. */
.wp-block-post-content a:has(img, picture, svg, video),
.wp-block-post-content
	:where(.wp-block-image, .wp-block-gallery, .wp-block-post-featured-image, .wp-block-media-text, figure)
	a {
	display: inline-block;
	transition:
		opacity 0.2s ease,
		translate 0.2s ease;
}

.wp-block-post-content a:has(img, picture, svg, video):hover,
.wp-block-post-content
	:where(.wp-block-image, .wp-block-gallery, .wp-block-post-featured-image, .wp-block-media-text, figure)
	a:hover {
	opacity: 0.8;
	translate: 0 -2px;
}

/* ------------------------------------------------------------ Icônes liées */

.social-list .sixclicks-icon a,
.social-list .sixclicks-icon {
	transition:
		opacity 0.2s ease,
		transform 0.2s ease;
}

.social-list .sixclicks-icon:hover {
	opacity: 0.65;
	transform: translateY(-2px);
}

/* --------------------------------------------- Liste d'icônes + infobulle */

.icon-list__item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* L'infobulle reste dans le flux pour les lecteurs d'écran et le mode
   sans survol : elle n'est masquée que visuellement. */
.icon-list__tip {
	position: absolute;
	bottom: calc(100% + 0.5rem);
	left: 50%;
	translate: -50% 0;
	margin: 0;
	padding: 0.25rem 0.6rem;
	border-radius: 4px;
	white-space: nowrap;
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--snow);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.icon-list__item:hover .icon-list__tip,
.icon-list__item:focus-within .icon-list__tip {
	opacity: 1;
}

@media (hover: none) {
	/* Sans survol possible, l'infobulle est affichée en permanence. */
	.icon-list__tip {
		position: static;
		translate: none;
		opacity: 1;
		background: none;
		color: inherit;
		padding: 0;
	}
}

/* --------------------------------------------------- Bande de logos

   Remplace le carrousel slick : défilement natif au doigt et à la molette,
   avec accrochage. Aucun JavaScript. */

.logo-strip {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	padding-block-end: var(--wp--preset--spacing--20);
}

.logo-strip > * {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.logo-strip img {
	height: 4rem;
	width: auto;
	object-fit: contain;
}

/* ------------------------------------------------------- Bouton hamburger

   Le bloc Navigation dessine ses barres avec des <path> remplis, pas des
   traits : stroke-width n'a aucun effet et le tracé n'est pas modifiable en
   CSS. On masque donc le SVG natif et on redessine les trois barres, ce qui
   les rend librement réglables.

   Le bouton garde son aria-label et son comportement, on ne touche qu'au
   visuel. */

.wp-block-navigation__responsive-container-open {
	--burger-width: 28px;
	--burger-thickness: 4px;
	--burger-gap: 5px;

	display: grid;
	place-items: center;
	width: var(--burger-width);
	height: calc(var(--burger-thickness) * 3 + var(--burger-gap) * 2);
}

.wp-block-navigation__responsive-container-open svg {
	display: none;
}

.wp-block-navigation__responsive-container-open::before {
	content: "";
	width: var(--burger-width);
	height: var(--burger-thickness);
	border-radius: calc(var(--burger-thickness) / 2);
	background-color: currentColor;
	box-shadow:
		0 calc(-1 * (var(--burger-thickness) + var(--burger-gap))) 0 currentColor,
		0 calc(var(--burger-thickness) + var(--burger-gap)) 0 currentColor;
}

/*.modal du menu fullpage */
#modal-1{

	a{
		font-family: var(--wp--preset--font-family--zilla-slab);
	}


}

/* ------------------------------------ Pleine largeur dans un template part

   Avec useRootPaddingAwareAlignments, la gouttière est posée sur le <body> et
   le core ne la compense que pour « .has-global-padding > .alignfull ».

   Or un template part est toujours enveloppé par WordPress dans un élément
   portant la seule classe « wp-block-template-part » : un bloc pleine largeur
   placé à la racine d'un part n'a donc aucun parent qui porte la classe
   attendue, et reste prisonnier de la gouttière.

   On lui applique la même compensation que le core, mais seulement quand le
   part porte réellement la gouttière : sinon la marge négative fait déborder
   le bloc de la fenêtre et ouvre un défilement horizontal. */

.wp-block-template-part.has-global-padding > .alignfull {
	margin-right: calc(var(--wp--style--root--padding-right) * -1);
	margin-left: calc(var(--wp--style--root--padding-left) * -1);
}

/* ------------------------------------------------ Groupe vertical (.sidegroup)

   Texte tourné pour être lu de bas en haut, façon tranche de livre.

   On passe par writing-mode plutôt que par une rotation : une rotation ne
   change pas la boîte de mise en page, l'élément continue d'occuper la place
   de son texte à l'horizontale. Il faut alors le sortir du flux et le
   repositionner à la main, avec des valeurs en pixels qui cassent au moindre
   changement de texte ou de largeur d'écran.

   writing-mode rend la boîte réellement verticale : elle prend la largeur
   d'une ligne et la hauteur du texte. L'élément s'intègre donc normalement
   dans une colonne, une grille ou un flex, sans coordonnées en dur.

   L'ordre du DOM est inchangé : le texte reste lu normalement par les
   lecteurs d'écran et reste sélectionnable. */

.sidegroup {
	writing-mode: vertical-rl;
	rotate: 180deg;
	white-space: nowrap;
	margin-inline: 0;
	padding-inline: 0;
	left: 10px;
  position: relative;


}

.sidegroup ul {
  padding: 5px;
  gap: 0;
  rotate: 180°;
  rotate: 180deg;
}

/* Variante épinglée sur le bord gauche du conteneur.
   Le parent doit être en position: relative. */
.sidegroup.is-pinned {
	position: absolute;
	top: var(--sidegroup-top, 0);
	left: var(--sidegroup-left, 0);
	z-index: 1;
}


.wp-block-post-featured-image a::before{
content: none;}

/* ----------------------------------------------- En-tête du site

   Logos et menu plein écran : ils vivent dans le template part « header »,
   partagé par toutes les pages, et dans l'en-tête d'accueil. */

/* Même disposition que sur l'accueil : les logos s'empilent au centre et le
   bloc reste transparent, l'en-tête de page passant dessous. */
.site-header {
	box-sizing: border-box;
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100vw;
	background: transparent;
	padding-block-start: 5px;
}

/* Connecté, la barre d'outils est fixée en haut : sans ça elle recouvrirait
   le menu, l'en-tête étant sorti du flux. */
.admin-bar .site-header {
	inset-block-start: 46px;
}

@media (min-width: 783px) {
	.admin-bar .site-header {
		inset-block-start: 32px;
	}
}

.nav-header-burger {
	padding: 5px;
}

.nav-header-burger button svg {
	width: 60px;
	height: 45px;
}

/* Les tailles réglées sur le bloc valent pour le grand écran ; sur mobile,
   les logos rétrécissent pour laisser la place au menu. */
.sixclicks-icon.sixclicks-header > svg,
.sixclicks-icon.sixclicks-header > a > svg {
	width: 46px;
	height: 53px;
}

.sixclicks-icon.wp2-header > svg,
.sixclicks-icon.wp2-header > a > svg {
	width: 36px;
	height: auto;
}

@media (min-width: 782px) {
	.sixclicks-icon.sixclicks-header > svg,
.sixclicks-icon.sixclicks-header > a > svg {
		width: 150px;
		height: auto;
	}

	.sixclicks-icon.wp2-header > svg,
.sixclicks-icon.wp2-header > a > svg {
		width: 56px;
	}
}