/* ==========================================================================
   MEF.CSS
   La mise en forme commune : l'éditeur, sa barre d'outils, et l'affichage
   d'un contenu mis en forme.
   --------------------------------------------------------------------------
   RÔLE      : tout ce que pose l'éditeur commun, et tout ce que porte un
               contenu écrit avec lui — un message, une réponse, un bloc de
               page, un modèle d'e-mail en cours d'écriture.
   CHARGÉE   : par chaque écran qui affiche l'éditeur, et par chaque écran
               qui affiche un contenu écrit avec lui.
   DÉPEND DE : base.css (variables de la charte, .is-hidden, la
               visionneuse d'image).
   SOURCE    : l'éditeur du forum des tests (octobre 2026), dont cette
               feuille reprend l'habillage sous des noms neutres.
   NB        : ⚠️ LES CLASSES DE MISE EN FORME (« mef-titre-1 »,
               « mef-color-rouge »…) sont posées côté serveur d'après une
               liste fermée : en ajouter une se fait DES DEUX CÔTÉS, sinon
               elle disparaît à l'enregistrement.
               ⚠️ LES COULEURS VIVENT À DEUX ENDROITS : ici, et dans la
               liste des choix côté serveur, qui reconnaît ce que le
               navigateur écrit. Changer une teinte ici seulement ferait
               voir une couleur en écrivant et une autre une fois publié.
   ========================================================================== */

/* --------------------------------------------------------------------------
   L'ÉDITEUR
   -------------------------------------------------------------------------- */
.mef-editor {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: #fff;
    margin-bottom: 1rem;
}

.mef-editor:focus-within {
    border-color: var(--brand-primary);
}

.mef-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem;
    padding: 0.4rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-soft);
    border-radius: var(--r-md) var(--r-md) 0 0;
}

.mef-tool {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 2.2rem;
    height: 2.2rem;
    padding: 0 0.6rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--brand-brown);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    justify-content: center;
}

.mef-tool:hover {
    background: #fff;
    border-color: var(--border);
}

.mef-tool.is-active {
    background: var(--brand-primary);
    color: var(--brand-brown);
}

.mef-tool:focus-within,
.mef-tool:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 1px;
}

/* Un outil masqué au départ (les émojis, sans souris) : la règle commune
   de masquage ne suffit pas, .mef-tool déclarant son propre display. */
.mef-tool.is-hidden {
    display: none;
}

/* Un outil désactivé : en mode code source, la mise en forme ne
   s'applique plus à rien. */
.mef-tool:disabled,
.mef-select:disabled {
    opacity: 0.4;
    cursor: default;
}

.mef-toolbar-sep {
    width: 1px;
    height: 1.4rem;
    margin: 0 0.3rem;
    background: var(--border);
}

/* Le champ de fichier reste dans le libellé, mais invisible : c'est le
   libellé entier qui ouvre le sélecteur. */
.mef-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.mef-area {
    min-height: 8rem;
    max-height: 60vh;
    overflow-y: auto;
    padding: 0.9rem 1rem;
    line-height: 1.6;
    outline: none;
    overflow-wrap: anywhere;
}

.mef-area > :first-child {
    margin-top: 0;
}

.mef-area.is-empty::before {
    content: attr(data-placeholder);
    color: var(--brand-muted);
    pointer-events: none;
}

.mef-editor-help {
    margin: 0;
    padding: 0 1rem 0.8rem;
}

.mef-editor-status {
    margin: 0;
    padding: 0 1rem 0.8rem;
    font-size: 0.9rem;
    color: var(--error-text);
}

.mef-editor-status.is-ok {
    color: var(--brand-muted);
}

/* --------------------------------------------------------------------------
   LE MODE CODE SOURCE
   La zone mise en forme et la zone de code ne sont jamais visibles
   ensemble : l'éditeur porte .is-source quand la seconde est affichée.
   -------------------------------------------------------------------------- */
.mef-source {
    display: none;
    box-sizing: border-box;
    width: 100%;
    min-height: 16rem;
    padding: 0.9rem 1rem;
    border: 0;
    background: #fbfaf8;
    color: var(--brand-ink);
    font-family: "Courier New", monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    resize: vertical;
    outline: none;
}

.mef-editor.is-source .mef-source {
    display: block;
}

.mef-editor.is-source .mef-area {
    display: none;
}

.mef-source-toggle {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--brand-brown);
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   LA PETITE SAISIE D'UN BOUTON OU D'UN ENCADRÉ
   Elle s'ouvre sous la barre, dans l'éditeur, sans fenêtre du navigateur.
   -------------------------------------------------------------------------- */
.mef-dialog {
    display: grid;
    gap: 0.6rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--border);
    background: #fffaf5;
}

.mef-dialog.is-hidden {
    display: none;
}

