/*
Theme Name: Intersection Conseil
Theme URI: https://intersection-conseil.com
Description: Thème enfant Ollie aux couleurs et typographies d'Intersection Conseil & Création.
Author: Émilie Lebrun
Template: ollie
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: intersection-conseil
*/

/* -------------------------------------------------------------------------
   Surcharges qui ne peuvent pas passer par theme.json.

   WordPress enveloppe le CSS de theme.json dans :where(), ce qui annule sa
   spécificité. Ollie applique ses règles de navigation avec !important et des
   sélecteurs plus spécifiques : elles ne peuvent être battues que d'ici, en
   reprenant son propre préfixe .wp-block-navigation__responsive-container.

   Tout ce qui suit ne vise QUE le menu déroulant de bureau, via
   :not(.is-menu-open). Le panneau mobile garde le rendu natif d'Ollie.
   ---------------------------------------------------------------------- */

/* --- Variables ---------------------------------------------------------- */

:root {
	/* Écart entre la barre de navigation et le panneau déroulant.
	   Une seule valeur à changer : le pont invisible suit automatiquement. */
	--sousnav-ecart: 43px;

	/* Distance conservée entre le haut de la fenêtre et le bloc collant. */
	--cta-collant-decalage: 2rem;
}

/* --- Sous-menu de bureau ------------------------------------------------

   La typographie du sous-menu se règle dans l'éditeur de site, sur le bloc
   Navigation. Si les réglages ne s'appliquent pas, c'est qu'Ollie reprend
   la main : il faudra alors redéclarer font-family, font-size, font-weight,
   line-height et letter-spacing dans la règle ci-dessous, avec !important. */

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--tertiary) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	min-width: 215px;
	padding: 8px 0 !important;
}

/* Premier niveau : sous le libellé, aligné à gauche sur lui. Les -20px
   compensent la marge interne des liens. */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
	top: calc(100% + var(--sousnav-ecart)) !important;
	left: 0 !important;
	margin-left: -20px !important;
}

/* Niveaux imbriqués : ouverture sur le côté, sinon ils recouvrent leur parent. */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	top: 0 !important;
	left: 100% !important;
	margin-left: 0 !important;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container li {
	padding: 0 !important;
	margin: 0 !important;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 6px 20px !important;
	color: var(--wp--preset--color--main) !important;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--primary) !important;
	text-decoration: none;
}

/* Pont invisible entre le libellé et le panneau.

   Porté par le <li> et non par le panneau : le panneau disparaît dès que le
   <li> n'est plus survolé, un pont posé dessus s'évanouirait avec lui. */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item.has-child {
	position: relative;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item.has-child::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: -20px;
	height: var(--sousnav-ecart);
}

/* Chevrons : le libellé et le chevron sont deux éléments frères, le premier
   avec marge interne, le second sans. Sans conteneur flex, le chevron décroche. */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item.has-child {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
	flex: 1 1 auto;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 0 20px 0 0 !important;
	height: auto !important;
	min-width: 0 !important;
	color: inherit;
}

/* --- Logo SVG dans l'éditeur -------------------------------------------

   Uniquement dans le canevas : .editor-styles-wrapper n'existe pas sur le
   front, où WordPress pose lui-même width et height sur l'image. */

.editor-styles-wrapper .wp-block-site-logo img {
	width: 100%;
	height: auto;
}

/* --- Flèche des boutons -------------------------------------------------

   La flèche n'existe pas dans le contenu : elle est ajoutée en CSS. Elle
   avance au survol.

   Deux cas visés : le bouton par défaut (aucune variation is-style-*) et la
   variation Brand d'Ollie. Pour ajouter une autre variation, dupliquer la
   ligne .is-style-button-brand dans les deux règles ci-dessous.

   Note d'accessibilité : contrairement à une image de fond, le texte généré
   par ::after EST restitué par NVDA et VoiceOver. Le bouton sera annoncé
   « … , flèche longue vers la droite ». Acceptable ici ; pour l'éviter il
   faudrait passer par un masque SVG (content vide + background). */

.wp-block-button:not([class*="is-style-"]) > .wp-block-button__link::after,
.wp-block-button.is-style-button-brand > .wp-block-button__link::after {
	/* U+27F6 : flèche longue. Montserrat ne la contient pas, le navigateur
	   substitue une police système. */
	content: "\27F6";
	display: inline-block;
	margin-left: 0.9em;
	line-height: 1;

	/* Centrage vertical, en deux temps.

	   1. vertical-align: middle aligne le CENTRE DE LA BOÎTE de la flèche sur
	      la ligne de base + une demi-hauteur d'x. Insuffisant : dans la police
	      de substitution, le dessin n'occupe que le bas de sa boîte (il monte
	      à 0,29em au-dessus de la ligne de base, là où les capitales montent
	      à 0,74em). La boîte est centrée, le dessin ne l'est pas.

	   2. top compense l'écart résiduel mesuré, soit 0,3em.

	   Le décalage passe par position/top et non par transform, pour laisser
	   transform entièrement disponible à l'animation de survol. Une valeur en
	   transform serait écrasée par le translateX du :hover. */
	vertical-align: middle;
	position: relative;
	top: -0.3em;

	transition: transform 0.2s ease;
}

