/*
 * L'apparence de la bulle du message d'accueil : le cercle jaune et la
 * typographie de son contenu.
 *
 * Cette feuille est partagée par deux rendus qui doivent rester identiques :
 *   - la pop-up du front (voir popup.css et popup.js) ;
 *   - l'aperçu de l'administration (page de réglages et widget du tableau de bord).
 *
 * Avant, ce rendu était éclaté entre trois sources qu'il fallait tenir en phase
 * à la main : Boxzilla, le thème (maison-laurent/style.css, classes .boxzilla-*)
 * et easy-google-fonts. Tout est désormais rapatrié ici. Le message d'accueil ne
 * dépend plus ni de Boxzilla ni du thème : front et aperçu lisent les mêmes règles.
 *
 * Géométrie : cercle de 350x350, moins 25px de padding = 300px pour .fc-msg-content,
 * moins 35px du sien = 230x230 de zone de texte réelle.
 *
 * La police Raleway est chargée par le PHP (fc_enqueue_* dans message-accueil.php),
 * des deux côtés, pour ne dépendre ni du front ni du back-office pour l'obtenir.
 * 300 : paragraphes — 400 : h2 — 600 : h3.
 */


/* --- Le cercle ------------------------------------------------------------ */
.fc-msg-bubble {
    box-sizing: border-box;
    position: relative;   /* ancre l'icône de fermeture de la pop-up ; sans effet sur l'aperçu */
    width: 350px;
    height: 350px;
    margin: 0 auto;
    padding: 25px;
    background-color: #fcc215;
    background-image: url(/wp-content/uploads/2017/06/Frourchette-Rond.png);
    background-position: center center;
    background-size: cover;
    border-radius: 50%;
    overflow: hidden;
    color: #0a0a0a;
    font-family: sans-serif;
    font-size: 16px;
    line-height: normal;
    text-align: left;
}

/* --- Le contenu ----------------------------------------------------------- */
.fc-msg-content {
    box-sizing: border-box;
    height: 100%;
    padding: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* --- Enfants directs ------------------------------------------------------ */
.fc-msg-content > * {
    margin: .5em;
    text-align: center;
}

.fc-msg-content > *:first-child {
    margin-top: 0;
    padding-top: 0;
}

.fc-msg-content > *:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* `!important` pour passer devant le reset :first-child. */
.fc-msg-content > h5 {
    margin: 1.2em 0 .5em 0 !important;
}

/* --- Typographie ---------------------------------------------------------- *
 *
 * Les propriétés sont posées explicitement, y compris quand elles valent le
 * défaut du navigateur : sinon le CSS du contexte (back-office pour l'aperçu,
 * thème pour le front) s'appliquerait aux titres, paragraphes et listes.
 */
.fc-msg-content p {
    color: #0c0c0c;
    font-family: 'Raleway', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 1em;
    line-height: 1.2;
    margin: 0;   /* les <p> imbriqués ; les enfants directs sont repris à .5em ci-dessus */
}

.fc-msg-content h2 {
    color: inherit;
    font-family: 'Raleway', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1.5em;
    line-height: normal;
}

.fc-msg-content h3 {
    color: #0a0a0a;
    font-family: 'Raleway', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 1.25em;
    line-height: normal;
}

.fc-msg-content h4,
.fc-msg-content h5,
.fc-msg-content h6 {
    color: inherit;
    font-family: sans-serif;
    font-style: normal;
    font-weight: bold;
    line-height: normal;
}

.fc-msg-content h4 {
    font-size: 1.1em;
}

.fc-msg-content h5 {
    font-size: 15px;
}

.fc-msg-content h6 {
    font-size: .67em;
}

.fc-msg-content b,
.fc-msg-content strong {
    font-weight: 700;
}

/* Les listes ne sont pas enveloppées dans un <p> : leur texte reste en sans-serif. */
.fc-msg-content ul,
.fc-msg-content ol,
.fc-msg-content li {
    color: inherit;
    font-family: sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 1em;
    line-height: normal;
}

.fc-msg-content ul,
.fc-msg-content ol {
    margin: 0 0 1.5em 3em;
    padding-left: 40px;
}

.fc-msg-content li {
    margin: 0;
}

.fc-msg-content li > ul,
.fc-msg-content li > ol {
    margin-bottom: 0;
    margin-left: 1.5em;
}

.fc-msg-content ul {
    list-style: disc;
}

.fc-msg-content ol {
    list-style: decimal;
}

.fc-msg-content blockquote {
    margin: 0 1.5em;
    quotes: none;
}

.fc-msg-content a {
    color: #111;
    text-decoration: none;
}