/* ===================================================================== BLOCS D'ARTICLE e-potto — styles partagés (front + éditeur) Chargé sur le front ET dans l'éditeur (add_editor_style) → WYSIWYG. Tout le décor (pastilles, fanions, numéros, ✓/✕) est dessiné en CSS : l'auteur ne remplit que le texte. ===================================================================== */ @font-face{font-family:'SN Pro';src:url('../fonts/SNPro.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:'SN Pro';src:url('../fonts/SNPro-Italic.ttf') format('truetype');font-weight:100 900;font-style:italic;font-display:swap} @font-face{font-family:'Host Grotesk';src:url('../fonts/HostGrotesk.ttf') format('truetype');font-weight:300 800;font-style:normal;font-display:swap} @font-face{font-family:'Host Grotesk';src:url('../fonts/HostGrotesk-Italic.ttf') format('truetype');font-weight:300 800;font-style:italic;font-display:swap} :root{ --ink:#1C1A17; --body:#2A2721; --sec:#57534A; --sec2:#6E6A60; --muted:#9C978B; --blue:#4682B4; --blue-t1:#E9F1F7; --blue-t2:#EDF3F8; --blue-t3:#DBE7F0; --green:#2E7D4F; --green-tx:#1F5B3A; --red:#D63A2B; --red-t:#FBEFEE; --line:#EAE8E2; --line2:#F0EFEA; --line3:#E3E1DB; --serif:'SN Pro',system-ui,sans-serif; --sans:'Host Grotesk',system-ui,sans-serif; } /* icônes SVG encodées */ :root{ --ico-star-white:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2.6l3.1 6.3 6.9.9-5.1 4.8 1.3 6.8-6.2-3.4-6.2 3.4 1.3-6.8L2 9.8l6.9-.9z'/%3E%3C/svg%3E"); --ico-star-blue:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234682B4'%3E%3Cpath d='M12 2.6l3.1 6.3 6.9.9-5.1 4.8 1.3 6.8-6.2-3.4-6.2 3.4 1.3-6.8L2 9.8l6.9-.9z'/%3E%3C/svg%3E"); --ico-warn-red:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D63A2B'%3E%3Cpath fill-rule='evenodd' d='M12 2.4c.52 0 1 .27 1.27.72l9.2 15.9c.55.95-.13 2.13-1.23 2.13H2.76c-1.1 0-1.78-1.18-1.23-2.13l9.2-15.9c.27-.45.75-.72 1.27-.72zm0 6.1c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1s1-.45 1-1v-4c0-.55-.45-1-1-1zm0 8.2a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4z'/%3E%3C/svg%3E"); } /* espacement vertical commun des blocs dans le corps d'article */ .ep-essential,.ep-note,.ep-steps,.ep-prcon,.ep-quote,.ep-comparo,.ep-figures,.ep-specs,.ep-faq,.ep-gallery{margin:40px 0} /* neutralise les marges auto que WordPress (flow layout) injecte entre enfants : c'est le CSS des blocs qui pilote l'espacement interne. */ .ep-essential>*,.ep-note>*,.ep-steps>*,.ep-step>*,.ep-figures>*,.ep-faq>*{margin-block:0} .ep-steps .ep-step,.ep-faq details{margin-top:0;margin-bottom:0} /* --------------------------------------------------------------------- 1. L'essentiel à retenir --------------------------------------------------------------------- */ .ep-essential{position:relative;background:var(--blue-t2);border-radius:16px;padding:28px 32px 26px 106px} .ep-essential::before{content:"";position:absolute;left:32px;top:0;width:46px;height:58px;background:var(--blue);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%)} .ep-essential::after{content:"";position:absolute;left:45px;top:14px;width:19px;height:19px;background:var(--ico-star-white) center/contain no-repeat} .ep-essential .ep-label,.ep-essential>h2,.ep-essential>h3,.ep-essential>h4{font-family:var(--sans);font-size:17px;font-weight:700;color:var(--blue);margin:0 0 10px} .ep-essential ul,.ep-essential ol{margin:0;padding-left:20px;font-size:16px;line-height:1.7;color:var(--body)} .ep-essential li{margin-bottom:8px} .ep-essential li:last-child{margin-bottom:0} /* --------------------------------------------------------------------- 2/3/4. Encadrés « Bon à savoir » / « À retenir » / « Important » --------------------------------------------------------------------- */ .ep-note{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 2px 10px -6px rgba(28,26,23,.12);padding:26px 30px 26px 100px;min-height:104px;display:flex;flex-direction:column;justify-content:center} .ep-note::before{content:"";position:absolute;left:30px;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:var(--blue-t1)} .ep-note::after{content:"i";position:absolute;left:30px;top:50%;transform:translateY(-50%);width:52px;height:52px;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;font-weight:700;font-size:24px;color:var(--blue);line-height:1} .ep-note .ep-label,.ep-note>h2,.ep-note>h3,.ep-note>h4{font-family:var(--sans);font-size:14.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin:0 0 8px} .ep-note p{font-size:16.5px;line-height:1.6;color:var(--body);margin:0} /* variante « À retenir » (conclusion) : pastille étoile */ .ep-note--star::after{content:"";background:var(--ico-star-blue) center/22px no-repeat} /* variante « Important » : fond rouge, pastille blanche, triangle d'alerte */ .ep-note--alert{background:var(--red-t);border:none;box-shadow:none} .ep-note--alert::before{background:#fff} .ep-note--alert::after{content:"";background:var(--ico-warn-red) center/22px no-repeat} .ep-note--alert .ep-label,.ep-note--alert>h2,.ep-note--alert>h3,.ep-note--alert>h4{color:var(--red)} /* --------------------------------------------------------------------- 5. Étapes numérotées (timeline) --------------------------------------------------------------------- */ .ep-steps{counter-reset:ep-step} .ep-step{position:relative;counter-increment:ep-step;padding:2px 0 26px 54px} .ep-step:last-child{padding-bottom:0} .ep-step::before{content:counter(ep-step);position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14.5px;font-weight:700;z-index:1} .ep-step::after{content:"";position:absolute;left:16px;top:40px;bottom:2px;width:2px;background:var(--blue-t3)} .ep-step:last-child::after{display:none} .ep-step h2,.ep-step h3,.ep-step h4,.ep-step .ep-step-title{font-family:var(--sans);font-size:16.5px;font-weight:700;color:var(--ink);margin:0} .ep-step p{font-size:15.5px;line-height:1.6;color:var(--sec);margin:5px 0 0} /* --------------------------------------------------------------------- 6. Points forts / points faibles --------------------------------------------------------------------- */ .ep-prcon{border:1px solid var(--line3);border-radius:16px;padding:28px 32px} .ep-prcon .wp-block-columns{gap:0 44px!important;margin:0} .ep-prcon .wp-block-column:first-child{border-right:1px solid var(--line2);padding-right:44px} .ep-prcon .ep-prcon-title{font-weight:700;font-size:16px;padding-left:12px;margin:0 0 14px} .ep-pro .ep-prcon-title{color:var(--green);border-left:3px solid var(--green)} .ep-con .ep-prcon-title{color:var(--red);border-left:3px solid var(--red)} .ep-prcon ul{list-style:none;margin:0;padding:0} .ep-prcon li{position:relative;padding:11px 0 11px 26px;border-bottom:1px solid var(--line2);font-size:15px;line-height:1.45;color:var(--body)} .ep-prcon li::before{position:absolute;left:0;top:11px;font-weight:700} .ep-pro li::before{content:"\2713";color:var(--green)} .ep-con li::before{content:"\2715";color:var(--red)} /* --------------------------------------------------------------------- 7. Citation --------------------------------------------------------------------- */ .ep-quote{border-left:3px solid var(--blue);padding:4px 0 4px 24px;margin-left:0;margin-right:0} .ep-quote p{font-style:italic;font-size:18.5px;font-weight:400;line-height:1.7;color:var(--body);margin:0;text-wrap:pretty} .ep-quote cite{display:block;font-style:normal;font-size:14px;color:var(--sec);margin-top:12px} /* --------------------------------------------------------------------- 8. Tableau comparatif --------------------------------------------------------------------- */ .ep-comparo{overflow-x:auto} .ep-comparo table{border-collapse:collapse;width:100%;min-width:520px;background:transparent} .ep-comparo thead th{background:var(--ink);color:#fff;text-transform:uppercase;font-size:10.5px;letter-spacing:.05em;font-weight:700;padding:13px 14px;text-align:left;border:none} .ep-comparo thead th:first-child{border-radius:10px 0 0 0} .ep-comparo thead th:last-child{border-radius:0 10px 0 0} .ep-comparo tbody td{padding:13px 14px;font-size:14.5px;color:var(--body);border-bottom:1px solid var(--line2)} .ep-comparo tbody tr:nth-child(even){background:#FAFAF8} .ep-comparo tbody td:first-child{font-weight:600;color:var(--sec)} .ep-comparo figcaption,.ep-comparo .wp-element-caption{font-size:12px;color:var(--sec2);margin-top:12px;text-align:left} /* --------------------------------------------------------------------- 9. En chiffres (deux repères) --------------------------------------------------------------------- */ .ep-figures .wp-block-columns{gap:0 44px!important;margin:0} .ep-figures .ep-fig-title{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin:0 0 6px} .ep-figures table{width:100%;border-collapse:collapse;border-top:2.5px solid var(--ink);margin-top:10px} .ep-figures td{padding:12px 2px;font-size:14.5px;border-bottom:1px dotted #D8D6CF} .ep-figures td:first-child{font-weight:600;color:var(--body)} .ep-figures td:last-child{text-align:right;font-weight:700;color:var(--ink)} .ep-figures figcaption,.ep-figures .wp-element-caption,.ep-figures .ep-fig-source{font-size:10.5px;color:var(--muted);margin-top:14px} /* --------------------------------------------------------------------- 10. Fiche technique --------------------------------------------------------------------- */ .ep-specs table{width:100%;border:1px solid var(--line);border-radius:14px;border-collapse:separate;border-spacing:0;overflow:hidden;background:#fff} .ep-specs td{padding:14px 22px;border-bottom:1px solid var(--line2);font-size:15px;vertical-align:middle} .ep-specs tr:last-child td{border-bottom:none} .ep-specs td:first-child{color:var(--body);font-weight:500} .ep-specs td:first-child::before{content:"";display:inline-block;width:9px;height:9px;border-radius:2px;background:var(--blue);margin-right:13px;vertical-align:middle} .ep-specs td:last-child{text-align:right;font-weight:700;color:var(--ink)} /* --------------------------------------------------------------------- 11. FAQ (core/details) --------------------------------------------------------------------- */ .ep-faq details{border-bottom:1px solid var(--line)} .ep-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 2px;font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--ink)} .ep-faq summary::-webkit-details-marker{display:none} .ep-faq summary::after{content:"+";font-size:22px;color:var(--blue);font-weight:400;line-height:1;flex-shrink:0} .ep-faq details[open] summary::after{content:"\2013"} .ep-faq details>*:not(summary){font-size:16.5px;line-height:1.65;color:var(--body);margin:0 2px 20px} /* --------------------------------------------------------------------- 12. Galerie --------------------------------------------------------------------- */ .ep-gallery.wp-block-gallery{gap:16px} .ep-gallery.wp-block-gallery figure,.ep-gallery .wp-block-image{border-radius:12px;overflow:hidden} .ep-gallery.wp-block-gallery img{border-radius:12px} /* ===================================================================== v1.1 — Comparatif & « En chiffres » plus proches de la maquette. Cellule/valeur "gagnante" = texte mis en GRAS par l'auteur (→ surligné + ✓). ===================================================================== */ .ep-comparo table{border-collapse:separate;border-spacing:8px 0;min-width:540px} .ep-comparo thead th{background:transparent;color:var(--sec);text-transform:uppercase;font-size:11px;letter-spacing:.04em;font-weight:700;padding:12px 16px;text-align:left;vertical-align:bottom;border:none;border-radius:0} .ep-comparo thead th:first-child{color:var(--sec);border-bottom:1px solid var(--line2)} .ep-comparo thead th:nth-child(2){color:#1F5B3A;background:#EAF4EE;border:1px solid #CDE7D8;border-radius:12px 12px 0 0} .ep-comparo thead th:nth-child(3){color:#B26F0E;background:#FBF1DF;border:1px solid #F0DFBE;border-radius:12px 12px 0 0} .ep-comparo thead th:nth-child(2)::after{content:"";display:inline-block;width:12px;height:12px;margin-left:7px;vertical-align:-1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231F5B3A'%3E%3Cpath d='M13 2L5 14h6l-1 8 8-12h-6l1-8z'/%3E%3C/svg%3E") center/contain no-repeat} .ep-comparo thead th:nth-child(3)::after{content:"";display:inline-block;width:11px;height:11px;margin-left:7px;vertical-align:-1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23B26F0E'%3E%3Cpath d='M12 2s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11z'/%3E%3C/svg%3E") center/contain no-repeat} .ep-comparo tbody td{padding:13px 16px;font-size:14.5px;color:var(--body);border:none;background:transparent} .ep-comparo tbody tr:nth-child(even){background:transparent} .ep-comparo tbody td:first-child{font-weight:600;color:var(--sec);border-bottom:1px solid var(--line2)} .ep-comparo tbody td:nth-child(2){background:#F5FAF7;border-left:1px solid #E4F0E9;border-right:1px solid #E4F0E9} .ep-comparo tbody td:nth-child(3){background:#FEFAF3;border-left:1px solid #F3E7CF;border-right:1px solid #F3E7CF} .ep-comparo tbody tr:last-child td:nth-child(2){border-bottom:1px solid #E4F0E9;border-radius:0 0 12px 12px} .ep-comparo tbody tr:last-child td:nth-child(3){border-bottom:1px solid #F3E7CF;border-radius:0 0 12px 12px} .ep-comparo tbody td:nth-child(2):has(strong){background:#E1F0E7} .ep-comparo tbody td:nth-child(3):has(strong){background:#FBEBD3} .ep-comparo tbody td:nth-child(2) strong{color:#1F5B3A;font-weight:700} .ep-comparo tbody td:nth-child(3) strong{color:#B26F0E;font-weight:700} .ep-comparo tbody td:nth-child(2) strong::before,.ep-comparo tbody td:nth-child(3) strong::before{content:"\2713 "} .ep-figures td:last-child strong{color:var(--blue);font-weight:700} .ep-figures td:last-child strong::after{content:" \2713"} /* ===================================================================== v1.2 — Bloc « Budget par tranches », H3 en bleu marque, tableaux d'article. ===================================================================== */ /* Titres H3 du contenu dans le bleu de la marque */ .article-body h3,.page-content h3,.editor-styles-wrapper h3{color:var(--blue)} /* Bloc « Budget par tranches » (label coloré + texte à droite, ligne + pastilles) */ .ep-budget{border:1px solid var(--line);border-radius:18px;padding:28px 32px} .ep-budget>*{margin-top:0;margin-bottom:0} .ep-budget-title{font-family:var(--serif);font-weight:700;font-size:22px;line-height:1.2;letter-spacing:-.01em;color:var(--ink);margin:0 0 6px} .ep-budget>.ep-budget-row{position:relative;display:grid;grid-template-columns:200px 1fr;gap:6px 34px;padding:20px 0 20px 26px;border-left:2px solid var(--line3);margin:0} .ep-budget>.ep-budget-row>*{margin:0} .ep-budget>.ep-budget-row::before{content:"";position:absolute;left:-6px;top:25px;width:11px;height:11px;border-radius:50%;background:var(--ink)} .ep-budget-label{font-weight:700;font-size:16.5px;line-height:1.3;margin:0} .ep-budget-text>*{margin:0 0 8px} .ep-budget-text>*:last-child{margin-bottom:0} .ep-budget-text p{font-size:15px;line-height:1.6;color:var(--sec)} .ep-budget>.ep-budget-row:nth-of-type(4n+1) .ep-budget-label{color:#2E7D4F} .ep-budget>.ep-budget-row:nth-of-type(4n+1)::before{background:#2E7D4F} .ep-budget>.ep-budget-row:nth-of-type(4n+2) .ep-budget-label{color:#4682B4} .ep-budget>.ep-budget-row:nth-of-type(4n+2)::before{background:#4682B4} .ep-budget>.ep-budget-row:nth-of-type(4n+3) .ep-budget-label{color:#D99A1B} .ep-budget>.ep-budget-row:nth-of-type(4n+3)::before{background:#D99A1B} .ep-budget>.ep-budget-row:nth-of-type(4n+4) .ep-budget-label{color:#D63A2B} .ep-budget>.ep-budget-row:nth-of-type(4n+4)::before{background:#D63A2B} /* Tableaux « basiques » d'article → en-tête bleu marque, 1re colonne en gras, arrondi */ .article-body > figure.wp-block-table:not(.ep-comparo):not(.ep-specs){margin:34px 0;overflow-x:auto} .article-body > figure.wp-block-table:not(.ep-comparo):not(.ep-specs) > table{border-collapse:separate;border-spacing:0;width:100%;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff} .article-body > figure.wp-block-table:not(.ep-comparo):not(.ep-specs) thead th{background:#E9F1F8;color:var(--ink);font-weight:700;font-size:13.5px;text-align:left;padding:15px 20px;border-bottom:1px solid #CFE0F0} .article-body > figure.wp-block-table:not(.ep-comparo):not(.ep-specs) tbody td{padding:15px 20px;font-size:14.5px;color:var(--body);border-bottom:1px solid var(--line2)} .article-body > figure.wp-block-table:not(.ep-comparo):not(.ep-specs) tbody tr:last-child td{border-bottom:none} .article-body > figure.wp-block-table:not(.ep-comparo):not(.ep-specs) tbody td:first-child{font-weight:700;color:var(--ink)} .article-body > figure.wp-block-table:not(.ep-comparo):not(.ep-specs) figcaption{font-size:12px;color:var(--sec2);margin-top:12px;text-align:left} /* v1.2.1 — correctif tableaux d'article : cible th/td (sans dépendre de thead/tbody), supprime la grille/boîtes par défaut, en-tête bleu, lignes à filet, coins arrondis. */ .article-body > figure.wp-block-table:not(.ep-comparo):not(.ep-specs){border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff} .article-body > figure.wp-block-table:not(.ep-comparo):not(.ep-specs) table{border-collapse:collapse!important;border-spacing:0!important;border:0;border-radius:0;margin:0;width:100%} .article-body > figure.wp-block-table:not(.ep-comparo):not(.ep-specs) th, .article-body > figure.wp-block-table:not(.ep-comparo):not(.ep-specs) td{border:0!important;border-bottom:1px solid var(--line2)!important;padding:15px 20px;text-align:left;background:transparent;font-size:14.5px;color:var(--body)} .article-body > figure.wp-block-table:not(.ep-comparo):not(.ep-specs) th{background:#E9F1F8;color:var(--ink);font-weight:700;font-size:13.5px;border-bottom:1px solid #CFE0F0!important} .article-body > figure.wp-block-table:not(.ep-comparo):not(.ep-specs) tr:last-child td{border-bottom:0!important} .article-body > figure.wp-block-table:not(.ep-comparo):not(.ep-specs) td:first-child{font-weight:700;color:var(--ink)} /* v1.2.2 — bloc « Budget par tranches » : pas d'encadré ni de titre, aligné au texte */ .ep-budget{border:0!important;padding:0!important;background:none!important;border-radius:0!important;margin:36px 0} .ep-budget-title{display:none!important} .ep-budget>.ep-budget-row{padding:16px 0 16px 24px} .ep-budget>.ep-budget-row::before{left:-5px} /* v1.3 — Bloc dynamique « À lire aussi » (mise en avant d'un article) */ .ep-lireaussi{display:flex;align-items:center;gap:20px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 22px;margin:34px 0;color:var(--ink);text-decoration:none;box-shadow:0 2px 10px -6px rgba(28,26,23,.12);transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease} .ep-lireaussi:hover{border-color:#DBD9D2;box-shadow:0 20px 44px -26px rgba(28,26,23,.4);transform:translateY(-2px);color:var(--ink)} .ep-lireaussi-ico{width:54px;height:54px;border-radius:14px;background:#EDF3F0;background:color-mix(in srgb, var(--cat,#4682B4) 12%, #fff);display:flex;align-items:center;justify-content:center;flex-shrink:0} .ep-lireaussi-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} .ep-lireaussi-kicker{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--cat,#4682B4)} .ep-lireaussi-title{font-family:var(--sans);font-weight:700;font-size:18px;line-height:1.25;letter-spacing:-.01em;color:var(--ink)} .ep-lireaussi-meta{font-size:13px;color:var(--muted)} .ep-lireaussi-arrow{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1;transition:background .18s ease} .ep-lireaussi-arrow::before{content:"\2192"} .ep-lireaussi:hover .ep-lireaussi-arrow{background:var(--cat,#4682B4)} .ep-lireaussi--empty{border:1px dashed var(--line3);border-radius:18px;padding:22px;color:var(--muted);text-align:center;font-size:14px;margin:34px 0} .article-body a.ep-lireaussi,.article-body a.ep-lireaussi:hover,.ep-lireaussi *{text-decoration:none!important} /* --------------------------------------------------------------------- Mobile — Points forts / faibles : empilement propre (regle aussi presente dans le CSS additionnel du personnalisateur, posee avant le deploiement du theme ; doublon sans effet de bord). --------------------------------------------------------------------- */ @media(max-width:781px){ .ep-prcon{padding:20px 18px} .ep-prcon .wp-block-columns{gap:20px 0!important;flex-wrap:wrap!important} .ep-prcon .wp-block-column{flex-basis:100%!important;min-width:100%!important} .ep-prcon .wp-block-column:first-child{border-right:none;padding-right:0;border-bottom:1px solid var(--line2);padding-bottom:16px} } /* --------------------------------------------------------------------- Bloc « Modèle de lettre » (epotto/lettre) — carte isolée + copier --------------------------------------------------------------------- */ :root{ --ico-lettre:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h7l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm7 1.6V7h3.4L13 3.6zM8 12h8v1.6H8zm0 3.4h8V17H8zm0-6.8h4v1.6H8z'/%3E%3C/svg%3E"); --ico-copier:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h9a2 2 0 0 1 2 2v11h-2V4H9zM5 6h9a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm0 2v12h9V8z'/%3E%3C/svg%3E"); --ico-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6L20.4 7.8 19 6.4z'/%3E%3C/svg%3E"); } .ep-lettre{margin:40px 0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(28,26,23,.04),0 14px 34px -20px rgba(28,26,23,.22)} .ep-lettre-tete{display:flex;align-items:center;gap:12px;padding:13px 18px;background:var(--blue-t2);border-bottom:1px solid var(--line)} .ep-lettre-titre{display:inline-flex;align-items:center;gap:9px;margin:0;font-family:var(--sans);font-weight:700;font-size:15.5px;color:var(--blue);min-width:0} .ep-lettre-ico{flex:0 0 auto;width:19px;height:19px;background:var(--blue);-webkit-mask:var(--ico-lettre) center/contain no-repeat;mask:var(--ico-lettre) center/contain no-repeat} .ep-lettre-copier{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;background:var(--blue);color:#fff;font-family:var(--sans);font-weight:600;font-size:13.5px;line-height:1;padding:9px 14px;border-radius:9px;transition:background .15s ease,transform .1s ease} .ep-lettre-copier:hover{background:#3b6f99} .ep-lettre-copier:active{transform:scale(.97)} .ep-lettre-copier-ico{width:15px;height:15px;background:#fff;-webkit-mask:var(--ico-copier) center/contain no-repeat;mask:var(--ico-copier) center/contain no-repeat} .ep-lettre-copier.est-copie{background:var(--green)} .ep-lettre-copier.est-copie .ep-lettre-copier-ico{-webkit-mask:var(--ico-check) center/contain no-repeat;mask:var(--ico-check) center/contain no-repeat} .ep-lettre-corps{padding:24px 26px;font-family:var(--serif);font-size:16px;line-height:1.8;color:var(--body)} /* version éditeur : le PlainText est un