/*
=======================================================================
LES PAS D'ALAIN — THÈME ENFANT MAGBOOK
CTC SEPARATE STYLESHEET — RÉFÉRENCE 16/08/2026
=======================================================================

Rôle :
Cette feuille contient uniquement les personnalisations LPDA nécessaires
pour reproduire le rendu actuel lorsque le style.css du thème parent
Magbook est remis à sa version d'origine.

Elle est destinée à :
wp-content/themes/magbook-child/ctc-style.css

Source de comparaison :
- CSS d'origine Magbook 1.3.3
- style.css LPDA de production au 16/08/2026

=======================================================================
*/


/* ======================================================
   1. SURCHARGES DES RÈGLES MAGBOOK MODIFIÉES
   ====================================================== */

/* Corps du site */
body,
button,
input,
select,
textarea {
	color: #333333;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.875rem;
}

/* Titres généraux */
h1,
h2,
h3,
h4,
h5,
h6 {
	color: #2d2d2d;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	color: inherit;
}

h3 {
	font-size: 22px;
	line-height: 1.318;
}

h4 {
	font-size: 18px;
	line-height: 1.389;
}

h5 {
	font-size: 16px;
	font-weight: 700;
	font-variant: small-caps;
	font-style: normal;
	line-height: 1.4;
}

h6 {
	font-size: 14px;
	font-variant: small-caps;
	font-style: italic;
	line-height: 1.4;
}

/* Chapô */
.chapo {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 24px;
	font-weight: 700;
	font-style: italic;
	color: #1177BB;
	text-align: justify;
	line-height: 1.35;
	margin: 0 0 24px 0;
}

/* Identité du site */
#site-detail {
	padding: 0;
}

/* Texte de la barre supérieure */
.top-bar-date {
	color: #FAFAF8;
}

/* Barre du logo */
.logo-bar {
	padding: 0;
}

/* Titres d'article */
.entry-title,
.entry-title a {
	color: #2D2D2D;
}

/* Slider */
.main-slider .no-slider {
	display: block;
	width: 100%;
	overflow: hidden;
}


/* ======================================================
   2. PERSONNALISATIONS LPDA
   ====================================================== */

/* ======================================================
   PERSONNALISATIONS LPDA — RÉFÉRENCE 12/08/2026
   LPDA CUSTOM STYLES — REFERENCE 2026-08-12
   ====================================================== */

/* EN-TÊTE DU SITE / SITE HEADER */
.top-bar .top-bar-date {
	color: #FAFAF8;
}

topmenu {
	float: right;
}

/* COMPOSANT COIN / CORNER COMPONENT */
.coin {
	background-color: #E4EFFF;
	border: 1px solid #9FC6FF;
	padding: 5px;
	-moz-border-radius: 10px 0;
	-webkit-border-radius: 10px 0;
	border-radius: 10px 0;
}

/* COMPOSANT CHAPÔ / CHAPO COMPONENT */
.chapo-tampon {
	float: right;
	position: relative;
	top: 8px;
	width: 100px;
	height: 100px;
	margin: 0 0 12px 20px;
}

/* TYPOGRAPHIE DES ARTICLES / POST TYPOGRAPHY */
.single-post .entry-content p:not(.chapo) {
	font-size: 16.3px;
	text-align: justify;
}

.single-post .entry-title {
	font-size: 30px;
	line-height: 1.15;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	color: #575B5E;
	font-weight: 500;
}

.single-post .entry-content h2 {
	font-family: "Roboto", sans-serif;
	font-weight: 530;
	margin-top: 32px;
	margin-bottom: 14px;
}

.single-post .entry-content li {
	text-align: justify;
}

.dialogue-citation {
	font-style: italic;
}

.exergue {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 17px;
	font-weight: 400;
	font-style: italic;
	line-height: 1.5;
	color: #A65322;
	margin: 32px 4%;
}

.exergue .auteur {
	display: block;
	color: #333333;
	text-align: right;
	margin: 0px 4%;
}

.exergue-citation {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 17px;
	font-weight: 400;
	font-style: italic;
	line-height: 1.5;
	color: #A65322;
	text-align: justify;
	margin: 32px 4%;
}

.exergue-citation .auteur {
	display: block;
	color: #333333;
	text-align: right;
	margin: 0px 4%;
}

.exergue-lettrine {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 17px;
	font-weight: 400;
	font-style: italic;
	line-height: 1.5;
	color: #A65322;
	text-align: justify;
	margin: 32px 4%;
}

.exergue-lettrine::first-letter {
	float: left;
	font-size: 3.0em;
	line-height: 0.8;
	font-weight: 600;
	font-style: normal;
	color: #1177BB;
	margin: 6px 8px 0 0;
}

.meta-lpda {
	width: 100%;
	border-collapse: collapse;
	border-style: hidden;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16.3px;
	color: #333333;
}

.meta-lpda .meta-label {
	color: #A65322;
}

