/* ═══════════════════════════════════════════════════════════════════
   Prepress — mises en page éditoriales (menu « Mise en page » TinyMCE)

   Cette feuille est LA base commune. Depuis le plugin ≥ 2.15.0, chaque
   compte a sa propre feuille servie par la route /css/layout/{token}.css
   (SettingsController::accountLayoutCss) : ce fichier + le CSS
   personnalisé du compte (Réglages → Branding). Elle est chargée par
   l'iframe TinyMCE de l'éditeur Prepress (content_css), par le front
   des sites WordPress (print_layout_styles) et par leurs éditeurs
   Classic et Gutenberg. Cache serveur 15 min : les modifications ici
   et dans le CSS personnalisé se propagent sans mise à jour du plugin.
   Fallback du plugin sans URL de compte : ce fichier servi statiquement
   (?v= quotidien).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Média + texte : image en colonne fixe, texte à côté, jamais de
      retour du texte sous l'image (grid 2 colonnes) ─────────────────── */
.pr-media {
    display: grid;
    /* fit-content : la colonne suit la taille donnée à l'image (poignées de
       redimensionnement TinyMCE), plafonnée à 45 % de la largeur. */
    grid-template-columns: fit-content(45%) 1fr;
    column-gap: 24px;
    align-items: start;
    margin: 1.4em 0;
}
.pr-media > img {
    grid-column: 1;
    grid-row: 1 / span 40;
    /* PAS de règle width : l'attribut width="…" posé par les poignées de
       redimensionnement TinyMCE doit s'appliquer (toute règle CSS width,
       même auto, l'écraserait). */
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 0;
}
.pr-media > *:not(img) { grid-column: 2; }
.pr-media > h2:first-of-type,
.pr-media > h3:first-of-type,
.pr-media > p:first-of-type { margin-top: 0; }

.pr-media-right { grid-template-columns: 1fr fit-content(45%); }
.pr-media-right > img { grid-column: 2; }
.pr-media-right > *:not(img) { grid-column: 1; }

/* ── Habillage : le texte entoure l'image (float normalisé) ─────────── */
img.pr-wrap-left  { float: left;  margin: 6px 24px 14px 0 !important; max-width: 45%; height: auto; border-radius: 8px; }
img.pr-wrap-right { float: right; margin: 6px 0 14px 24px !important; max-width: 45%; height: auto; border-radius: 8px; }

/* Image flottante en tête d'un encadré ou d'un CTA : l'image ET l'élément
   qui la suit démarrent alignés en haut (sinon la marge haute du titre crée
   un vilain décalage vertical). Trois variantes de HTML couvertes :
   classe pr-wrap-*, styles inline hérités, image enveloppée dans un <p>. */
.pr-box > img:first-child,
.pr-cta > img:first-child { margin-top: 0 !important; }
.pr-box > img:first-child + *,
.pr-cta > img:first-child + * { margin-top: 0 !important; }
/* Image encore dans son <p> d'insertion : neutraliser la ligne fantôme du
   paragraphe et la marge du titre qui suit. */
.pr-box > p:first-child:has(> img:only-child),
.pr-cta > p:first-child:has(> img:only-child) { margin: 0; line-height: 0; }
.pr-box > p:first-child:has(> img:only-child) + *,
.pr-cta > p:first-child:has(> img:only-child) + * { margin-top: 0 !important; }

/* ── Encadrés ───────────────────────────────────────────────────────── */
.pr-box {
    display: flow-root;
    margin: 1.8em 0;
}
.pr-box > :first-child { margin-top: 0; }
.pr-box > :last-child { margin-bottom: 0; }
/* « À retenir » : même carte que le bloc CTA, texte aligné à gauche. */
.pr-note {
    text-align: left;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 26px 30px;
}

/* ── Séparateur (menu Mise en page — modifiable par double-clic) ────── */
hr.pr-sep {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 28px auto;
}
/* Variante « espace vide » : aucun trait, la hauteur inline fait l'espace. */
hr.pr-sep-space {
    border: none;
    background: transparent;
}

/* ── Images du contenu ──────────────────────────────────────────────── */
/* Les img insérées par TinyMCE portent des width/height fixes : sans
   garde-fou elles débordent des encadrés et colonnes (et de l'écran en
   mobile) quand le thème WP ne contraint pas les images du contenu.
   height:auto préserve le ratio malgré l'attribut height. */
.pr-box img, .pr-cta img, .pr-media img, .pr-cols img, .pr-2col img {
    max-width: 100%;
    height: auto;
}

/* ── Deux colonnes (legacy) ─────────────────────────────────────────── */
/* Ancien bloc à colonnes CSS (texte en flux continu) : conservé pour les
   articles publiés avant juillet 2026. L'éditeur n'insère plus ce format. */
.pr-2col {
    columns: 2;
    column-gap: 40px;
    margin: 1.4em 0;
}
.pr-2col > * { break-inside: avoid; }
.pr-2col > :first-child { margin-top: 0; }
@media (max-width: 640px) { .pr-2col { columns: 1; } }

/* ── Deux colonnes (grille) ─────────────────────────────────────────── */
/* Deux div .pr-col indépendantes côte à côte : chaque colonne est stylable
   séparément (fond, bordure, arrondi, padding posés en styles inline par
   l'éditeur). La structure (grid, gap, empilement mobile) reste pilotée
   ici : ne PAS la passer en inline, WordPress peut filtrer display selon
   les droits de l'utilisateur de publication. */
.pr-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 40px;
    margin: 1.4em 0;
}
.pr-cols > .pr-col { min-width: 0; }
.pr-cols > .pr-col > :first-child { margin-top: 0; }
.pr-cols > .pr-col > :last-child { margin-bottom: 0; }
@media (max-width: 640px) { .pr-cols { grid-template-columns: 1fr; } }

/* ── Bloc CTA ───────────────────────────────────────────────────────── */
.pr-cta {
    display: flow-root;
    text-align: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 26px 30px;
    margin: 1.8em 0;
}
.pr-cta > :first-child { margin-top: 0; }
.pr-cta > :last-child { margin-bottom: 0; }
.pr-cta a {
    display: inline-block;
    background: #7c3aed;
    color: #fff !important;
    text-decoration: none;
    font-weight: 600;
    padding: 11px 24px;
    border-radius: 8px;
}

/* ── Accordéons (details/summary — plugin accordion TinyMCE) ────────── */
details.mce-accordion,
.pr-content details,
.entry-content details,
article details {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 20px;
    margin: 0.9em 0;
    background: #fff;
}
details.mce-accordion summary,
.pr-content details summary,
.entry-content details summary,
article details summary {
    font-weight: 600;
    cursor: pointer;
}
details.mce-accordion[open] summary,
.pr-content details[open] summary,
.entry-content details[open] summary,
article details[open] summary {
    margin-bottom: 10px;
}

/* Responsive : le média repasse en pile sur petit écran */
@media (max-width: 560px) {
    .pr-media, .pr-media-right { display: block; }
    .pr-media > img, .pr-media-right > img { max-width: 100%; margin-bottom: 12px !important; }
}