/*
Theme Name: Veilleuse
Author: Maud Lecomte
Description: Mise en page douce et lisible de nuit pour un site de sante de l'enfant : entree par age, questions courtes, contraste modere.
Version: 1.9.2
Text Domain: veilleuse
*/

:root{
  --lait:#fffdf9; --creme:#fdf6ec; --nuit:#3a3550; --lavande:#efeaf8;
  --abricot:#e08a4f; --texte:#33303c; --doux:#6e6879; --trait:#eae4dc;
  --f:"Assistant","Segoe UI",system-ui,sans-serif;
  --t:"Fraunces","Georgia",serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--lait);color:var(--texte);font:400 17.5px/1.78 var(--f)}
a{color:var(--nuit)}
img{max-width:100%;height:auto}
.doux{max-width:880px;margin:0 auto;padding:0 22px}

.tete{background:var(--lavande)}
.tete .doux{padding:26px 22px;text-align:center}
.tete a.nom{text-decoration:none;color:var(--nuit);font:600 28px/1.2 var(--t)}
.tete p{margin:8px 0 0;color:#6a6480;font-size:15px}
.ages{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.ages a{text-decoration:none;background:#fff;border:1px solid #ddd5ee;color:var(--nuit);
  font:600 13.5px/1;padding:9px 15px;border-radius:999px}
.ages a:hover{background:var(--nuit);color:#fff;border-color:var(--nuit)}

.mot{padding:36px 0 8px;text-align:center}
.mot h1{margin:0 auto 12px;font:600 30px/1.35 var(--t);max-width:23ch}
.mot p{margin:0 auto;max-width:56ch;color:#4d4859;font-size:17.5px}

.urgence{background:var(--creme);border:1px solid #f0e0c9;border-radius:14px;padding:20px 24px;margin:26px 0}
.urgence b{display:block;margin-bottom:6px;color:#8a5a25;font-size:15.5px}
.urgence p{margin:0;font-size:15.5px;color:#6d5432}

.questions{list-style:none;margin:22px 0 50px;padding:0}
.questions li{border-bottom:1px solid var(--trait);padding:20px 0}
.questions li:first-child{border-top:1px solid var(--trait)}
.questions h2{margin:0 0 7px;font:600 21px/1.45 var(--t)}
.questions h2 a{color:var(--texte);text-decoration:none}
.questions h2 a:hover{color:var(--abricot)}
.questions p{margin:0;color:var(--doux);font-size:16px}
.questions .age{display:inline-block;margin-top:9px;background:var(--lavande);color:var(--nuit);
  font:600 12px/1;padding:6px 11px;border-radius:999px}

.page-texte{max-width:66ch;margin:30px auto 56px}
.page-texte h1{margin:0 0 10px;font:600 30px/1.35 var(--t)}
.page-texte .sign{font:500 14px/1.6;color:var(--doux);padding-bottom:16px;margin-bottom:24px;border-bottom:1px solid var(--trait)}
.page-texte h2{font:600 23px/1.45 var(--t);margin:32px 0 10px;color:var(--nuit)}
.page-texte h3{font:600 19px/1.5;margin:22px 0 8px}
.page-texte ul,.page-texte ol{padding-left:22px}
.page-texte blockquote{margin:22px 0;background:var(--lavande);border-radius:14px;padding:18px 22px;font-size:16.5px}

.pied{background:var(--nuit);color:#c3bcd8;margin-top:30px}
.pied .doux{padding:28px 22px;font-size:14.5px;text-align:center}
.pied a{color:#fff}
.pied p{margin:0 auto 10px;max-width:60ch}

@media(max-width:700px){
  body{font-size:17px}
  .mot h1{font-size:25px}
  .tete a.nom{font-size:24px}
}