/*
Theme Name: Amplitude
Author: Thibaut Gervais
Description: Habillage clair et aere pour un site sur les articulations : accueil en parcours, cartes arrondies, corps de texte confortable.
Version: 2.2.0
Text Domain: amplitude
*/

:root{
  --fond:#f4f8f7; --blanc:#fff; --sapin:#175c4c; --menthe:#dcefe9;
  --corail:#d9694f; --texte:#20302c; --doux:#5f736d; --trait:#dbe7e3;
  --r:18px;
  --f:"Nunito Sans","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fond);color:var(--texte);font:400 17px/1.75 var(--f)}
a{color:var(--sapin)}
img{max-width:100%;height:auto}
.aire{max-width:940px;margin:0 auto;padding:0 22px}

.entete{background:var(--blanc)}
.entete .aire{padding:20px 22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.marque{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--texte)}
.pastille{width:36px;height:36px;border-radius:50%;background:var(--menthe);border:2px solid var(--sapin);
  display:grid;place-items:center;color:var(--sapin);font:700 15px/1}
.marque b{font:700 20px/1.2}
.liens{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.liens a{text-decoration:none;color:var(--doux);font:600 14px/1;padding:9px 14px;border-radius:999px}
.liens a:hover{background:var(--menthe);color:var(--sapin)}

.accueil{background:var(--blanc);border-radius:var(--r);padding:38px 40px;margin:26px 0 22px;
  border:1px solid var(--trait)}
.accueil h1{margin:0 0 14px;font:700 31px/1.3;letter-spacing:-.01em;max-width:22ch}
.accueil p{margin:0 0 12px;color:#42544f;max-width:62ch}
.accueil p:last-child{margin:0}
.rappel{margin-top:22px;background:#fdf1ee;border:1px solid #f2d5cd;border-radius:12px;padding:16px 20px;
  font-size:15.5px;color:#8a4433}
.rappel b{display:block;margin-bottom:5px}

.parcours{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:26px}
.etape{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r);padding:22px 24px}
.etape span{display:inline-block;width:28px;height:28px;border-radius:50%;background:var(--sapin);color:#fff;
  font:700 14px/28px;text-align:center;margin-bottom:11px}
.etape h3{margin:0 0 6px;font:700 17px/1.35}
.etape p{margin:0;font-size:15px;color:var(--doux)}

.suite{display:flex;flex-direction:column;gap:14px;padding-bottom:56px}
.billet{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r);padding:24px 28px}
.billet .zone{font:700 12px/1;text-transform:uppercase;letter-spacing:.09em;color:var(--corail)}
.billet h2{margin:9px 0 8px;font:700 21px/1.4}
.billet h2 a{color:var(--texte);text-decoration:none}
.billet h2 a:hover{color:var(--sapin)}
.billet p{margin:0;color:var(--doux);font-size:16px}

.contenu{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r);
  max-width:70ch;margin:26px auto 56px;padding:38px 42px}
.contenu h1{margin:0 0 10px;font:700 30px/1.32}
.contenu .par{font:600 14px/1.5;color:var(--doux);padding-bottom:16px;margin-bottom:26px;border-bottom:1px solid var(--trait)}
.contenu h2{font:700 23px/1.4;margin:34px 0 10px;color:var(--sapin)}
.contenu h3{font:700 19px/1.45;margin:24px 0 8px}
.contenu ul,.contenu ol{padding-left:22px}
.contenu blockquote{margin:24px 0;background:var(--menthe);border-radius:12px;padding:18px 22px;font-size:16px}

.consulter{background:#fdf1ee;border:1px solid #f2d5cd;border-radius:12px;padding:18px 22px;margin:26px 0 0;
  font-size:15.5px;color:#8a4433}
.consulter b{display:block;margin-bottom:5px}

.bas{background:var(--sapin);color:#c4ded6;margin-top:30px}
.bas .aire{padding:28px 22px;font-size:14.5px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.bas a{color:#fff}
.bas p{margin:0;max-width:58ch}

@media(max-width:820px){
  .parcours{grid-template-columns:1fr}
  .accueil,.contenu{padding:26px 22px}
  .accueil h1{font-size:25px}
  .liens{margin-left:0}
}