/*
 * Thème des courriels — v3.2.1 §5a.
 *
 * ⚠️ AUCUNE COULEUR DE MARQUE ICI, ET CE N'EST PAS NÉGOCIABLE.
 *
 * Laravel lit ce fichier avec file_get_contents et l'injecte tel quel : il ne passe PAS par Blade,
 * on ne peut donc rien y interpoler. Toute couleur écrite ici est gravée pour toutes les
 * installations à la fois — et c'est exactement ce qui s'est produit : `.header` portait la
 * couleur de SECOURS du socle (`Identite::REPLI_PRIMAIRE`), si bien que les deux sociétés
 * envoyaient tous leurs courriels dans un bleu générique qui n'était celui de personne.
 *
 * Les couleurs de charte descendent donc en STYLE EN LIGNE depuis les partiels Blade
 * (`header`, `button`, `panel`), lues sur `App\Support\Identite`. C'est de toute façon ce qu'exige
 * Outlook, qui ignore le CSS externe.
 *
 * Ce qui reste ici est une ardoise NEUTRE (#334155), visible seulement dans le cas où les styles
 * en ligne auraient été retirés. Un test de la suite échoue si une couleur de marque revient dans
 * ce fichier ou dans les partiels — le pendant exact du test qui garde les gabarits PDF depuis la
 * v3.1.
 */

/* Base */

body,
body *:not(html):not(style):not(br):not(tr):not(code) {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    position: relative;
}

body {
    -webkit-text-size-adjust: none;
    background-color: #ffffff;
    color: #52525b;
    height: 100%;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    width: 100% !important;
}

p,
ul,
ol,
blockquote {
    line-height: 1.4;
    text-align: start;
}

a {
    color: #334155;
}

a img {
    border: none;
}

/* Typography */

h1 {
    color: #334155;
    font-size: 18px;
    font-weight: bold;
    margin-top: 0;
    text-align: start;
}

h2 {
    font-size: 16px;
    font-weight: bold;
    margin-top: 0;
    text-align: start;
}

h3 {
    font-size: 14px;
    font-weight: bold;
    margin-top: 0;
    text-align: left;
}

p {
    font-size: 16px;
    line-height: 1.5em;
    margin-top: 0;
    text-align: left;
}

p.sub {
    font-size: 12px;
}

img {
    max-width: 100%;
}

/* Layout */

.wrapper {
    -premailer-cellpadding: 0;
    -premailer-cellspacing: 0;
    -premailer-width: 100%;
    background-color: #F8FAFC;
    margin: 0;
    padding: 0;
    width: 100%;
}

