/*
 * Motifs de la charte ABCampus.
 *
 * Tout ce qui ne s'exprime pas en theme.json vit ici : la bulle BD et sa
 * pointe (pseudo-élément), les anneaux pointillés, les survols. Chaque
 * classe est posée par les patterns du thème ; les couleurs passent par
 * les variables de preset pour rester pilotées par theme.json.
 */

/* ---- La bulle BD, motif signature repris du logo ---------------------- */

.abcampus-bulle {
	background: var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--bubble);
	color: #fff;
	display: inline-block;
	font-family: var(--wp--preset--font-family--fredoka);
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: 600;
	padding: 8px 18px 10px;
	position: relative;
	transform: rotate(-1.6deg);
}

.abcampus-bulle::after {
	border-color: var(--wp--preset--color--primary) transparent transparent transparent;
	border-style: solid;
	border-width: 11px 9px 0 0;
	bottom: -9px;
	content: "";
	height: 0;
	left: 16px;
	position: absolute;
	width: 0;
}

/* La bulle est en inline-block : les marges auto du layout « constrained »
   ne s'appliquent pas aux boîtes de niveau ligne. D'où deux cas.

   Centrée (hero, sections) : display:table se réduit au contenu ET se centre.

   Alignée à gauche : aucune règle ne peut la rattraper, car le conteneur
   contraint est pleine largeur — la caler à gauche la collerait au bord de
   l'écran. Il faut l'enfermer dans un groupe en disposition « par défaut »,
   comme le font etapes.php et bande-test.php.

   La bulle ne sert que sur la page d'accueil : ni les gabarits LearnDash ni
   les pages de pages/ n'en portent. */
.abcampus-bulle.has-text-align-center {
	display: table;
	margin-left: auto;
	margin-right: auto;
}

.abcampus-bulle--soleil { background: var(--wp--preset--color--sun); }
.abcampus-bulle--soleil::after { border-top-color: var(--wp--preset--color--sun); }

/* Variantes indigo et corail retirées : elles ne servaient qu'aux étiquettes
   « Notion » et « Quiz », supprimées des gabarits LearnDash. */

/* ---- Cartes de formation ---------------------------------------------- */

.abcampus-carte {
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.abcampus-carte:hover {
	box-shadow: var(--wp--preset--shadow--natural);
	transform: translateY(-4px);
}

/* Étiquettes en contour fin : « Niveau 1 », « 24 semaines »… */
.abcampus-etiquettes span {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 20px;
	color: var(--wp--preset--color--indigo-soft);
	display: inline-block;
	font-family: var(--wp--preset--font-family--fredoka);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	margin-right: 7px;
	padding: 3px 10px 4px;
	text-transform: uppercase;
}

/* La variante corail signale les cours en direct */
.abcampus-etiquettes .abcampus-etiquette--corail {
	background: var(--wp--preset--color--coral);
	border-color: var(--wp--preset--color--coral);
	color: #fff;
}

/* Lien « Découvrir » : ambre foncé, gras, zone tactile confortable */
.abcampus-decouvrir a {
	color: var(--wp--preset--color--amber-deep);
	display: inline-block;
	font-weight: 700;
	padding: 11px 2px;
	text-decoration: none;
}

.abcampus-decouvrir a:hover {
	color: var(--wp--preset--color--amber-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Pastille numérotée des étapes ------------------------------------ */

.abcampus-num {
	align-items: center;
	background: var(--wp--preset--color--primary);
	border-radius: 50%;
	color: #3A2600;
	display: flex;
	font-family: var(--wp--preset--font-family--fredoka);
	font-weight: 600;
	height: 44px;
	justify-content: center;
	width: 44px;
}

/* ---- Anneau pointillé, repris des vignettes --------------------------- */

.abcampus-anneau {
	position: relative;
}

.abcampus-anneau::before {
	border: 2.5px dotted var(--wp--preset--color--indigo);
	border-radius: 50%;
	content: "";
	inset: -7% -2%;
	opacity: 0.35;
	pointer-events: none;
	position: absolute;
}

/* Portraits de l'équipe : photo ronde, anneau coloré par personne */
.abcampus-portrait img {
	border-radius: 50%;
	object-fit: cover;
}

.abcampus-portrait .abcampus-anneau::before {
	border-color: var(--wp--preset--color--primary);
	inset: -8px;
	opacity: 1;
}

.abcampus-portrait--indigo .abcampus-anneau::before {
	border-color: var(--wp--preset--color--indigo);
	opacity: 0.45;
}

.abcampus-portrait--olive .abcampus-anneau::before {
	border-color: var(--wp--preset--color--olive);
	opacity: 1;
}

/* ---- Boutons ----------------------------------------------------------- */

/* Enfoncement au survol ; l'ombre écrasée ne vaut que pour le bouton plein. */
.wp-element-button {
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.wp-element-button:hover {
	transform: translateY(2px);
}

.wp-block-button:not(.abcampus-bouton-doux) .wp-element-button:hover {
	box-shadow: 0 2px 0 var(--wp--preset--color--amber-deep);
}

/* Variante douce : blanc, ombre filet — le « Testez votre niveau » */
.abcampus-bouton-doux .wp-element-button {
	background: var(--wp--preset--color--surface);
	box-shadow: 0 3px 0 var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast);
}

.abcampus-bouton-doux .wp-element-button:hover {
	box-shadow: 0 1px 0 var(--wp--preset--color--line);
}

/* ---- Navigation et pied de page ---------------------------------------- */

/* Le parent souligne tous les liens ; pas ceux de la navigation ni du pied
   de page, qui sont des repères d'interface, pas des liens dans du texte. */
.wp-block-navigation a {
	text-decoration: none;
}

.site-footer a {
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--wp--preset--color--contrast);
}

/* ---- Bandes pleine largeur --------------------------------------------- */

/* WordPress espace les blocs freres de « blockGap » — ici 25 a 30 px, herite
   de Powder. Entre deux bandes de couleur, cet interstice laisse voir le fond
   de page : une bande doit toucher sa voisine.

   Limite aux groupes a dessein : une image pleine largeur dans un article a
   besoin de sa respiration, elle. */
.is-layout-flow > .wp-block-group.alignfull,
.is-layout-constrained > .wp-block-group.alignfull {
	margin-block-start: 0;
}

/* ---- FAQ : blocs « Détails » -------------------------------------------- */

/* Chaque question devient une carte, pour qu'on voie d'un coup d'œil où elle
   commence et où elle s'arrête. Ici plutôt qu'en theme.json : la charte
   s'exprime en theme.json partout où elle le peut, mais rien n'y permet
   d'atteindre le <summary>, ni de retirer le triangle du navigateur. */
.wp-block-details {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	box-shadow: var(--wp--preset--shadow--light);
	padding: 0 var(--wp--preset--spacing--30);
}

.wp-block-details + .wp-block-details {
	margin-top: 12px;
}

.wp-block-details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--fredoka);
	font-weight: 600;
	list-style: none; /* retire le triangle de Firefox */
	padding: 16px 34px 16px 0;
	position: relative;
}

