/* ===================================================================
   Charte graphique Mathemathieu — STYLES DU CORPS D'ARTICLE

   Ce fichier ne contient que ce qui habille le TEXTE des articles :
   paragraphes, listes, citations, classes couleur. Rien qui touche à
   la page (en-tête, menu, colonnes, pied de page) : cela reste dans
   custom.css.

   POURQUOI CE FICHIER EXISTE, SÉPARÉ DE custom.css
   Il est chargé à deux endroits :
     1. sur le site, par mathemathieu-assets.php, juste avant
        custom.css (qui peut donc toujours le surcharger) ;
     2. dans l'éditeur de l'administration, par editor.css.
   L'éditeur TinyMCE affiche le texte dans une iframe isolée qui ne
   charge qu'un seul fichier, editor.css. Sans ce partage, les articles
   s'écrivaient « en brut » : un encadré .bg-orange n'y apparaissait
   pas orange. Un seul exemplaire des règles pour que les deux vues ne
   divergent jamais.

   Conséquence : toute règle qui doit se voir dans l'éditeur va ici,
   pas dans custom.css.
   =================================================================== */

/* Interligne entre paragraphes : 10px sur l'ancien (template.css l.212),
   contre 1rem = 16px chez Bootstrap. Les 6px d'écart se cumulent à chaque
   paragraphe et étiraient nettement les pages longues. */
p {
    margin: 0 0 10px 0;
}

/* Listes rédigées dans les articles (template.css l.60-68). Bootstrap
   met 1rem de marge et 2rem de retrait. Règle volontairement globale,
   comme sur l'ancien : les listes de composants (menu, fil d'Ariane,
   list-group) portent toutes une classe et gardent donc la main. */
ul, ol {
    margin: 0 0 10px 0;
    padding: 0 0 0 20px;
}

ul ul, ol ul, ul ol, ol ol {
    margin: 6px 0;
    padding: 0 0 0 15px;
}

/* Citations : filet vertical à gauche (template.css l.1198-1217).
   Très utilisé dans les articles migrés (~211 citations).
   Attention à la couleur : la déclaration border-left annonce #eee mais
   un border-color rgba(0,0,0,0.07) la suit et l'emporte — c'est cette
   seconde valeur qui s'affiche réellement sur l'ancien site (vérifié
   sur la page rendue). Cassiopeia ne pose qu'une marge, aucun filet. */
blockquote {
    margin: 0 0 20px;
    padding: 0 0 0 15px;
    border-left: 5px solid rgba(0, 0, 0, 0.07);
}

blockquote p {
    margin-bottom: 0;
    font-size: 110%;
    font-weight: 300;
    line-height: 1.4;
}

blockquote small {
    display: block;
    line-height: 2.5;
    color: #999;
}

blockquote small::before {
    content: "\2014 \00A0";
}

/* ===================================================================
   Classes couleur héritées de joomspirit_99.
   NE PAS SUPPRIMER : utilisées en dur dans le HTML des articles
   migrés (table hb1ap_content), pas seulement décoratives côté
   template — vérifié dans content_import.sql (1672 occurrences).
   Valeurs reprises à l'identique de css/template.css (lignes
   ~1300-1408) de l'ancien template.
   =================================================================== */
.bg-primary,
.bg-success,
.bg-info,
.bg-warning,
.bg-danger,
.bg-white,
.bg-grey,
.bg-black,
.bg-green,
.bg-red,
.bg-orange,
.bg-violet,
.bg-turquoise,
.bg-blue,
.bg-brown {
    padding: 18px;
    margin-bottom: 14px;
}

/* Classes contextuelles héritées de Bootstrap 3 (template.css
   l.1428-1456). Bootstrap 5 réutilise ces mêmes noms avec des couleurs
   vives et saturées, et les déclare en classes utilitaires, donc en
   !important : sans !important en retour, aucune de ces valeurs ne
   passerait, quelle que soit la spécificité.
   Relevé dans les articles migrés : bg-success 35 fois, bg-warning 20,
   bg-info 11, bg-danger 5. bg-primary n'y figure pas mais est fourni
   pour que la série soit complète et utilisable. */
.bg-primary {
    color: #fff;
    background-color: #428bca !important;
}

a.bg-primary:hover {
    background-color: #3071a9 !important;
}

.bg-success {
    background-color: #dff0d8 !important;
}

a.bg-success:hover {
    background-color: #c1e2b3 !important;
}

.bg-info {
    background-color: #056b9e !important;
}

a.bg-info:hover {
    background-color: #afd9ee !important;
}

.bg-warning {
    background-color: #fcf8e3 !important;
}

a.bg-warning:hover {
    background-color: #f7ecb5 !important;
}

.bg-danger {
    background-color: #f2dede !important;
}

a.bg-danger:hover {
    background-color: #e4b9b9 !important;
}

