/* La fenêtre d'envoi d'un e-mail client (courriel-envoi.js) — la même en Gestion (le dossier) et au Studio (la
   publication d'une offre, l'émission d'une facture) : le message à gauche, l'e-mail tel que le client le recevra à
   droite (Kevin, 25 sept. 2026). */
.crl-volets{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}
.crl-form{padding:18px 24px 22px;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:14px}
.crl-vue{background:var(--surface-2);border-left:1px solid var(--border);padding:16px 20px 20px;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:10px}
/* les blocs gardent leur hauteur : sans cela, le cadre de l'e-mail (débordement masqué) se TASSAIT à la hauteur
   du volet au lieu de le faire défiler — la fin de l'e-mail était invisible (Kevin, 25 sept. 2026) */
.crl-form > *,.crl-vue > *{flex:none}
/* les destinataires — À, copie, copie cachée : destinataires.css (27 sept. 2026) */
.crl-cci{font-size:11.5px;color:var(--ink-3)}
/* le lien d'UNE personne (29 sept. 2026) : elle seule en À, sans éditeur */
.crl-fixe{padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-ctrl);background:var(--surface);font-size:13px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.crl-fixe small{display:block;margin-top:2px;font-size:12px;color:var(--ink-3)}
.crl-deja{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.crl-deja .ic-svg{flex:none;margin-top:2px;color:var(--ink-3)}
.crl-form .field{margin:0}
.crl-form textarea{min-height:230px;resize:vertical;font-weight:400;line-height:1.55;field-sizing:content;max-height:460px}
/* l'éditeur du message (desc-editeur.js) : la hauteur de l'ancien champ */
.crl-form .edt{--edt-min:230px;--edt-max:460px}
.crl-bas{display:flex;align-items:flex-start;gap:12px;justify-content:space-between;flex-wrap:wrap}
.crl-ajoute{display:flex;align-items:flex-start;gap:8px;margin:0;flex:1 1 240px;font-size:12px;line-height:1.45;color:var(--ink-3)}
.crl-ajoute .ic-svg{flex:none;margin-top:1px}
.crl-reset{flex:none;font-size:12.5px}
.crl-reset[hidden]{display:none}
.crl-vue-t{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.crl-boite{padding:10px 13px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);font-size:12.5px;line-height:1.5;color:var(--ink-2);overflow-wrap:anywhere}
.crl-boite b{color:var(--ink)}
.crl-piece{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:3px 9px;border:1px solid var(--border);border-radius:99px;font-size:12px;color:var(--ink-2)}
.crl-cadre{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.crl-cadre iframe{display:block;width:100%;min-height:420px;border:0}
.crl-pied-note{margin-right:auto;font-size:12px;color:var(--ink-3)}
.crl-erreur{padding:24px}
/* Kevin, 2 oct. 2026 : « la prévisualisation doit être à droite et pas au-dessous ». Elle passait dessous dès 900 px
   de large — une fenêtre de navigateur un peu étroite, une tablette. Elle reste à droite tant que les deux volets
   tiennent (720 px) : l'e-mail s'y dessine alors comme sur un téléphone, et le message garde sa place à gauche. */
@media(max-width:900px){
  .crl-form{padding:16px 16px 18px}
  .crl-vue{padding:14px 14px 18px}
  /* le pied garde sa note — qui reçoit quoi — : elle passe sur deux lignes à côté des boutons */
  .crl-pied-note{min-width:0;line-height:1.35}
}
@media(max-width:720px){
  /* au téléphone, un seul défilement : le message, puis l'e-mail dessous — il n'y a pas la place de les mettre côte à côte */
  .crl-volets{grid-template-columns:minmax(0,1fr);overflow:auto}
  .crl-form,.crl-vue{overflow:visible;min-height:auto}
  .crl-form{padding:16px}
  .crl-vue{border-left:0;border-top:1px solid var(--border);padding:14px 16px 18px}
  .crl-pied-note{display:none}
}

/* Un e-mail écrit à la main (Kevin, 11 oct. 2026) : « Dans le cadre de » — un dossier du contact, ou aucun. Le second
   champ (« Partir d'un modèle ») viendra se poser à côté : la grille passe alors à deux colonnes (.deux). */
.crl-cadre-de{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.crl-cadre-de.deux{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.crl-sans-objet{color:var(--ink-3)}
/* … et sa relecture : quand il est parti, à qui */
.crl-lu-quand{display:flex;align-items:center;gap:8px;margin:0;font-size:13.5px;font-weight:600;color:var(--ink)}
.crl-lu-quand .ic-svg{flex:none;color:var(--pos)}
@media(max-width:620px){.crl-cadre-de.deux{grid-template-columns:minmax(0,1fr)}}
.crl-manque{margin:0;font-size:12.5px;line-height:1.45;font-weight:600;color:var(--coral-text)}
/* Les modèles de Kevin (12 oct. 2026) : les pastilles « Insérer » sous le message, et « Enregistrer comme modèle » —
   un nom, sur sa ligne, à la place du lien. */
.crl-vars{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:-6px;font-size:12px;color:var(--ink-3)}
.crl-var{appearance:none;border:1px dashed var(--border-strong);background:var(--surface);border-radius:var(--r-ctrl);padding:3px 8px;font:600 11.5px 'Satoshi',sans-serif;color:var(--ink-2);cursor:pointer}
.crl-var:hover{border-color:var(--accent);color:var(--ink)}
#crlGarderModele:has(.crl-garder){flex:1 1 100%}
.crl-garder{margin:0}
.crl-garder-l{display:flex;gap:8px;align-items:center}
.crl-garder-l input{flex:1;min-width:0}
.crl-garder-l .btn{flex:none}
@media(max-width:620px){.crl-garder-l{flex-wrap:wrap}.crl-garder-l input{flex:1 1 100%}}
/* Joindre un document du dossier (12 oct. 2026) : un nom de fichier long se coupe proprement dans la liste fermée —
   comme le titre d'un dossier, juste au-dessus ; l'aperçu le donne en entier (.crl-piece). */
.crl-form select{text-overflow:ellipsis}
.crl-piece{max-width:100%}
/* le relevé d'heures d'une facture au temps passé (5 nov. 2026) : joint d'office, l'interrupteur le retire */
.crl-joindre{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-ctrl);margin:2px 0 14px}
.crl-joindre b{display:block;font-size:13px;font-weight:600;color:var(--ink)}
.crl-joindre small{display:block;font-size:12px;color:var(--ink-3);margin-top:2px}
.crl-joindre-g{display:inline-flex;align-items:center;gap:8px;flex:none}
#crlPieceReleve{margin-left:6px}