.content {
    -premailer-cellpadding: 0;
    -premailer-cellspacing: 0;
    -premailer-width: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* Header */

/*
 * ⚠️ Pas de `background-color` ici. Le fond du bandeau est décidé par `header.blade.php`, et lui
 * seul : il n'y a d'aplat coloré QUE si l'installation a téléversé un logo fait pour les fonds
 * sombres. Une couleur de repli à cet endroit rétablirait le défaut qu'on vient de corriger — un
 * logo clair posé sur un aplat, où on le devine à peine.
 */
.header {
    padding: 18px 0;
    text-align: center;
    border-radius: 8px 8px 0 0;
}

.header a {
    font-size: 19px;
    font-weight: bold;
    text-decoration: none;
}

/* Logo */

/*
 * ⚠️ AUCUNE mesure ici, et c'est le correctif du §3 de la v3.5.
 *
 * La v3.2.1 avait accordé ce fichier et les attributs du gabarit sur les mêmes valeurs (48 px de
 * haut, 160 de large au plus) parce qu'ils se contredisaient — attribut width=240, CSS
 * width:120px — et qu'Outlook suit l'attribut là où les autres suivent le CSS.
 *
 * Mais une mesure gravée ici ne peut, par construction, rien savoir de la forme du logo : Laravel
 * lit ce fichier avec file_get_contents, sans passer par Blade. Or `max-width: 160px` rabaissait
 * un logo LARGE sous la hauteur voulue — un logo de ratio 4,5 tombait à 36 px dans une bande
 * dimensionnée pour 48. C'est ce qui distinguait le rendu des deux installations.
 *
 * Les dimensions sont donc calculées à partir du fichier réel et écrites EN LIGNE par
 * `header.blade.php` (App\Support\LogoCourriel). Ne remettez pas de height/width ici : elles
 * reprendraient la main sur le calcul dans les clients qui lisent le CSS externe, et le défaut
 * reviendrait — sans qu'on sache pourquoi.
 */
.logo {
    margin: 0 auto;
    display: block;
    max-width: 100%;
}

/* Body */

.body {
    -premailer-cellpadding: 0;
    -premailer-cellspacing: 0;
    -premailer-width: 100%;
    background-color: #F8FAFC;
    border-bottom: 1px solid #fafafa;
    border-top: 1px solid #fafafa;
    margin: 0;
    padding: 0;
    width: 100%;
}

.inner-body {
    -premailer-cellpadding: 0;
    -premailer-cellspacing: 0;
    -premailer-width: 570px;
    background-color: #ffffff;
    border-color: #e4e4e7;
    border-radius: 4px;
    border-width: 1px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    padding: 0;
    width: 570px;
}

.inner-body a {
    word-break: break-all;
}

/* Subcopy */

.subcopy {
    border-top: 1px solid #e4e4e7;
    margin-top: 25px;
    padding-top: 25px;
}

.subcopy p {
    font-size: 14px;
}

/* Footer */

.footer {
    -premailer-cellpadding: 0;
    -premailer-cellspacing: 0;
    -premailer-width: 570px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    width: 570px;
}

.footer p {
    color: #a1a1aa;
    font-size: 12px;
    text-align: center;
}

.footer a {
    color: #a1a1aa;
    text-decoration: underline;
}

/* Tables */

.table table {
    -premailer-cellpadding: 0;
    -premailer-cellspacing: 0;
    -premailer-width: 100%;
    margin: 30px auto;
    width: 100%;
}

.table th {
    border-bottom: 1px solid #e4e4e7;
    margin: 0;
    padding-bottom: 8px;
}

.table td {
    color: #52525b;
    font-size: 15px;
    line-height: 18px;
    margin: 0;
    padding: 10px 0;
}

.content-cell {
    max-width: 100vw;
    padding: 32px;
}

/* Buttons */

.action {
    -premailer-cellpadding: 0;
    -premailer-cellspacing: 0;
    -premailer-width: 100%;
    margin: 30px auto;
    padding: 0;
    text-align: center;
    width: 100%;
    float: unset;
}

.button {
    -webkit-text-size-adjust: none;
    border-radius: 4px;
    color: #fff;
    display: inline-block;
    overflow: hidden;
    text-decoration: none;
}

.button-blue,
.button-primary {
    background-color: #334155;
    border-bottom: 8px solid #334155;
    border-left: 18px solid #334155;
    border-right: 18px solid #334155;
    border-top: 8px solid #334155;
}

.button-green,
.button-success {
    background-color: #16a34a;
    border-bottom: 8px solid #16a34a;
    border-left: 18px solid #16a34a;
    border-right: 18px solid #16a34a;
    border-top: 8px solid #16a34a;
}

.button-red,
.button-error {
    background-color: #dc2626;
    border-bottom: 8px solid #dc2626;
    border-left: 18px solid #dc2626;
    border-right: 18px solid #dc2626;
    border-top: 8px solid #dc2626;
}

/* Panels */

.panel {
    border-left: #334155 solid 4px;
    margin: 21px 0;
}

.panel-content {
    background-color: #F8FAFC;
    color: #52525b;
    padding: 16px;
}

.panel-content p {
    color: #52525b;
}

.panel-item {
    padding: 0;
}

.panel-item p:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Utilities */

.break-all {
    word-break: break-all;
}