.bg-white { background: #fff; }
.bg-grey { background: #eee; }
.bg-brown { background: #b8b4a9; color: #fff; }
.bg-blue { background: #0099cc; color: #fff; }
.bg-black { background: #000; color: #bbb; }
.bg-green { background: #85b159; color: #fff; }
.bg-turquoise { background: #259b9a; color: #fff; }
.bg-orange { background: #ff9933; color: #fff; }
.bg-red { background: #cc3333; color: #fff; }
.bg-violet { background: #a836c9; color: #fff; }

.bg-white a, .bg-grey a { color: #000; text-decoration: underline; }
.bg-white a:hover, .bg-grey a:hover { color: #000; text-decoration: none; }

.bg-black a, .bg-green a, .bg-red a, .bg-orange a,
.bg-violet a, .bg-turquoise a, .bg-blue a, .bg-brown a {
    color: #fff;
    text-decoration: underline;
}

.bg-black a:hover, .bg-green a:hover, .bg-red a:hover, .bg-orange a:hover,
.bg-violet a:hover, .bg-turquoise a:hover, .bg-blue a:hover, .bg-brown a:hover {
    color: #fff;
    text-decoration: none;
}

.text-muted { color: #999; }
.text-muted a, .text-muted a:hover { color: #444; }

.text-blue { color: #0099cc; }
.text-blue a, .text-blue a:hover { color: #006d91; }

.text-green { color: #85b159; }
.text-green a, .text-green a:hover { color: #58753B; }

.text-orange { color: #ff9933; }
.text-orange a, .text-orange a:hover { color: #B16B22; }

.text-red { color: #cc3333; }
.text-red a, .text-red a:hover { color: #791D1D; }

.text-turquoise { color: #259b9a; }
.text-turquoise a, .text-turquoise a:hover { color: #1A6A69; }

.text-blue a:hover, .text-green a:hover, .text-orange a:hover,
.text-red a:hover, .text-turquoise a:hover, .text-muted a:hover {
    text-decoration: underline;
}

/* ===================================================================
   Blocs de composition d'article — préfixe « mm- »

   Mise en page de contenu (bandeau, carte de présentation, boutons,
   pastilles) sans passer par des tableaux : ceux-ci ne savent pas se
   réorganiser sur petit écran, et une colonne à 11 % écrase l'image
   sur un téléphone.

   Ces règles sont ici, et pas dans custom.css, pour être visibles à la
   rédaction dans TinyMCE (cf. en-tête de ce fichier) ; elles
   apparaissent aussi dans la liste « Styles » de la barre d'outils.
   Rien de global n'est modifié : tout est porté par les classes mm-.
   =================================================================== */

/* --- Largeur de lecture.
   Sans colonne latérale, la page d'accueil occupe les 1200px entiers :
   à 12px de corps, cela fait des lignes de près de 200 caractères, très
   au-delà des 60-90 qui se lisent confortablement. Ce conteneur ramène
   le texte à une largeur lisible, centrée, sans toucher aux autres
   pages (où la colonne fait déjà 960px et où la règle ne change rien). --- */
.mm-page {
    max-width: 980px;
    margin: 0 auto;
}

/* --- Bandeau d'en-tête : image centrée, arrondie.
   La largeur reste celle demandée par l'image elle-même (attribut width
   du module « Image aléatoire », ou taille native) : on se contente de
   l'empêcher de déborder de la colonne. Forcer width:100% écrasait le
   réglage « Largeur (px) » du module, qui n'avait donc plus d'effet. --- */
.mm-banniere {
    margin: 0 0 24px;
}

.mm-banniere img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    border-radius: 10px;
}

/* --- Bloc illustration + texte.
   L'ordre des deux enfants dans le HTML décide du côté de l'image ;
   sous 600px ils s'empilent dans ce même ordre. --- */
.mm-intro,
.mm-duo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Centre l'illustration une fois qu'elle est passée seule sur sa
       ligne (téléphone). Sans effet tant que les deux tiennent côte à
       côte : le texte s'étire alors sur toute la place libre, il ne
       reste rien à répartir. */
    justify-content: center;
    gap: 28px;
    margin: 0 0 20px;
}

/* Hors carte, l'illustration est souvent plus haute que le texte :
   aligner en haut évite le trou au-dessus et au-dessous du texte. */
.mm-duo {
    align-items: flex-start;
}

/* La carte : fond blanc et non teinté, les deux dessins du site ayant
   un fond opaque qui trancherait sur un aplat de couleur. */
.mm-intro {
    padding: 24px 28px;
    background: #fff;
    border: 1px solid #e3e8f0;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Taille de l'illustration : volontairement NON fixée ici, pour que les
   attributs width/height du HTML (ceux que pose TinyMCE quand on
   redimensionne l'image à la souris) continuent de décider. Une
   largeur en CSS les écraserait et il faudrait revenir dans ce fichier
   à chaque réglage.
   max-width évite le débordement sur téléphone, height:auto conserve
   les proportions même si les deux attributs ne sont pas cohérents. */
.mm-intro > img,
.mm-duo > img {
    flex: 0 0 auto;
    max-width: 100%;
    height: auto;
}

.mm-intro__texte,
.mm-duo__texte {
    flex: 1 1 320px;
    min-width: 0;
    line-height: 1.65;
}

.mm-intro__texte > :last-child,
.mm-duo__texte > :last-child {
    margin-bottom: 0;
}

.mm-intro__titre {
    margin: 0 0 10px;
    color: #196BBD;
    font-family: 'Quicksand', sans-serif;
    font-size: 1.9em;
    font-weight: 600;
    line-height: 1.2;
}

/* --- Titre de section dans le corps d'un article.
   Les h2 du site sont réglés pour les titres courants (0.9rem, brun) ;
   cette classe leur donne le calibre d'un intertitre de page. --- */
.mm-titre {
    margin: 30px 0 14px;
    padding-bottom: 8px;
    color: #196BBD;
    font-family: 'Quicksand', sans-serif;
    font-size: 1.5em;
    font-weight: 600;
    border-bottom: 1px solid #e3e8f0;
}

/* --- Encadré d'information (remarque, avertissement léger) --- */
.mm-note {
    margin: 14px 0;
    padding: 12px 16px;
    background: #eef4fb;
    border-left: 4px solid #196BBD;
    border-radius: 8px;
}

/* --- Boutons d'appel à l'action.
   Reprise des valeurs mesurées sur les boutons de l'ancienne page
   d'accueil (SP Page Builder) : fond #444, majuscules, interlettrage
   1px, angles à 4px. Police et taille réalignées sur le nouveau
   template (Quicksand, em plutôt que px).
   La flèche est posée en CSS et non par une balise <i> : TinyMCE
   supprime les balises vides à l'enregistrement. --- */
.mm-boutons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin: 26px 0;
}

.mm-bouton {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 22px;
    background: #444;
    border-radius: 4px;
    color: #fff;
    font-family: 'Quicksand', sans-serif;
    font-size: 1.25em;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.mm-bouton::before {
    content: "\f35a";
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
    font-size: 1.1em;
    line-height: 1;
}

.mm-bouton:hover,
.mm-bouton:focus {
    background: #196BBD;
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}

/* Sur téléphone, les boutons empilés s'élargissent pour offrir une
   cible confortable au doigt, sans toucher les bords de l'écran :
   la marge latérale est portée par le conteneur. */
@media (max-width: 600px) {
    .mm-boutons {
        padding: 0 30px;
    }

    .mm-bouton {
        width: 100%;
        justify-content: center;
    }
}

/* --- Pastilles : énumération de mots-clés (niveaux, thèmes).
   Remplace les longues phrases à rallonge séparées par des virgules. --- */
.mm-pastilles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.mm-pastilles li {
    padding: 5px 13px;
    background: #eef4fb;
    border: 1px solid #dbe6f3;
    border-radius: 999px;
    color: #135391;
    font-weight: 600;
    white-space: nowrap;
}

/* --- Vidéos intégrées (YouTube) -------------------------------------
   Chaque vidéo est enveloppée, dans le corps de l'article, par un <div>
   au style écrit en ligne :
     position:relative; padding-bottom:56.25%; height:0; max-width:100%
   La hauteur y naît du padding. Or un padding en pourcentage se calcule
   sur la largeur de la COLONNE, pas sur celle du div : lui poser un
   simple max-width rétrécirait l'image sans réduire sa hauteur, et la
   déformerait donc. Le procédé est remplacé par aspect-ratio, qui déduit
   la hauteur de la largeur réellement occupée. Le style étant en ligne,
   il faut !important pour le reprendre, quelle que soit la spécificité.

   Le sélecteur s'accroche à ce style en ligne, seul repère commun :
   aucune de ces vidéos ne porte de classe (24 relevées sur les pages de
   cours, toutes identiques), et l'éditeur écrit tantôt « padding-bottom:
   56.25% », tantôt la forme compactée — la sous-chaîne « 56.25% » reste
   intacte dans les deux cas.

   Sous 640px de colonne (téléphone), le max-width ne joue plus et la
   vidéo reprend toute la largeur : l'affichage mobile est inchangé.
   Mesuré : 1180x664 -> 640x360 sur écran 1440, page raccourcie de 17%.

   .mm-video est le même cadre, posé par le plugin « Contenu - Vidéo
   Mathemathieu » sur les articles écrits avec {youtube}IDENTIFIANT{/youtube}.
   Son balisage est propre — ni padding ni hauteur en ligne — donc les
   !important ci-dessous ne le concernent pas, ils ne le gênent pas non plus.
   Les deux écritures partagent volontairement une seule règle : la largeur
   des vidéos du site se change ici, à un seul endroit. */
div[style*="56.25%"],
.mm-video {
    max-width: 640px !important;
    height: auto !important;
    padding-bottom: 0 !important;
    aspect-ratio: 16 / 9;
    margin-inline: auto;
}

.mm-video iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}