.mef-dialog-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   MISE EN FORME D'UN CONTENU
   Les classes posées côté serveur, d'après une liste fermée. Elles servent
   DEUX fois : dans le contenu affiché, et dans la zone d'écriture quand un
   contenu est rouvert pour être modifié.

   ⚠️ PENDANT L'ÉCRITURE, le navigateur affiche sa propre mise en forme
   (balises et styles) : les règles « .mef-area h3 », « font[size] »…
   l'alignent sur celle du contenu publié.

   ⚠️ :where() RAMÈNE « .mef-area h3 » AU POIDS D'UNE SIMPLE CLASSE. Sans
   lui, la balise ajoutait du poids, et cette règle l'emportait dans la
   zone d'écriture sur l'alignement, la couleur ou la police posés sur le
   titre entier : corrects une fois publiés, invisibles en écrivant. À
   poids égal, ce sont les classes écrites plus bas qui gagnent.
   -------------------------------------------------------------------------- */
.mef-titre-1,
.mef-area :where(h3) {
    margin: 1rem 0 0.4rem;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--brand-brown);
}

.mef-titre-2,
.mef-area :where(h4) {
    margin: 0.9rem 0 0.35rem;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--brand-brown);
}

.mef-align-center {
    text-align: center;
}

.mef-align-right {
    text-align: right;
}

.mef-align-justify {
    text-align: justify;
}

.mef-font-site {
    font-family: inherit;
}

.mef-font-georgia {
    font-family: Georgia, serif;
}

.mef-font-arial {
    font-family: Arial, Helvetica, sans-serif;
}

.mef-font-courier {
    font-family: "Courier New", monospace;
}

.mef-font-manuscrite {
    font-family: "Segoe Script", "Bradley Hand", cursive;
}

.mef-size-petit,
.mef-area font[size="2"] {
    font-size: 0.85em;
}

.mef-size-normal,
.mef-area font[size="3"] {
    font-size: 1em;
}

.mef-size-grand,
.mef-area font[size="4"] {
    font-size: 1.25em;
}

.mef-size-tres-grand,
.mef-area font[size="5"] {
    font-size: 1.6em;
}

.mef-color-auto {
    color: var(--brand-ink);
}

.mef-color-marron {
    color: #5b3721;
}

.mef-color-orange {
    color: #e88c2f;
}

.mef-color-rouge {
    color: #c0392b;
}

.mef-color-rose {
    color: #c2185b;
}

.mef-color-violet {
    color: #7b3fa0;
}

.mef-color-bleu {
    color: #1f5fa8;
}

.mef-color-vert {
    color: #2e7d32;
}

.mef-color-gris {
    color: #6b5e55;
}

.mef-bg-aucun {
    background-color: transparent;
}

.mef-bg-jaune {
    background-color: #fff176;
}

.mef-bg-vert {
    background-color: #c8e6c9;
}

.mef-bg-bleu {
    background-color: #bbdefb;
}

.mef-bg-rose {
    background-color: #f8bbd0;
}

.mef-bg-orange {
    background-color: #ffe0b2;
}

.mef-bg-gris {
    background-color: #e0e0e0;
}

/* --------------------------------------------------------------------------
   L'IMAGE D'UN MESSAGE
   Même gabarit que les images des messages d'avant : une vignette, qui
   s'ouvre en grand dans la visionneuse.
   -------------------------------------------------------------------------- */
.mef-image {
    display: block;
    max-width: 220px;
    max-height: 220px;
    width: auto;
    height: auto;
    margin: 0.7rem 0;
    border-radius: 12px;
    border: 1px solid rgba(91, 55, 33, 0.14);
    box-shadow: 0 8px 18px rgba(18, 18, 18, 0.08);
    object-fit: contain;
    cursor: zoom-in;
}

/* --------------------------------------------------------------------------
   LE BOUTON ET LES ENCADRÉS D'UN MODÈLE D'E-MAIL
   Leur rendu ici n'est qu'un aperçu pendant l'écriture : le courrier
   reçoit des tableaux à styles écrits, fabriqués à l'envoi. Les couleurs
   sont celles du courrier, pour que l'aperçu ne mente pas.
   -------------------------------------------------------------------------- */
.mef-bouton {
    margin: 1.2rem 0;
    text-align: center;
}

.mef-bouton a {
    display: inline-block;
    padding: 0.8rem 1.4rem;
    border-radius: 14px;
    background: #f4a12e;
    color: #000;
    font-weight: 700;
    text-decoration: none;
}

.mef-encadre {
    margin: 1rem 0;
    padding: 0.8rem 1.2rem;
    border-left: 5px solid #f4a12e;
    border-radius: 0 10px 10px 0;
    background: #fff6ee;
    color: #5b3721;
}

.mef-encadre > :first-child {
    margin-top: 0;
}

.mef-encadre > :last-child {
    margin-bottom: 0;
}

.mef-encadre-gris {
    border: 1px solid #dddddd;
    border-radius: 10px;
    background: #f5f5f5;
    color: #444444;
}