.wp-block-button:not([class*="is-style-"]) > .wp-block-button__link:hover::after,
.wp-block-button.is-style-button-brand > .wp-block-button__link:hover::after {
	transform: translateX(0.25em);
}

/* --- Bloc CTA collant (colonne latérale des articles) -------------------

   Classe .cta-collant, posée sur un groupe placé dans une colonne, à côté du
   contenu de l'article. Le groupe suit le défilement tant que la colonne
   défile encore.

   position: sticky n'a d'effet que si aucun ancêtre n'a un overflow autre que
   visible, et si la colonne est plus haute que le bloc. Les deux conditions
   sont vérifiées dans la mise en page actuelle.

   Pas de media query : sous 782px WordPress empile les colonnes, la colonne
   n'est alors pas plus haute que le bloc et sticky reste sans effet. */

.cta-collant {
	position: sticky;
	top: var(--cta-collant-decalage);
}

/* --- Formulaire sur fond foncé ------------------------------------------

   Classe .formulaire-fond-fonce, posée sur le bloc Formidable quand il est
   placé dans une section au fond sombre (primary-alt). Sans elle, les
   libellés sortent en gris ardoise sur violet : illisibles.

   Spécificité : Formidable cible ses libellés avec
   .frm_style_style-formidable.with_frm_style div.frm_description, soit
   (0,3,1). Une simple descendance .formulaire-fond-fonce .frm_description
   vaut (0,2,0) et perd. On reprend donc les classes que Formidable pose
   lui-même sur le même élément — .frm_forms et .with_frm_style — pour monter
   Ã  (0,4,1) et passer devant sans !important. */

.formulaire-fond-fonce.frm_forms.with_frm_style .frm_primary_label,
.formulaire-fond-fonce.frm_forms.with_frm_style .frm_checkbox label,
.formulaire-fond-fonce.frm_forms.with_frm_style .frm_radio label {
	color: var(--wp--preset--color--base);
}

/* Sous-libellés (« Prénom », « Nom ») et textes d'aide. Blanc atténué plutôt
   qu'un gris clair fixe : reste à 7:1 sur le violet et suivrait un changement
   de fond. */
.formulaire-fond-fonce.frm_forms.with_frm_style div.frm_description {
	color: var(--wp--preset--color--base);
	opacity: 0.8;
}

/* L'astérisque des champs obligatoires : le rouge de Formidable ne fait que
   2,8:1 sur le violet. */
.formulaire-fond-fonce.frm_forms.with_frm_style .frm_required {
	color: var(--wp--preset--color--base);
}

/* Champs : Formidable donne par défaut un rayon de 5px aux input et 0 aux
   textarea, avec deux tailles de texte différentes. On unifie.
   16px minimum : en dessous, iOS zoome automatiquement à la prise de focus. */
.formulaire-fond-fonce.frm_forms.with_frm_style input[type="text"],
.formulaire-fond-fonce.frm_forms.with_frm_style input[type="email"],
.formulaire-fond-fonce.frm_forms.with_frm_style input[type="tel"],
.formulaire-fond-fonce.frm_forms.with_frm_style textarea,
.formulaire-fond-fonce.frm_forms.with_frm_style select {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--main);
	border: 1px solid transparent;
	border-radius: 5px;
	font-size: 16px;
}
/* --- Trait au feutre ----------------------------------------------------

   À poser sur une portion de texte, en passant le bloc en édition HTML
   (Options du bloc → Modifier en HTML) :
   <span class="feutre">les bonnes personnes</span>

   La couleur est figée dans le SVG (%23FFA904 = Action Accent). Une data URI
   ne peut pas lire une variable CSS : si tu changes cette couleur dans
   theme.json, il faut la reporter ici à la main.

   Deux réglages : background-position (hauteur du trait sous le texte) et
   background-size (épaisseur). */

.feutre {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M1,7.4 C26,4.0 50,6.9 74,4.6 C99,2.4 122,6.0 147,3.9 C172,1.9 196,5.4 221,3.5 C246,1.8 272,4.6 299,2.9 L299,5.6 C272,8.6 246,5.2 221,7.2 C196,9.2 172,5.8 147,7.9 C122,10.0 99,6.4 74,8.7 C50,10.9 26,8.0 1,10.4 Z' fill='%23FFA904'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 0.22em;   /* épaisseur : 0.30em plus gras, 0.16em plus fin */
background-position: 0 1.12em;
	padding-bottom: 0.28em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

@media (min-width: 782px) {
	/* On garde 3 colonnes, et certaines cartes en prennent 2 */
	.grille-2-1 .wp-block-post-template.is-layout-grid {
	  grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	/* Quinconce : grande-petite / petite-grande */
	.grille-2-1 .wp-block-post-template > li:nth-child(4n+1),
	.grille-2-1 .wp-block-post-template > li:nth-child(4n) {
	  grid-column: span 2;
	}
	/* Même hauteur d'image pour toutes les cartes */
	.grille-2-1 .wp-block-post-featured-image img {
	  aspect-ratio: auto !important;
	  height: 300px;
	}
  }