/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* *********** VALEURS PAR DÉFAUT POUR LES STYLES DES BLOCS *********** */

/*Arrondis - Copier/coller la valeur après les deux points.
 
très petit: .5rem
petit: 1rem
medium: clamp(1rem,1.798vw + 0.562rem,2rem)
grand: clamp(1rem, 4.494vw + -0.096rem, 3.5rem)
très grand: clamp(1rem,8.09vw + -0.972rem,5.5rem)	
*/

/*Espaces pour les colonnes, grilles, marges extérieures / intérieurs... Copier/coller la valeur après les deux points.
 
16 pixels: 1rem
24 pixels: clamp(1rem, 0.899vw + 0.781rem, 1.5rem)
32 pixels: clamp(1rem, 1.798vw + 0.562rem, 2rem) //écart medium / défaut
40 pixels: clamp(1rem, 2.697vw + 0.343rem, 2.5rem)
48 pixels: clamp(1rem, 3.596vw + 0.124rem, 3rem)
56 pixels: clamp(1rem, 4.494vw + -0.096rem, 3.5rem)
64 pixels: clamp(1rem, 5.393vw + -0.315rem, 4rem)
72 pixels: clamp(1rem, 6.292vw + -0.534rem, 4.5rem)
80 pixels: clamp(1rem, 7.191vw + -0.753rem, 5rem)
*/

/*Largeurs maximum (max width) pour les conteneurs, certains blocs de texte... Copier/coller la valeur après les deux points.
 
416 pixels de large: 416px
632 pixels de large: 632px
848 pixels de large: 848px
1064 pixels de large: 1064px
*/


/*Tailles des typos paramétrées dans le menu Personnaliser (pour info).

H1: clamp(2rem, 1.798vw + 1.562rem, 3rem)
H2: clamp(2rem, 1.258vw + 1.693rem, 2.7rem)
H3: clamp(1.2rem, 1.016vw + 0.952rem, 1.765rem)
H4: clamp(1.1rem, 0.765vw + 0.947rem, 1.6rem)
H5: clamp(1.05rem, 0.688vw + 0.912rem, 1.5rem)
*/

/*Tailles de typos supplémentaires.

body-text-l: clamp(1rem,0.475vw + 0.884rem,1.3rem)
body-text-s: 0.95rem
body-text-xs: 0.8rem
*/


/* ********************************** MODIFICATIONS DU THEME ********************************** */

/* Conteneur site global */
.site-wrapper {
	width:100%;
	max-width:1920px;
}

/* Ombre sous en-tête sticky */
.sticky-enabled .main-navigation.is_stuck {
	box-shadow: 2px 1px 10px rgba(0, 0, 0, .05);
}

/*Formattage liens menu dans footer*/
:where(.wp-block-navigation.has-background .wp-block-navigation-item a:not(.wp-element-button)) {
	padding-left:0em;
	padding-right:.5em;
	padding-bottom:0em;
	padding-top:0em;
}

/* Retrait marge bottom et left ul */
.inside-article ul {
	display: flex;
  	flex-direction: column;
	margin-bottom:0;
	margin-left:2rem;
}


/* ********************************** TYPOGRAPHIES ********************************** */


/***Balance / Pretty***/
.balance, h1, h2, h3, h4, h5,
.h1-like, .h2-like, .h3-like, .h4-like, .h5-like {
	text-wrap:balance !important;
}

.pretty {
	text-wrap:pretty;
}

.nobalancepretty {
	text-wrap:stable !important;
}

/*Styles H*/
.style-h3 {
	font-size:clamp(1.2rem, 1.016vw + 0.952rem, 1.765rem);
	line-height:1.2em;
	margin-bottom:.8rem;
}

/*Mise en gras des liens dans le texte*/
.inside-article a:not(.btn-global) {
	font-weight:700;
}

/* ********************************** UTILITAIRES ********************************** */

/* Pas de soulignement */
.no-text-deco, .no-text-deco a {
	text-decoration:none;
}


/* ********************************** MATRICE DE CONTRASTES ********************************** */

/* Base table styles */
.colour-matrix {
	width: 100%;
	border-collapse: collapse;
	text-align: center;
}

/* Table header and cell base styles */
.colour-matrix th,
.colour-matrix td {
	background: var(--bg-colour);
	color: var(--text-colour);
}

/* Colour name styling */
.colour-matrix .colour-name {
	text-transform: capitalize;
}

/* Colour value styling (hex values) */
.colour-matrix .colour-value {
	font-size: .9rem;
}

/* Rating cell styles */
.rating-cell {
	padding: .5rem;
}

/* Rating label styling */
.colour-matrix .rating {
	padding: .5rem 1rem;
	border-radius: 100vw;
	font-weight: 700;
	display: none; /* Hidden by default, shown when checkbox is checked */
}

