/**
 * Deekay School — les zones de la page d'accueil pilotées depuis l'admin.
 *
 * Ces sections remplacent des blocs Stackable : elles doivent donc se poser
 * dans la page comme eux, sans réclamer de réglage de largeur ni de fond. La
 * couleur de fond reste portée par la section Stackable qui les contient —
 * on ne redéclare ici que ce qui vit à l'intérieur.
 *
 * Toutes les couleurs viennent de brand.css : aucune valeur n'est écrite en
 * dur, pour qu'un changement de palette n'oublie pas cette feuille.
 */

/* =====================================================================
   1. À propos
   ===================================================================== */

/* La colonne Stackable qui accueille ces sections est réglée en « centré » :
   sans cette reprise, tout le contenu hérite du centrage. Les anciens blocs
   forçaient l'alignement un par un — on le fait ici une fois pour toutes. */
.dks-ap,
.dks-faq,
.dks-lieux {
	text-align: left;
}

.dks-ap {
	display: grid;
	gap: 34px;
	align-items: center;
}

/* Texte à gauche, média à droite — et l'un sous l'autre dès que la place
   manque, le texte toujours en premier. */
@media (min-width: 860px) {
	.dks-ap.has-media {
		grid-template-columns: 1fr 1fr;
	}
}

/* Sans min-width, une colonne de grille refuse de descendre sous la largeur
   de son plus long mot et fait déborder la page sur mobile. */
.dks-ap-texte {
	min-width: 0;
}

/* Le grand titre de section : même format que « FAQ » ou « HORAIRES ». */
.dks-ap-titre {
	margin: 0 0 14px;
	font-size: 45px;
	line-height: 1.3;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--dk-titre, #928885);
}

@media (max-width: 1023px) { .dks-ap-titre { font-size: 40px; } }
@media (max-width: 767px)  { .dks-ap-titre { font-size: 30px; } }

/* L'accroche : la phrase en gras juste sous le titre. */
.dks-ap-accroche {
	margin: 0 0 20px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--dk-ink);
}

.dks-ap-corps {
	font-size: 16px;
	line-height: 1.7;
}

.dks-ap-corps p {
	margin: 0 0 12px;
}

.dks-ap-corps p:last-child {
	margin-bottom: 0;
}

/* Les boutons de la page d'accueil se partagent la largeur à parts égales
   plutôt que de se caler sur leur texte : c'est le réglage « pleine largeur »
   des blocs d'origine, et c'est ce qui les rendait reconnaissables. */
.dks-ap-boutons {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 26px 0 0;
}

/* Le premier bouton porte l'accent, le second reste en retrait : deux
   boutons pleins côte à côte n'indiqueraient plus lequel suivre. */
/* Fond encre et filet jaune : les deux boutons de la page d'accueil. Le
   premier écrit en jaune, le second en blanc — c'est ce qui les distingue,
   pas leur fond. */
.dks-ap-btn {
	flex: 1 1 200px;
	padding: 10px 26px;
	font-size: 13px;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
}

.dks-ap-media img,
.dks-ap-media iframe {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

/* Une vidéo intégrée n'a pas de hauteur propre : sans ce cadre, elle
   s'affiche en bandeau de quelques pixels. */
.dks-ap-video {
	position: relative;
	padding-top: 56.25%;
}

.dks-ap-video iframe {
	position: absolute;
	inset: 0;
	height: 100%;
}

/* =====================================================================
   2. FAQ
   ===================================================================== */

/* Deux colonnes dès qu'il y a la place : la liste tenait sur une colonne
   étroite et paraissait courte, alors qu'elle compte plusieurs questions.
   align-items: start pour qu'une question dépliée ne tire pas sa voisine. */
.dks-faq {
	display: grid;
	gap: 0 46px;
	align-items: start;
}

@media (min-width: 860px) {
	.dks-faq {
		grid-template-columns: 1fr 1fr;
	}
	.dks-faq-titre {
		grid-column: 1 / -1;
	}
}

.dks-faq-titre {
	margin: 0 0 22px;
	font-size: clamp(28px, 4vw, 45px);
	font-weight: 800;
	line-height: 1.2;
}

.dks-faq-item {
	border-bottom: 1px solid rgba(28, 24, 22, .12);
}

.dks-faq-item summary {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 0;
	cursor: pointer;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	list-style: none;
}

.dks-faq-item summary::-webkit-details-marker {
	display: none;
}

/* Le chevron est dessiné en CSS plutôt qu'importé : une icône de moins à
   charger, et il suit la couleur du texte sans réglage. */
.dks-faq-item summary::after {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	margin-left: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .2s ease;
}

.dks-faq-item[open] summary::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.dks-faq-item summary:hover,
.dks-faq-item summary:focus-visible {
	color: var(--dk-grey);
}

.dks-faq-rep {
	padding: 0 0 20px;
	font-size: 15px;
	line-height: 1.7;
}

.dks-faq-rep p {
	margin: 0 0 10px;
}

.dks-faq-rep p:last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.dks-faq-item summary::after {
		transition: none;
	}
}

/* =====================================================================
   3. Nous trouver
   ===================================================================== */

.dks-lieux-titre {
	margin: 0 0 26px;
	font-size: clamp(28px, 4vw, 45px);
	font-weight: 800;
	line-height: 1.2;
}

.dks-lieux-grille {
	display: grid;
	gap: 34px;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	align-items: start;
}

