/* ==========================================================================
   DÉ CLICK GROUP — TRAME DE MISE EN PAGE UNIQUE
   Version 1.0.0 — 31/07/2026

   Règle unique : toute la mise en page du site est définie ici.
   Aucune page, aucun snippet, aucun bloc ne doit redéfinir une largeur,
   une marge de conteneur, une couleur de charte ou une échelle typographique.

   Sommaire
   1. Charte  ..................... variables de couleur, typo, espacement
   2. Conteneur fluide  ........... le contenu suit la largeur de la fenêtre
   3. Typographie  ................ échelle fluide commune
   4. Colonnes grands écrans  ..... 2 colonnes au-delà de 1800 px
   5. Composants  ................. bandeau, section, carte, grille, tableau,
                                    bouton, encadré
   6. Espace apprenant  ........... leçons, quiz, devoirs Tutor LMS
   7. Correctifs de compatibilité   Astra, WooCommerce, blocs
   ========================================================================== */


/* ==========================================================================
   1. CHARTE
   ========================================================================== */

:root {

	/* Couleurs de marque */
	--dk-navy:        #0F2233;
	--dk-navy-soft:   #163149;
	--dk-navy-deep:   #0A1622;
	--dk-green:       #009933;
	--dk-green-light: #35C46A;
	--dk-green-soft:  #E6FBEE;

	/* Neutres */
	--dk-ink:       #12202C;
	--dk-ink-soft:  #5A6B78;
	--dk-line:      #DFE6EC;
	--dk-surface:   #FFFFFF;
	--dk-surface-2: #F5F8FA;

	/* Rythme : la gouttière grandit avec la fenêtre, jamais de largeur figée */
	--dk-gutter: clamp(16px, 3.2vw, 72px);
	--dk-gap:    clamp(20px, 2.2vw, 44px);
	--dk-block:  clamp(40px, 5vw, 110px);

	/* Formes */
	--dk-radius:    16px;
	--dk-radius-sm: 10px;
	--dk-shadow:    0 2px 6px rgba(15, 34, 51, .06), 0 12px 32px rgba(15, 34, 51, .07);

	/* Échelle typographique fluide : le texte grandit avec la fenêtre */
	--dk-fs-body: clamp(16px, 0.35vw + 15px, 21px);
	--dk-fs-lead: clamp(18px, 0.60vw + 16px, 26px);
	--dk-fs-h1:   clamp(32px, 3.20vw, 68px);
	--dk-fs-h2:   clamp(26px, 2.20vw, 46px);
	--dk-fs-h3:   clamp(21px, 1.40vw, 31px);
	--dk-fs-h4:   clamp(18px, 1.05vw, 24px);
	--dk-fs-small: clamp(13px, 0.30vw + 12px, 16px);

	--dk-lh-body:  1.65;
	--dk-lh-title: 1.12;

	--dk-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	           Helvetica, Arial, sans-serif;
	--dk-serif: Georgia, "Times New Roman", serif;

	/* Seuil de passage en deux colonnes */
	--dk-wide: 1800px;
}


/* ==========================================================================
   2. CONTENEUR FLUIDE
   Le contenu occupe toute la fenêtre. Plus de colonne centrée étroite.
   ========================================================================== */

html {
	overflow-x: hidden;
}

body.dk-theme {
	background: var(--dk-surface);
	color: var(--dk-ink);
	font-family: var(--dk-sans);
	font-size: var(--dk-fs-body);
	line-height: var(--dk-lh-body);
	overflow-x: hidden;
}