.mef-encadre-rouge {
    border-left-color: #9a1f1f;
    background: #fff1f1;
    color: #7a1414;
}

.mef-encadre-code {
    border: 1px solid #cfcfce;
    border-radius: 10px;
    background: #f5f5f5;
    color: #222222;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 6px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   UN CONTENU AFFICHÉ
   L'enveloppe d'un message ou d'une réponse, une fois publié.
   -------------------------------------------------------------------------- */
.mef-content {
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.mef-content > :first-child {
    margin-top: 0;
}

.mef-content > :last-child {
    margin-bottom: 0;
}

.mef-content a {
    color: var(--brand-brown);
}

.mef-content a:hover {
    color: var(--brand-primary);
}

/* --------------------------------------------------------------------------
   MENUS ET PALETTES DE LA BARRE D'OUTILS
   -------------------------------------------------------------------------- */
.mef-select {
    height: 2.2rem;
    max-width: 10rem;
    padding: 0 0.4rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--brand-brown);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.mef-select:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 1px;
}

.mef-palette-wrap {
    position: relative;
    display: inline-flex;
}

.mef-palette {
    position: absolute;
    top: calc(100% + 0.3rem);
    left: 0;
    z-index: 31;
    display: grid;
    grid-template-columns: repeat(5, 1.7rem);
    gap: 0.35rem;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.mef-palette.is-hidden {
    display: none;
}

.mef-swatch {
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    cursor: pointer;
}

.mef-swatch:hover,
.mef-swatch:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 1px;
}

/* « Aucun » surlignage : un rond blanc barré. */
.mef-swatch--bg-aucun {
    background: linear-gradient(135deg, #fff 45%, #c0392b 45%, #c0392b 55%, #fff 55%);
}

.mef-swatch--color-auto { background: #121212; }
.mef-swatch--color-marron { background: #5b3721; }
.mef-swatch--color-orange { background: #e88c2f; }
.mef-swatch--color-rouge { background: #c0392b; }
.mef-swatch--color-rose { background: #c2185b; }
.mef-swatch--color-violet { background: #7b3fa0; }
.mef-swatch--color-bleu { background: #1f5fa8; }
.mef-swatch--color-vert { background: #2e7d32; }
.mef-swatch--color-gris { background: #6b5e55; }
.mef-swatch--bg-jaune { background: #fff176; }
.mef-swatch--bg-vert { background: #c8e6c9; }
.mef-swatch--bg-bleu { background: #bbdefb; }
.mef-swatch--bg-rose { background: #f8bbd0; }
.mef-swatch--bg-orange { background: #ffe0b2; }
.mef-swatch--bg-gris { background: #e0e0e0; }

/* --------------------------------------------------------------------------
   ÉMOJIS
   Le bouton est masqué au départ et n'apparaît que sur un ordinateur avec
   souris : le script retire alors .is-hidden.
   -------------------------------------------------------------------------- */
.mef-emoji-panel {
    position: absolute;
    top: 3rem;
    left: 0.4rem;
    z-index: 30;
    width: min(24rem, calc(100% - 0.8rem));
    padding: 0.4rem;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    font-size: 0.9rem;
    color: var(--brand-muted);
}

.mef-emoji-panel.is-hidden {
    display: none;
}

.mef-emoji-panel emoji-picker {
    width: 100%;
    height: 22rem;
    --num-columns: 9;
    --border-size: 0;
    --indicator-color: var(--brand-primary);
}

/* --------------------------------------------------------------------------
   LE CADRE : LA ZONE D'ÉCRITURE POSÉE DANS LE DOCUMENT RÉEL
   (octobre 2026)
   L'éditeur des newsletters pose ses deux zones dans la newsletter elle-même,
   entre son en-tête et son pied. La zone n'a alors ni bordure, ni marge, ni
   police à elle : elle prend celles de la cellule qui l'accueille, pour
   montrer le texte tel qu'il partira. Un liseré pointillé dit seulement où
   l'on écrit.
   En mode code source, le cadre entier s'efface : les zones de code le
   remplacent, une par zone, chacune sous son titre.
   -------------------------------------------------------------------------- */
.mef-frame {
    overflow-x: auto;
    background: #F4F4F4;
}

.mef-area.mef-area--cadre {
    min-height: 4rem;
    max-height: none;
    overflow: visible;
    padding: 0;
    line-height: inherit;
    outline: 1px dashed rgba(91, 55, 33, 0.25);
    outline-offset: 4px;
}

.mef-area.mef-area--cadre:focus {
    outline: 2px dashed var(--brand-primary);
}

.mef-editor.is-source .mef-frame {
    display: none;
}

.mef-source-label {
    display: none;
    margin: 0;
    padding: 0.6rem 1rem 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--brand-brown);
}

.mef-editor.is-source .mef-source-label {
    display: block;
}

/* --------------------------------------------------------------------------
   TÉLÉPHONE
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .mef-tool-label {
        display: none;
    }
}