.meta-lpda td {
	vertical-align: top;
}

h2 + .exergue-citation {
	margin-top: 12px;
}

/* FICHE LIVRE / BOOK SHEET */
.avis-livre {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #5F6364;
	text-align: justify;
}

.fiche-livre {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16.3px;
	font-weight: 400;
	line-height: 1.5;
	color: #333333;
}

.fiche-livre strong {
	color: #5F6364;
	font-weight: 600;
}

.fiche-ligne-double {
	display: flex;
	align-items: center;
	gap: 12px;
}

.fiche-separateur {
	border-left: 1px solid #E8E8E8;
	padding-left: 12px;
}

/* VIDÉO YOUTUBE DANS LES ARTICLES / YOUTUBE VIDEO */
.video-lpda {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.video-lpda iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* =========================================================
   SOURCE D'INFORMATION
   Classe : .source
   Usage : mentionner l'origine d'une information,
   d'une interview ou d'un contenu utilisé dans l'article.
   ========================================================= */

.source {
    display: block;
    width: auto;
    margin-top: 1.5em;
    margin-right: 5%;
    margin-bottom: 1.5em;
    margin-left: 0;
    text-align: right !important;
    font-size: 0.9em;
    font-style: italic;
    color: #575B5E;
}


/* =========================================================
   MISE À JOUR D'UN ARTICLE
   Classe : .mise-a-jour
   Usage : signaler discrètement une information ajoutée
   après la publication initiale de l'article.
   ========================================================= */

.mise-a-jour {
    background: rgba(17, 119, 187, 0.06);
    border-left: 3px solid rgba(17, 119, 187, 0.35);
    border-radius: 17px;
    padding: 14px 18px;
    margin: 28px 4%;
    color: #333333;
}


/* ---------------------------------------------------------
   TITRE DE MISE À JOUR
   Classe : .mise-a-jour-titre
   Exemple : Mise à jour — 12 août 2026
   --------------------------------------------------------- */

.mise-a-jour .mise-a-jour-titre {
    color: #1177BB !important;
    font-weight: 400;
    margin: 0 0 6px 0;
}


/* ---------------------------------------------------------
   LIENS DANS UNE MISE À JOUR
   Usage : conserver les liens dans le bleu LPDA.
   Le comportement au survol reste celui du site.
   --------------------------------------------------------- */

.mise-a-jour a,
.mise-a-jour a:visited {
    color: #1177BB !important;
    text-decoration: underline;
}


/* Dernier paragraphe : suppression de l'espace en bas */

.mise-a-jour p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   APLAT ÉDITORIAL
   Classe : .aplat-editorial
   Usage : anecdote, bon à savoir, expérience vécue...
   Construction graphique inspirée de la presse magazine.
   ========================================================= */

.aplat-editorial {
    display: flex;
    align-items: flex-start;
    width: 92%;
    margin: 36px 4%;
}


/* ---------------------------------------------------------
   CARTOUCHE DE L'APLAT
   Classe : .aplat-etiquette
   Exemples : Ça m'est arrivé / Bon à savoir
   --------------------------------------------------------- */

.aplat-editorial .aplat-etiquette {
    flex: 0 0 120px;
    width: 120px;
    height: 120px;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-left: -30px;
    padding: 14px;

    background: #333333;
    color: #FDFDFD;

    font-weight: 600;
    line-height: 1.2;
    text-align: left;
}


/* ---------------------------------------------------------
   CONTENU DE L'APLAT
   Classe : .aplat-contenu
   --------------------------------------------------------- */

.aplat-editorial .aplat-contenu {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 120px;
    box-sizing: border-box;

    padding: 24px 30px;

    background: rgba(166, 83, 34, 0.08);
    color: #A65322;
}


/* ---------------------------------------------------------
   TITRE DE L'APLAT
   Classe : .aplat-titre
   --------------------------------------------------------- */

.aplat-editorial .aplat-titre {
    margin: 0 0 12px 0;

    color: #A65322;
    font-weight: 600;
    text-align: left;
}


/* ---------------------------------------------------------
   TEXTE DE L'APLAT
   --------------------------------------------------------- */

.aplat-editorial .aplat-contenu p {
    color: #A65322;
    text-align: justify;
}

.aplat-editorial .aplat-contenu p:last-child {
    margin-bottom: 0;
}

/* =========================================================
   DUO D’IMAGES — Deux visuels carrés côte à côte
   Classe : .duo-images
   Usage : présenter deux images de même importance,
   dans deux cadres de dimensions strictement identiques.
   ========================================================= */

.entry-content .duo-images {
    display: flex !important;
    flex-direction: row !important;
    gap: 24px;
    width: 100%;
    margin: 28px 0;
    clear: both;
}

.entry-content .duo-images .duo-image {
    flex: 1 1 0 !important;
    width: 0 !important;
}

.entry-content .duo-images .duo-image img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    float: none !important;
}