:root{--pr-editor-bg:#ffffff;--pr-block-overlay:rgba(0,0,0,.2);--pr-editor-text:#1e1e1e;}
/* ═══════════════════════════════════════════════════════════════════
   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; }

/* ── Alignement des images (vocabulaire WordPress) ───────────────────
      alignleft / alignright / aligncenter / alignnone sont les classes que
      pose la modale de recadrage de l'éditeur (et la barre d'outils TinyMCE).

      Elles ont longtemps été déclarées UNIQUEMENT dans le `content_style` de
      l'éditeur Prepress — c'est-à-dire nulle part sur le site publié. Le
      rendu ne tenait alors qu'à la bonne volonté du thème : les thèmes
      classiques définissent `.alignleft`, les constructeurs de pages
      (Oxygen, Bricks) souvent pas. Une image flottée à gauche dans l'éditeur
      arrivait donc en pleine largeur sur le site, sans habillage.

      Leur place est ICI, dans la feuille que l'éditeur ET le site chargent :
      une seule définition, deux rendus identiques. Le `content_style` ne les
      déclare plus.

      `!important` sur les marges seulement — même règle que .pr-wrap-*
      ci-dessus : c'est la marge que les thèmes écrasent (`img { margin: 0 }`),
      pas le float. */
img.alignleft  { float: left;  margin: 5px 20px 20px 0 !important; max-width: 100%; height: auto; }
img.alignright { float: right; margin: 5px 0 20px 20px !important; max-width: 100%; height: auto; }
img.aligncenter {
    float: none;
    display: block;
    margin: 0 auto 16px !important;
    max-width: 100%;
    height: auto;
}
img.alignnone { float: none; margin: 5px 0 16px !important; max-width: 100%; height: auto; }

/* Sur un téléphone, une image flottée ne laisse qu'une gouttière de texte de
   quelques mots : le flottement est relâché, comme .pr-media plus bas. C'est
   le seul écart assumé avec l'éditeur, qui ne se regarde jamais à 400 px. */
@media (max-width: 480px) {
    img.alignleft, img.alignright {
        float: none;
        display: block;
        margin: 5px 0 16px !important;
    }
}

/* 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;
    /* Hauteurs TOUJOURS égales : chaque colonne s'étire sur la rangée
       (align-self posé par l'éditeur peut l'emporter colonne par colonne). */
    align-items: stretch;
}
.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; }
/* Alignement vertical du CONTENU d'une colonne (classes posées par
   l'éditeur). La colonne elle-même garde TOUJOURS la hauteur de la
   rangée — seul son contenu se positionne à l'intérieur. Classes (et non
   styles inline) : WordPress peut filtrer `display` en inline. */
.pr-cols > .pr-col--v-center { display: flex; flex-direction: column; justify-content: center; }
.pr-cols > .pr-col--v-end { display: flex; flex-direction: column; justify-content: flex-end; }
/* Variantes de répartition (classe modificatrice posée par l'éditeur).
   Sans modificateur = deux colonnes égales — les articles publiés avant
   ces variantes restent inchangés. Déclarées AVANT la media query mobile
   pour que l'empilement en 1 colonne garde le dernier mot. */
.pr-cols--40-60 { grid-template-columns: 2fr 3fr; }
.pr-cols--60-40 { grid-template-columns: 3fr 2fr; }
.pr-cols--3     { grid-template-columns: 1fr 1fr 1fr; }
/* !important : la répartition personnalisée est posée en style INLINE par
   l'éditeur (grid-template-columns) — sans lui, l'empilement mobile serait
   écrasé par ce style inline. */
@media (max-width: 640px) { .pr-cols { grid-template-columns: 1fr !important; } }

/* ── 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: #b4331b;
    color: #fff !important;
    text-decoration: none;
    font-weight: 600;
    padding: 11px 24px;
    border-radius: 8px;
}

/* ── Bouton ─────────────────────────────────────────────────────────── */
/* Même langage visuel que le lien du bloc CTA ci-dessus, mais autonome :
   insérable n'importe où, sans exiger l'encadré qui l'entourait.
   Les couleurs sont écrites en dur comme partout dans cette feuille — elle
   est SERVIE TELLE QUELLE à tous les comptes, le CSS personnalisé du compte
   étant concaténé à sa suite (SettingsController::layoutCss). */
.pr-btn {
    display: inline-block;
    background: #b4331b;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 600;
    line-height: 1.25;
    padding: 12px 26px;
    border-radius: 8px;
    border: none;
}
.pr-btn:hover { filter: brightness(.92); }
/* Le bouton est posé seul dans son paragraphe : c'est ce paragraphe qui porte
   l'alignement, donc les mêmes boutons d'alignement que le reste du texte. */
