/*
Theme Name: Comptoir Peau
Author: Ines Charrier
Description: Habillage franc et lisible pour un site sur la peau : accroche pleine largeur, questions du comptoir, articles en colonne large.
Version: 2.6.0
Text Domain: comptoir-peau
*/

:root{
  --sable:#f7f2ee; --blanc:#fff; --brique:#a8412f; --rose:#f6e2dc;
  --encre:#2a2320; --doux:#7a6d66; --trait:#e6dad3; --vert:#4f6b52;
  --f:"Rubik","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--sable);color:var(--encre);font:400 17px/1.72 var(--f)}
a{color:var(--brique)}
img{max-width:100%;height:auto}
.comptoir{max-width:960px;margin:0 auto;padding:0 22px}

.devanture{background:var(--brique);color:#fff}
.devanture .comptoir{padding:26px 22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.enseigne{text-decoration:none;color:#fff;font:700 24px/1.15;letter-spacing:-.01em}
.enseigne em{display:block;font:400 13.5px/1.5;font-style:normal;color:#f3cfc7;margin-top:5px}
.rayons{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap}
.rayons a{color:#fff;text-decoration:none;font:600 13.5px/1;border:1px solid rgba(255,255,255,.45);
  padding:9px 14px;border-radius:6px}
.rayons a:hover{background:#fff;color:var(--brique)}

.affiche{background:var(--blanc);border:1px solid var(--trait);padding:36px 40px;margin:26px 0 20px}
.affiche h1{margin:0 0 14px;font:700 31px/1.28;letter-spacing:-.015em;max-width:22ch}
.affiche p{margin:0 0 12px;color:#5c514b;max-width:62ch;font-size:17.5px}
.affiche p:last-child{margin:0}

.trois{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:26px}
.regle{background:var(--rose);border:1px solid #ebcfc7;padding:20px 22px}
.regle b{display:block;margin-bottom:6px;font:700 15.5px/1.35;color:var(--brique)}
.regle span{font-size:15px;color:#7a5348;line-height:1.6}

.demandes{list-style:none;margin:0;padding:0 0 54px;display:grid;gap:13px}
.demandes li{background:var(--blanc);border:1px solid var(--trait);padding:22px 26px}
.demandes .rayon{font:700 11.5px/1;text-transform:uppercase;letter-spacing:.1em;color:var(--vert)}
.demandes h2{margin:9px 0 7px;font:700 20.5px/1.4}
.demandes h2 a{color:var(--encre);text-decoration:none}
.demandes h2 a:hover{color:var(--brique)}
.demandes p{margin:0;color:var(--doux);font-size:15.5px}

.dermato{background:#eef3ef;border-left:4px solid var(--vert);padding:20px 24px;margin:26px 0 0;font-size:15.5px;color:#3f5643}
.dermato b{display:block;margin-bottom:6px}

.conseil{background:var(--blanc);border:1px solid var(--trait);max-width:70ch;margin:28px auto 56px;padding:38px 42px}
.conseil h1{margin:0 0 10px;font:700 30px/1.3}
.conseil .qui{font:600 13.5px/1.5;color:var(--doux);padding-bottom:16px;margin-bottom:26px;border-bottom:2px solid var(--brique)}
.conseil h2{font:700 23px/1.4;margin:32px 0 10px;color:var(--brique)}
.conseil h3{font:700 19px/1.45;margin:22px 0 8px}
.conseil ul,.conseil ol{padding-left:22px}
.conseil blockquote{margin:22px 0;background:var(--rose);padding:18px 22px;font-size:16px}

.pied{background:var(--encre);color:#bfb2ab;margin-top:30px}
.pied .comptoir{padding:28px 22px;font-size:14px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.pied a{color:#fff}
.pied p{margin:0;max-width:58ch}

@media(max-width:820px){
  .trois{grid-template-columns:1fr}
  .affiche,.conseil{padding:26px 22px}
  .affiche h1{font-size:25px}
  .rayons{margin-left:0}
}