/* Le triangle de Chrome et Safari, que list-style:none ne suffit pas à ôter. */
.wp-block-details summary::-webkit-details-marker {
	display: none;
}

/* Chevron maison, qui bascule à l'ouverture. */
.wp-block-details summary::after {
	border-bottom: 2px solid var(--wp--preset--color--indigo-soft);
	border-right: 2px solid var(--wp--preset--color--indigo-soft);
	content: "";
	height: 9px;
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.18s ease;
	width: 9px;
}

.wp-block-details[open] summary::after {
	transform: translateY(-25%) rotate(-135deg);
}

.wp-block-details summary:hover {
	color: var(--wp--preset--color--amber-deep);
}

/* Une fois ouverte, un filet sépare la question de sa réponse. */
.wp-block-details[open] summary {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.wp-block-details > :not(summary) {
	margin-bottom: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--30);
}

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

@media (prefers-reduced-motion: reduce) {
	.abcampus-carte,
	.wp-block-details summary::after,
	.wp-element-button {
		transition: none;
	}

	.abcampus-carte:hover,
	.wp-element-button:hover {
		transform: none;
	}
}

/* ---- Fenêtres modales -------------------------------------------------- */

/* Voir assets/js/modale.js. La <dialog> sert de cadre transparent : le fond
   sombre est son ::backdrop, natif, donc sans div d'habillage. */
.abcampus-modale-fenetre {
	background: transparent;
	border: 0;
	max-width: min(1100px, 92vw);
	padding: 0;
	width: 100%;
}

/* Un formulaire n'a pas besoin de la largeur d'une vidéo. */
.abcampus-modale-fenetre--contenu {
	max-width: min(680px, 92vw);
}

.abcampus-modale-fenetre::backdrop {
	background: rgba(22, 16, 70, 0.82);
}

.abcampus-modale-fenetre iframe {
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 18px;
	box-shadow: var(--wp--preset--shadow--deep);
	display: block;
	height: auto;
	width: 100%;
}

/* display:block pour que margin-left:auto pousse le bouton à droite : les
   marges auto ne s'appliquent pas à une boîte de niveau ligne, et un
   <button> est en inline-block. Même piège que la bulle. */
.abcampus-modale-fermer {
	background: var(--wp--preset--color--primary);
	border: 0;
	border-radius: 999px;
	color: #3a2600;
	cursor: pointer;
	display: block;
	font-family: var(--wp--preset--font-family--fredoka);
	font-size: 24px;
	height: 40px;
	line-height: 1;
	margin: 0 0 12px auto;
	width: 40px;
}

/* Contenu destiné à une fenêtre : absent de la page, visible une fois
   déplacé dans la <dialog>. Dans l'éditeur, editeur.css le rend de nouveau
   visible — sinon le bloc serait impossible à modifier. */
.abcampus-modale-contenu {
	display: none;
}

.abcampus-modale-fenetre .abcampus-modale-contenu {
	background: var(--wp--preset--color--surface);
	border-radius: 18px;
	box-shadow: var(--wp--preset--shadow--deep);
	display: block;
	max-height: 80vh;
	overflow-y: auto;
	padding: var(--wp--preset--spacing--50);
}