.pr-btn-line { margin: 1.6em 0; }

/* ── Vidéo YouTube responsive ───────────────────────────────────────── */
.pr-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 2em 0;
    overflow: hidden;
    border-radius: 10px;
    background: #0f172a;
}
.pr-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.pr-video video {
    display: block;
    width: 100%;
    height: auto;
}

/* ── Vidéo à la une ─────────────────────────────────────────────────────
      Rendue par le plugin à la place de l'image à la une : elle occupe
      l'emplacement que le thème réserve à la vignette, sans la marge
      verticale des blocs insérés dans le corps de l'article. */
.pr-video-featured { margin: 0; }
.pr-video-featured video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Vignette de liste : le bloc doit occuper la place que le thème réservait
   à l'image, quelle que soit la façon dont il la lui donne.
   - hauteur imposée par la carte (grilles à tuiles égales) : height:100%
     s'y cale exactement, et le recadrage cover de la vidéo fait le reste ;
   - hauteur libre : height:100% se résout en auto, et c'est l'aspect-ratio
     posé en style inline par le plugin — celui de l'image remplacée — qui
     donne la hauteur, sans déformer la grille.
   Le rayon est hérité de la carte : le 10px des blocs d'article jurerait.
   pointer-events:none parce que la tuile est presque toujours un lien —
   sans contrôles à cliquer, la vidéo n'a aucune raison d'intercepter. */
.pr-video-loop {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: #0f172a;
}
.pr-video-loop video {
    pointer-events: none;
}

/* ── Proportions du bloc vidéo (choisies dans la modale d'insertion) ────
      16/9 (paysage) par défaut via .pr-video. La vidéo remplit le cadre en
      recadrage cover ; le portrait est borné en largeur et centré pour ne
      pas dérouler un écran entier. Les iframes YouTube en mode lecteur
      gardent leur letterbox interne (contrôles visibles obligent) ; en
      arrière-plan, le cover cq-units ci-dessous absorbe tous les ratios. */
.pr-video-r11  { aspect-ratio: 1 / 1; }
.pr-video-r916 {
    aspect-ratio: 9 / 16;
    max-width: min(430px, 100%);
    margin-left: auto;
    margin-right: auto;
}
.pr-video-r219 { aspect-ratio: 21 / 9; }

/* ── Aperçu dans l'éditeur WordPress (Classic/TinyMCE) ─────────────────
      wp-admin ne joue pas les <video> : il les remplace par une vignette
      grise 300x150 (img.mce-object-video) qui cassait le cadre du bloc.
      On la fait remplir le bloc — fond sombre + pictogramme Play. Simple
      aperçu : la vidéo ne joue que sur le site publié. Sans effet sur le
      front (aucun .mce-object n'y existe). */
.pr-video img.mce-object-video,
.pr-video .mce-object-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    border: 0 !important;
    object-fit: cover;
    background: #0f172a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' fill-opacity='.85' d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm-1.8 5.6 5.7 3.4-5.7 3.4z'/%3E%3C/svg%3E") center / 56px 56px no-repeat !important;
}

/* Rond : cercle parfait, recadrage centré, largeur bornée comme le portrait. */
.pr-video-rond {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    max-width: min(430px, 100%);
    margin-left: auto;
    margin-right: auto;
}

/* Short : vertical 9/16 façon YouTube Shorts, plus étroit que le portrait. */
.pr-video-short {
    aspect-ratio: 9 / 16;
    max-width: min(360px, 100%);
    margin-left: auto;
    margin-right: auto;
}

.pr-video-r11 video,
.pr-video-r916 video,
.pr-video-r219 video,
.pr-video-rond video,
.pr-video-short video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pr-video-background {
    /* Pas de hauteur forcée : le bloc garde le 16/9 hérité de .pr-video.
       Une min-height en vw rendait le bloc carré dans une colonne de
       contenu étroite sur grand écran (vidéo horizontale sur-recadrée).
       Le recadrage cover ne sert plus qu'à absorber les sources non 16/9. */
    container-type: size;
}

.pr-video-background video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Vidéo YouTube en arrière-plan : l'iframe 16/9 est surdimensionnée pour
   COUVRIR le bloc (recadrage centré, plus de barres noires) et rendue
   inerte (pointer-events:none) — aucun habillage YouTube n'apparaît, même
   au survol. Navigateurs sans container queries : repli plein cadre 16/9. */