/* Astra : neutralisation de toutes les largeurs maximales de conteneur. */
.dk-theme .ast-container,
.dk-theme .ast-container-fluid,
.dk-theme .site-content .ast-container,
.dk-theme .ast-plain-container .site-content > .ast-container,
.dk-theme .ast-separate-container .site-content > .ast-container,
.dk-theme .ast-page-builder-template .site-content > .ast-container,
.dk-theme #primary,
.dk-theme #content,
.dk-theme .site-main,
.dk-theme .entry-content,
.dk-theme .ast-article-single,
.dk-theme .ast-article-post,
.dk-theme .site-header .ast-container,
.dk-theme .site-footer .ast-container {
	max-width: 100% !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Une seule et même gouttière, appliquée au niveau le plus haut.
   Les niveaux internes n'ajoutent plus rien : fin des paddings empilés. */
.dk-theme .site-content > .ast-container,
.dk-theme .site-header > .ast-container,
.dk-theme .site-footer > .ast-container,
.dk-theme .dk-wrap {
	padding-left: var(--dk-gutter) !important;
	padding-right: var(--dk-gutter) !important;
	box-sizing: border-box;
}

.dk-theme .entry-content > *,
.dk-theme .site-main > * {
	padding-left: 0;
	padding-right: 0;
}

/* Blocs Gutenberg : alignements cohérents avec la trame */
.dk-theme .entry-content .alignwide,
.dk-theme .entry-content .alignfull {
	max-width: 100%;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* Bloc pleine largeur réelle : sort de la gouttière, va bord à bord. */
.dk-theme .dk-bleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}


/* ==========================================================================
   3. TYPOGRAPHIE
   ========================================================================== */

.dk-theme h1,
.dk-theme h2,
.dk-theme h3,
.dk-theme h4 {
	font-family: var(--dk-sans);
	color: inherit;
	line-height: var(--dk-lh-title);
	letter-spacing: -0.02em;
	margin: 0 0 0.5em;
	font-weight: 700;
}

.dk-theme h1 { font-size: var(--dk-fs-h1); }
.dk-theme h2 { font-size: var(--dk-fs-h2); }
.dk-theme h3 { font-size: var(--dk-fs-h3); }
.dk-theme h4 { font-size: var(--dk-fs-h4); }

.dk-theme p {
	margin: 0 0 1.1em;
}

.dk-theme .dk-lead {
	font-size: var(--dk-fs-lead);
	line-height: 1.5;
	color: var(--dk-ink-soft);
	font-weight: 300;
}

.dk-theme .entry-content a:not([class]),
.dk-theme .dk-prose a:not([class]) {
	color: var(--dk-green);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.dk-theme .entry-content a:not([class]):hover,
.dk-theme .dk-prose a:not([class]):hover {
	color: var(--dk-green-light);
}

.dk-theme .entry-content strong:not([class]) {
	font-weight: 650;
}

.dk-theme img,
.dk-theme video,
.dk-theme iframe {
	max-width: 100%;
	height: auto;
}


/* ==========================================================================
   4. COLONNES SUR GRANDS ÉCRANS
   Au-delà de 1800 px le texte occupe toujours toute la largeur,
   mais se répartit en deux colonnes pour rester lisible.
   Le regroupement des paragraphes est fait par assets/dk-layout.js.
   ========================================================================== */

@media (min-width: 1800px) {

	.dk-theme .dk-cols {
		column-count: 2;
		column-gap: clamp(48px, 3.5vw, 96px);
	}

	.dk-theme .dk-cols > * {
		break-inside: avoid-column;
	}

	.dk-theme .dk-cols > *:first-child {
		margin-top: 0;
	}
}


/* ==========================================================================
   5. COMPOSANTS
   ========================================================================== */

/* --- Bandeau ------------------------------------------------------------ */

.dk-theme .dk-hero {
	background: linear-gradient(135deg, var(--dk-navy) 0%, var(--dk-navy-soft) 100%);
	color: #fff;
	padding: var(--dk-block) var(--dk-gutter);
	border-radius: var(--dk-radius);
	margin: 0 0 var(--dk-block);
	position: relative;
	overflow: hidden;
}

.dk-theme .dk-hero h1,
.dk-theme .dk-hero h2 {
	color: #fff;
}

.dk-theme .dk-hero .dk-lead {
	color: rgba(255, 255, 255, .88);
}

.dk-theme .dk-eyebrow {
	display: inline-block;
	font-size: var(--dk-fs-small);
	letter-spacing: .16em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--dk-green-light);
	margin: 0 0 18px;
}

/* --- Section ------------------------------------------------------------ */

.dk-theme .dk-section {
	margin: 0 0 var(--dk-block);
}

.dk-theme .dk-section--alt {
	background: var(--dk-surface-2);
	padding: var(--dk-block) var(--dk-gutter);
	border-radius: var(--dk-radius);
}

/* --- Grille et cartes --------------------------------------------------- */

.dk-theme .dk-grid {
	display: grid;
	gap: var(--dk-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.dk-theme .dk-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.dk-theme .dk-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }

.dk-theme .dk-card {
	background: var(--dk-surface);
	border: 1px solid var(--dk-line);
	border-radius: var(--dk-radius);
	padding: clamp(20px, 1.8vw, 34px);
	box-shadow: var(--dk-shadow);
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.dk-theme .dk-card__media {
	margin: calc(-1 * clamp(20px, 1.8vw, 34px)) calc(-1 * clamp(20px, 1.8vw, 34px)) 4px;
	border-radius: var(--dk-radius) var(--dk-radius) 0 0;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.dk-theme .dk-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

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

.dk-theme .dk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--dk-green);
	color: #fff;
	font-weight: 600;
	font-size: var(--dk-fs-body);
	line-height: 1.2;
	padding: 14px 26px;
	border: 0;
	border-radius: 999px;
	text-decoration: none;
	cursor: pointer;
	transition: background .18s ease, transform .18s ease;
}

.dk-theme .dk-btn:hover {
	background: var(--dk-green-light);
	color: #fff;
	transform: translateY(-1px);
}

.dk-theme .dk-btn--ghost {
	background: transparent;
	color: var(--dk-navy);
	border: 1.5px solid var(--dk-line);
}

.dk-theme .dk-btn--ghost:hover {
	background: var(--dk-surface-2);
	color: var(--dk-navy);
}

/* --- Encadré ------------------------------------------------------------ */

.dk-theme .dk-note {
	background: var(--dk-green-soft);
	border-left: 4px solid var(--dk-green);
	border-radius: var(--dk-radius-sm);
	padding: clamp(16px, 1.4vw, 26px);
	margin: 0 0 var(--dk-gap);
}

.dk-theme .dk-note--dark {
	background: var(--dk-navy);
	border-left-color: var(--dk-green-light);
	color: #fff;
}

/* --- Tableau ------------------------------------------------------------ */

.dk-theme .dk-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 var(--dk-gap);
	border-radius: var(--dk-radius-sm);
	border: 1px solid var(--dk-line);
}

.dk-theme table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--dk-fs-small);
	background: var(--dk-surface);
}