.dks-lieu-nom {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.dks-lieu-adresse {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.6;
}

.dks-lieu-carte {
	position: relative;
	padding-top: 62%;
	margin: 0 0 14px;
	border-radius: 6px;
	overflow: hidden;
	background: rgba(28, 24, 22, .06);
}

.dks-lieu-carte iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.dks-lieu-actions {
	margin: 0 0 16px;
}

.dks-lieu-btn {
	display: inline-block;
	padding: 10px 26px;
	font-size: 13px;
	text-transform: uppercase;
	text-decoration: none;
}

.dks-lieu-acces {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
}

/* Les sections de la page À propos se suivent, séparées par de l'air plutôt
   que par un trait : le titre de chacune suffit à marquer la coupure. */
.dks-ap-page {
	display: grid;
	gap: 56px;
}

/* =====================================================================
   4. À propos — la page, sur fond sombre
   ===================================================================== */

/* Cette page se lit en blanc sur encre : la section Stackable qui l'entoure
   porte le fond, on ne redéclare ici que ce qui vit dedans. Les valeurs
   viennent des blocs d'origine, pas d'un choix nouveau. */
.dks-ap--page .dks-ap-corps {
	color: var(--dk-white);
}

.dks-ap--page .dks-ap-corps strong {
	color: var(--dk-white);
}

/* Titre de chapitre : gris, 35 px, gras — plus discret que le titre de page. */
.dks-ap--page .dks-ap-titre {
	font-size: 35px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--dk-titre, #928885);
	margin-bottom: .67rem;
	text-transform: none;
}

/* Titre de la page : jaune, 45 px, majuscules, centré. C'est le seul de la
   page à porter l'accent — d'où sa rareté. */
.dks-ap--page.is-intro {
	justify-items: center;
	margin-bottom: 8px;
}

.dks-ap--page.is-intro .dks-ap-titre {
	font-size: 45px;
	font-weight: 800;
	text-transform: uppercase;
	text-align: center;
	color: var(--dk-yellow);
	margin-bottom: 20px;
}

.dks-ap--page.is-intro .dks-ap-corps {
	display: none;
}

@media (max-width: 1023px) {
	.dks-ap--page .dks-ap-titre { font-size: 40px; }
	.dks-ap--page.is-intro .dks-ap-titre { font-size: 40px; }
}

@media (max-width: 767px) {
	.dks-ap--page .dks-ap-titre { font-size: 30px; }
	.dks-ap--page.is-intro .dks-ap-titre { font-size: 30px; }
}

/* Les chapitres respirent : 2.25rem sous chaque texte dans la version
   d'origine, ce qui reste plus serré que l'écart par défaut. */
.dks-ap-page {
	gap: 2.25rem;
}

/* --- Disposition en deux colonnes, comme la page d'origine ------------ */

/* Deux colonnes déclarées, et non un flux que le navigateur équilibre : la
   répartition est décidée côté serveur (première moitié à gauche), donc la
   coupure tombe toujours au même endroit — « DEEKAY en 5 mots ? » ferme la
   colonne de gauche, « Pourquoi ? » ouvre celle de droite. */
.dks-ap-page {
	display: grid;
	gap: 2.25rem;
}

.dks-ap-colonnes {
	display: grid;
	gap: 2.25rem 60px;
	grid-template-columns: 1fr;
}

.dks-ap-col {
	display: grid;
	gap: 2.25rem;
	align-content: start;
	min-width: 0;
}

@media (min-width: 860px) {
	.dks-ap-colonnes {
		grid-template-columns: 1fr 1fr;
	}

	/* Dans une colonne, un média se place SOUS son texte, jamais à côté :
	   la règle « texte à gauche, média à droite » vaut pour la pleine
	   largeur de la page d'accueil, pas pour une demi-largeur où elle
	   laisserait deux colonnes de 200 px. */
	.dks-ap-col .dks-ap.has-media {
		grid-template-columns: 1fr;
	}
}

/* Le portrait ferme la page : filet de séparation, photo à gauche sur un
   tiers, texte sur deux tiers. */
.dks-ap--page.is-portrait {
	margin-top: .5rem;
	padding-top: 2.75rem;
	border-top: 1px solid rgba(255, 255, 255, .18);
}

@media (min-width: 860px) {
	.dks-ap--page.is-portrait {
		grid-template-columns: 1fr 2fr;
		gap: 40px;
		align-items: center;
	}

	.dks-ap--page.is-portrait .dks-ap-texte {
		order: 2;
	}

	.dks-ap--page.is-portrait .dks-ap-portrait {
		order: 1;
	}
}

/* --- Le portrait de fin de page --------------------------------------- */

/* Photo ronde, nom dessous, fonction en accent : c'est la carte « membre de
   l'équipe » de la version d'origine, refaite sans dépendre du bloc du thème. */
.dks-ap-portrait {
	text-align: center;
}

.dks-ap--page.is-portrait .dks-ap-media img {
	width: 200px;
	max-width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	margin-inline: auto;
}

.dks-ap-legende {
	margin: 14px 0 0;
	line-height: 1.4;
}

.dks-ap-legende strong {
	display: block;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: .04em;
	color: var(--dk-white);
}

.dks-ap-legende span {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	color: var(--dk-yellow);
}

/* La parole d'une personne se distingue du texte de l'école. */
.dks-ap--page.is-portrait .dks-ap-corps {
	font-style: italic;
}

/* --- Boutons dans une colonne ----------------------------------------- */

/* Empilés et non côte à côte : la colonne est trop étroite pour deux boutons
   sur une ligne, et l'original les superpose déjà. */
.dks-ap-boutons--page {
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	margin-top: 20px;
}

.dks-ap-boutons--page .dks-ap-btn {
	flex: none;
}