.pr-video-background iframe {
    inset: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    width: max(100%, 177.78cqh);
    height: max(100%, 56.25cqw);
    pointer-events: none;
}

/* ── Sommaire (« Format optimisé ») ─────────────────────────────────────
      Volontairement SOBRE : angles droits, aucun filet de couleur, aucune
      couleur ni transformation appliquée à la typographie (elle reste celle
      de l'article). Le seul ornement est une petite icône grise devant le
      titre — inline en data-URI pour valoir aussi sur les sites WordPress. */
.pr-toc {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 0;
    padding: 18px 22px;
    margin: 1.8em 0;
}
.pr-toc .pr-toc-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 10px;
    font-weight: 600;
}
.pr-toc .pr-toc-title::before {
    content: "";
    flex: none;
    width: 15px;
    height: 15px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13'/%3E%3Cpath d='M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E") no-repeat center / contain;
    opacity: .85;
}
.pr-toc ul { margin: 0; padding-left: 1.15em; }
.pr-toc li { margin: .28em 0; }
.pr-toc ul ul { padding-left: 1em; }
.pr-toc a { text-decoration: none; }
.pr-toc a:hover { text-decoration: underline; }

/* Titres ancrés : la cible ne colle pas au bord haut de la fenêtre (ni sous
   une barre fixe) quand on arrive depuis un lien du sommaire. */
h2[id], h3[id], h4[id] { scroll-margin-top: 90px; }