.dk-theme th,
.dk-theme td {
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid var(--dk-line);
	vertical-align: top;
}

.dk-theme thead th {
	background: var(--dk-navy);
	color: #fff;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: .85em;
	border-bottom: 0;
}

.dk-theme tbody tr:last-child td {
	border-bottom: 0;
}


/* ==========================================================================
   6. ESPACE APPRENANT (Tutor LMS)
   Même trame que le reste du site : contenu fluide, pas de colonne étroite,
   pas de bloc qui déborde sous la barre latérale.
   ========================================================================== */

/* Le menu du site n'a pas sa place dans la vue leçon immersive :
   l'en-tête Tutor assure déjà la navigation et le retour au cours. */
body.single-lesson .dcf-banner,
body.single-lesson .dcf-nav,
body.single-tutor_quiz .dcf-banner,
body.single-tutor_quiz .dcf-nav,
body.single-tutor_assignments .dcf-banner,
body.single-tutor_assignments .dcf-nav {
	display: none !important;
}

/* Contenu de leçon : toute la largeur disponible, une seule gouttière. */
.tutor-learning-area .tutor-lesson-content,
.tutor-learning-area .tutor-lesson-content-tab,
.tutor-learning-area .tutor-tabs-content {
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.tutor-learning-area .tutor-tab-panel {
	padding: clamp(18px, 2vw, 40px) var(--dk-gutter) !important;
	max-width: 100% !important;
}

.tutor-learning-area .tutor-lesson-wrapper,
.tutor-learning-area .dc-lesson,
.tutor-learning-area .dc-wrap,
.tutor-learning-area .dc-lesson article {
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Les leçons ont été rédigées avec des blocs en 100vw. Dans l'espace
   apprenant la colonne est décalée par la barre latérale : le bloc
   passait sous le menu et débordait à droite. */
.tutor-learning-area .dc-hero,
.tutor-learning-area .dc-bleed {
	width: auto !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	border-radius: var(--dk-radius) !important;
}

/* Tableaux et blocs vidéo des leçons : jamais de débordement. */
.tutor-learning-area .dc-lesson table,
.tutor-learning-area .dc-table {
	display: block;
	overflow-x: auto;
	max-width: 100%;
}

.tutor-learning-area .video-caption {
	flex-wrap: wrap;
}

.tutor-learning-area .video-caption > * {
	min-width: 0;
}

body.single-lesson,
body.single-tutor_quiz,
body.single-tutor_assignments {
	overflow-x: hidden;
}


/* ==========================================================================
   7. COMPATIBILITÉ
   ========================================================================== */

/* Astra ajoute parfois une marge auto sur l'article : on la neutralise. */
.dk-theme .ast-separate-container .ast-article-single,
.dk-theme .ast-separate-container .ast-article-post {
	padding-left: 0;
	padding-right: 0;
	background: transparent;
	box-shadow: none;
}

/* Rien ne doit provoquer de défilement horizontal. */
.dk-theme .site-content {
	overflow-x: clip;
}

@media (max-width: 600px) {
	.dk-theme .dk-hero {
		border-radius: var(--dk-radius-sm);
	}
}


/* --- Espace apprenant : cartes univers du Dashboard (standard trame) --- */
.dk-theme .dcg-dom-grid{
	display:grid;
	gap:var(--dk-gap);
	grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
	margin:0 0 var(--dk-block);
}
.dk-theme .dcg-dom{
	background:var(--dk-surface);
	border:1px solid var(--dk-line);
	border-radius:var(--dk-radius);
	padding:clamp(20px,1.8vw,30px);
	box-shadow:var(--dk-shadow);
}