/*
Theme Name: Ma lettre au Père Noël
Theme URI: https://ma-lettre-au-pere-noel.fr
Author: E-CLOSION
Author URI: https://eclosionwebdesign.fr
Description: Thème de blocs (FSE) pour ma-lettre-au-pere-noel.fr : palette rouge, crème, doré et vert sapin, en-tête et pied de page, compositions pour l'accueil, les conseils, la FAQ et les pages légales. À utiliser avec l'extension « Ma lettre au Père Noël » (bloc Atelier de la lettre).
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
Version: 1.2.0
License: GPL-2.0-or-later
Text Domain: ma-lettre-theme
*/

/* Enveloppe du bandeau d'accueil */
.mlt-enveloppe{position:relative;aspect-ratio:1.55;background:#f4ead6;border-radius:6px;box-shadow:0 30px 60px rgba(0,0,0,.35);transform:rotate(-4deg);color:#24262d;overflow:hidden;max-width:520px;margin-inline:auto}
.mlt-enveloppe::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:repeating-linear-gradient(90deg,#c8402f 0 18px,#fff 18px 28px,#2f5f4f 28px 46px,#fff 46px 56px)}
.mlt-enveloppe .timbre{position:absolute;top:10%;right:7%;width:19%;aspect-ratio:.82;background:#2f5f4f;border:5px dotted #f4ead6;outline:2px solid #2f5f4f;display:grid;place-items:center}
.mlt-enveloppe .cachet{position:absolute;top:16%;right:22%;width:24%;aspect-ratio:1;border:2px solid rgba(200,64,47,.75);border-radius:50%;display:grid;place-items:center;text-align:center;font:700 clamp(8px,1vw,11px)/1.2 var(--wp--preset--font-family--figtree);letter-spacing:.08em;color:rgba(200,64,47,.85);transform:rotate(12deg)}
.mlt-enveloppe .adresse{position:absolute;left:30%;top:48%;font-family:var(--wp--preset--font-family--young-serif);font-size:clamp(18px,2.3vw,28px);line-height:1.25}

/* Puces du bandeau */
.mlt-points{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.mlt-points li{display:flex;gap:8px;align-items:center}
.mlt-points li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--wp--preset--color--or);flex:none}

/* Cartes numérotées et conseils */
.mlt-filet{border-top:3px solid var(--wp--preset--color--sapin);padding-top:16px}
.mlt-num{font-family:var(--wp--preset--font-family--young-serif);font-size:42px;line-height:1;color:var(--wp--preset--color--or);margin:0}

/* FAQ */
.mlt-faq .wp-block-details{border-bottom:1px solid var(--wp--preset--color--trait);padding:16px 0}
.mlt-faq .wp-block-details summary{cursor:pointer;font-weight:600;font-size:18px}
.mlt-faq .wp-block-details p{margin-top:10px;color:var(--wp--preset--color--gris)}

/* En-tête */
.mlt-entete .wp-block-navigation a{color:#f3efe6}
.mlt-entete .wp-block-navigation a:hover{text-decoration:underline}
.mlt-logo img{height:84px;width:auto}
.mlt-entete .wp-block-button__link{white-space:nowrap}
.mlt-fil{font-size:13.5px;color:#6b6f7c;margin:0 0 36px}
.mlt-fil ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 0}
.mlt-fil li{display:inline-flex;align-items:center;min-width:0}
.mlt-fil li+li::before{content:"›";margin:0 9px;color:#b8892f;font-size:15px}
.mlt-fil a{color:#2f5f4f;text-decoration:none}
.mlt-fil a:hover{text-decoration:underline}
.mlt-fil [aria-current]{color:#2a2a35;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw}
.mlt-compte{display:inline-grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;border:1.5px solid rgba(243,239,230,.55);color:#f3efe6;transition:background .15s,border-color .15s}
.mlt-compte:hover,.mlt-compte:focus-visible{background:rgba(243,239,230,.14);border-color:#f3efe6}
@media (max-width:600px){.mlt-compte{width:36px;height:36px}}
@media (max-width:600px){.mlt-logo img{height:46px}.mlt-entete .wp-block-button__link{padding:7px 12px!important;font-size:13px!important}}

/* Pied de page */
.mlt-pied a{color:#e6efe9}
@media (max-width:600px){.mlt-pied,.mlt-pied .wp-block-group{justify-content:center !important;text-align:center}}

/* Tableaux des pages légales */
.mlt-legal .wp-block-table table{background:#fff;font-size:14.5px}
.mlt-legal .wp-block-table th{background:#f6f1e7}
.mlt-a-completer{background:#fdecc8;color:#7a5714;border-radius:4px;padding:0 4px;font-weight:600}