/* ── Tableaux éditoriaux ────────────────────────────────────────────── */
.pr-table {
    width: 100%;
    /* separate + border-spacing:0 : indispensable pour que l'arrondi des
       gabarits (.pr-style-{clé}) s'applique aux angles du tableau. */
    border-collapse: separate;
    border-spacing: 0;
    margin: 1.8em 0;
    font-size: .96em;
    overflow: hidden;
}
.pr-table th,
.pr-table td {
    border: 1px solid #e2e8f0;
    border-width: 0 1px 1px 0;
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
}
.pr-table tr > *:first-child { border-left-width: 1px; }
.pr-table tr:first-child > * { border-top-width: 1px; }
.pr-table thead th { background: #f8fafc; font-weight: 600; }
.pr-table tbody tr:nth-child(even) td { background: rgba(0, 0, 0, .02); }
/* Un tableau large défile horizontalement au lieu de faire déborder la page. */
@media (max-width: 640px) {
    .pr-table { display: block; overflow-x: auto; }
}

/* ── Séparateur : valeurs de repli (les gabarits .pr-style-{clé} les
      surchargent avec leur propre largeur/épaisseur/couleur) ────────── */
hr.pr-sep {
    width: 75%;
    border: none;
    border-top: 2px solid #e2e8f0;
    margin: 28px auto;
}

/* ── 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;
}
/* Entête en bandeau : posée par l'éditeur en même temps que la couleur de fond
   du titre. Sans elle, un fond d'entête colle le texte au filet du bloc.
   Les marges négatives font filer le bandeau jusqu'aux bords, sous l'arrondi —
   c'est ce qui distingue un bandeau d'une étiquette posée au milieu. */
details.pr-acc--band > summary {
    margin: -14px -20px 0;
    padding: 11px 20px;
    border-radius: 9px 9px 0 0;
}
details.pr-acc--band[open] > summary { margin-bottom: 12px; }

/* 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; }
}

/* ═══════════════════════════════════════════════════════════════════
   Thèmes de mise en page IA (gabarits « Format ») : les règles
   .pr-style-{clé} (arrondis d'images + rappel des couleurs de marque
   dans séparateurs/encadrés/CTA) sont GÉNÉRÉES depuis la BDD par compte
   (SettingsController::accountLayoutCss → FormatTemplate::stylesheet()),
   pour suivre l'ajout/suppression de gabarits en Super-admin et les
   variables --pr-brand-* du compte. Rien de figé ici.
   ═══════════════════════════════════════════════════════════════════ */


/* ══ Gabarits de mise en page (Super-admin) ══ */
.pr-style-optimise img,.pr-style-optimise .pr-box,.pr-style-optimise .pr-note,.pr-style-optimise .pr-cta,.pr-style-optimise .pr-table{border-radius:8px;}
.pr-style-optimise .pr-cols{column-gap:40px;}
.pr-style-optimise hr.pr-sep{width:75%;border:none;border-top:2px solid var(--pr-brand-1,#cbd5e1);margin:28px auto;}
.pr-style-optimise .pr-note,.pr-style-optimise .pr-cta,.pr-style-optimise .pr-toc,.pr-style-optimise .pr-table thead th{background:#f8fafc;background:var(--pr-block-overlay,#f8fafc);color:var(--pr-editor-text,inherit);}
.pr-style-optimise .pr-note{border-left:4px solid var(--pr-brand-1,#932816);}
.pr-style-optimise{--pr-opt-border:color-mix(in srgb,var(--pr-editor-text,#1f2937) 14%,transparent);--pr-opt-muted:color-mix(in srgb,var(--pr-editor-text,#1f2937) 68%,transparent);--pr-opt-surface:color-mix(in srgb,var(--pr-editor-text,#1f2937) 4%,var(--pr-editor-bg,#fff));line-height:1.68;}
.pr-style-optimise p{margin-block:0 1.05em;}
.pr-style-optimise h2{margin-block:2.15em .65em;line-height:1.16;letter-spacing:-.018em;text-wrap:balance;}
.pr-style-optimise h3{margin-block:1.65em .5em;line-height:1.22;letter-spacing:-.01em;text-wrap:balance;}
.pr-style-optimise h4{margin-block:1.35em .4em;line-height:1.28;}
.pr-style-optimise :is(ul,ol){margin-block:.7em 1.25em;padding-inline-start:1.35em;}
.pr-style-optimise li{margin-block:.34em;}
.pr-style-optimise li::marker{color:var(--pr-brand-1,currentColor);}
.pr-style-optimise .pr-toc{margin:2em 0 2.5em;padding:22px 24px;background:var(--pr-opt-surface);border:1px solid var(--pr-opt-border);border-radius:8px;}
.pr-style-optimise .pr-toc .pr-toc-title{margin-bottom:12px;font-size:.78em;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--pr-opt-muted);}
.pr-style-optimise .pr-toc ul{list-style:none;padding-left:0;}
.pr-style-optimise .pr-toc ul ul{padding:.2em 0 0 1.15em;border-left:1px solid var(--pr-opt-border);}
.pr-style-optimise .pr-toc li{margin:.42em 0;}
.pr-style-optimise .pr-toc a{color:inherit;text-decoration-color:color-mix(in srgb,var(--pr-brand-1,currentColor) 35%,transparent);text-underline-offset:.18em;}
.pr-style-optimise .pr-note{margin:2em 0;padding:22px 24px;background:var(--pr-opt-surface);border:1px solid var(--pr-opt-border);border-left:3px solid var(--pr-brand-1,currentColor);box-shadow:none;}
.pr-style-optimise .pr-note>p:first-child strong{display:block;margin-bottom:.25em;font-size:.78em;letter-spacing:.075em;text-transform:uppercase;color:var(--pr-brand-1,inherit);}
.pr-style-optimise .pr-cols{gap:28px;margin:2em 0;}
.pr-style-optimise .pr-col{padding-top:18px;border-top:2px solid var(--pr-opt-border);}
.pr-style-optimise .pr-table{margin:2em 0;font-size:.94em;border:1px solid var(--pr-opt-border);box-shadow:none;}
.pr-style-optimise .pr-table th,.pr-style-optimise .pr-table td{padding:12px 14px;border-color:var(--pr-opt-border);line-height:1.45;}
.pr-style-optimise .pr-table thead th{background:var(--pr-opt-surface);border-bottom:2px solid var(--pr-brand-1,currentColor);font-size:.86em;letter-spacing:.015em;}
.pr-style-optimise hr.pr-sep{width:36%;margin:3em auto;border-top-width:1px;opacity:.6;}
.pr-style-optimise .pr-cta{margin:2.5em 0;padding:26px 28px;text-align:left;background:var(--pr-opt-surface);border:1px solid var(--pr-opt-border);border-radius:8px;box-shadow:none;}
.pr-style-optimise .pr-cta a{display:inline;padding:0;border:0;border-radius:0;background:transparent;color:var(--pr-brand-1,inherit)!important;font-weight:650;text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.16em;}
.pr-style-optimise .pr-cta>p:last-child>a:only-child{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 17px;border-radius:6px;background:var(--pr-brand-1,#932816);color:#fff!important;text-decoration:none;font-size:.92em;line-height:1.25;}
.pr-style-optimise figure{margin-block:2em;}
.pr-style-optimise figcaption{margin-top:.65em;color:var(--pr-opt-muted);font-size:.84em;line-height:1.45;}
@media(max-width:640px){.pr-style-optimise{line-height:1.62}.pr-style-optimise .pr-toc,.pr-style-optimise .pr-note,.pr-style-optimise .pr-cta{padding:18px}.pr-style-optimise h2{margin-top:1.75em}.pr-style-optimise hr.pr-sep{width:56%;margin:2.4em auto}}