/* Styles for different ratings */
.colour-matrix .rating-G {
	color: #856404;
	background-color: #fff3cd;
	border-color: #ffeeba;
}

.colour-matrix .rating-AA,
.colour-matrix .rating-AAA {
	color: #155724;
	background-color: #d4edda;
	border-color: #c3e6cb;
}

/* Styles for when no text should be shown */
.colour-matrix .rating-null,
.colour-matrix .rating-cell.not-text {
	background: var(--surface-10);
	color: transparent;
}

/* Colour details shown in cells */
.rating-cell .colours {
	font-size: 1.2rem;
}

.rating-cell .colours span {
	font-weight: 700;
}

/* Checkbox styles - hidden because it's used as a toggle */
#toggleRatings {
	display: none;
}

#toggleRatings,
#toggleRatings:after,
#toggleRatings:before,
#toggleRatings *,
#toggleRatings *:after,
#toggleRatings *:before,
#toggleRatings + .tgl-btn {
	box-sizing: border-box;
}
#toggleRatings::-moz-selection,
#toggleRatings:after::-moz-selection,
#toggleRatings:before::-moz-selection,
#toggleRatings *::-moz-selection,
#toggleRatings *:after::-moz-selection,
#toggleRatings *:before::-moz-selection,
#toggleRatings + .toggle-button::-moz-selection,
#toggleRatings::selection,
#toggleRatings:after::selection,
#toggleRatings:before::selection,
#toggleRatings *::selection,
#toggleRatings *:after::selection,
#toggleRatings *:before::selection,
#toggleRatings + .tgl-btn::selection {
	background: none;
}
#toggleRatings + .toggle-button {
	outline: 0;
	display: block;
	width: 4em;
	height: 2em;
	position: relative;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
#toggleRatings + .toggle-button:after,
#toggleRatings + .toggle-button:before {
	position: relative;
	display: block;
	content: "";
	width: 50%;
	height: 100%;
}
#toggleRatings + .toggle-button:after {
	left: 0;
}
#toggleRatings + .toggle-button:before {
	display: none;
}
#toggleRatings:checked + .toggle-button:after {
	left: 50%;
}

#toggleRatings + .toggle-button {
	background: #f0f0f0;
	border-radius: 2em;
	padding: 2px;
	transition: all 0.4s ease;
}
#toggleRatings + .toggle-button:after {
	border-radius: 50%;
	background: #fff;
	transition: all 0.2s ease;
}
#toggleRatings:checked + .toggle-button {
	background: #9FD6AE;
}



/* Toggle button styles */
.toggle-button {
	margin-top: 12px;
	margin-bottom: 1rem;
}

/* Toggle button text for screen readers */
.toggle-button span {
	display: none;
	visibility: hidden;
}

/* Content before the toggle button */
.toggle-button::before {
	content: "Show Ratings";
}

/* Styles when the checkbox is checked */

#toggleRatings:checked ~ * .rating-cell {
	background: unset;
	color: unset;
}

#toggleRatings:checked ~ * .rating-cell .rating {
	display: inline-block;
}

#toggleRatings:checked ~ * .rating-cell .colours {
	display: none;
}

/* Tooltip styles */
[data-tooltip]{
	position: relative;
	cursor: pointer;
}

[data-tooltip]:before,
[data-tooltip]:after{
	--scale: 0;
	--arrow-size: 8px;
	--tooltip-color: hsla(191, 0%, 95%, 0.9);
    --tooltip-text-color: #222222;
	position: absolute;
	top: -.25rem;
	left: 50%;
	transform: translateX(-50%)  translateY(var(--translate-y, 0)) scale(var(--scale));
	transition: 150ms transform;
	transform-origin: bottom center;
}

[data-tooltip]:before{
	--translate-y: calc(-100% - var(--arrow-size));
	content: attr(data-tooltip);
        color: var(--tooltip-text-color);
	font-size: .8rem;
	line-height: 1;
	padding: .4rem .6rem;
	width: max-content;
	background: var(--tooltip-color);
	border-radius: .3rem;
	text-align: center;
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after{
	--scale: 1;
}

[data-tooltip]:after{
	--translate-y: calc(-1 * var(--arrow-size));
	content:'';
	border: var(--arrow-size) solid transparent;
	border-top-color: var(--tooltip-color);
	transform-origin: top center;
}

/* ==========================================
   ACCESSIBILITE DES BLOCS CLIQUABLES (CARDS)
   https://youtu.be/HBriBrnRlQE?si=DLiSXEiBHt6lw91l
=================================================== */

.stretch-link {
    position: relative;
}

.stretch-link a::after {
    content: '';
    position: absolute;
    inset: 0;
}

.stretch-link a:is(:focus-visible)::after {
    outline: 2px solid;
}

.stretch-link a:is(:hover, :focus) {
    outline: none;
}