/* courrier365.fr — classique, éditorial */
*,*::before,*::after{box-sizing:border-box}
:root{
  --papier:#faf7f1; --papier2:#f2ece0; --encre:#1c2436; --bleu:#22355c;
  --or:#a8854b; --gris:#6b6558; --trait:#ddd4c3;
}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--papier);color:var(--encre);
  font:16.5px/1.72 Georgia,"Iowan Old Style","Times New Roman",Times,serif;
  -webkit-font-smoothing:antialiased;
}
.conteneur{max-width:1060px;margin:0 auto;padding:0 28px}
.etroit{max-width:700px}
h1,h2,h3{margin:0 0 .45em;line-height:1.14;font-weight:normal}
h1{font-size:clamp(38px,6vw,66px);letter-spacing:-.015em}
h2{font-size:clamp(27px,3.6vw,38px);letter-spacing:-.01em}
h3{font-size:19px;font-weight:bold}
p{margin:0 0 1.05em}
a{color:var(--bleu)}
b{font-weight:bold}
.centre{text-align:center}
.surtitre{font-family:"Helvetica Neue",Arial,sans-serif;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--or);margin:0 0 26px;font-weight:600}
.mention{font-size:13.5px;color:var(--gris);font-style:italic}
.intro{font-size:18px;color:var(--gris);max-width:62ch;margin-bottom:44px}
.intro.centre{margin-left:auto;margin-right:auto}

/* en-tête */
.entete{background:var(--papier);border-bottom:1px solid var(--trait);position:sticky;top:0;z-index:20}
.entete-in{display:flex;align-items:center;gap:30px;height:74px}
.marque{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--encre)}
.sceau{display:grid;place-items:center;width:34px;height:34px;border:1.5px solid var(--or);
  border-radius:50%;color:var(--or);font-size:17px;letter-spacing:0}
.nom{font-size:21px;letter-spacing:-.01em}
.chiffre{color:var(--or)}
.menu{display:flex;gap:26px;margin-left:auto;font-family:"Helvetica Neue",Arial,sans-serif;font-size:13.5px}
.menu a{text-decoration:none;color:var(--gris)}
.menu a:hover{color:var(--bleu);text-decoration:underline}

/* boutons */
.bouton{display:inline-block;text-decoration:none;cursor:pointer;
  font-family:"Helvetica Neue",Arial,sans-serif;font-size:14px;font-weight:600;letter-spacing:.02em;
  border:1px solid var(--bleu);color:var(--bleu);background:transparent;padding:12px 24px;border-radius:2px;
  transition:background .15s,color .15s}
.bouton:hover{background:var(--bleu);color:#fff}
.bouton-plein{background:var(--bleu);color:#fff}
.bouton-plein:hover{background:#16243f;color:#fff}
.bouton-large{padding:15px 32px;font-size:15px}
.bouton-bloc{display:block;width:100%;text-align:center}

/* une */
.une{padding:70px 0 64px}
.filets{display:flex;flex-direction:column;gap:3px;margin:30px 0 34px;max-width:200px}
.filets span{height:1px;background:var(--or)}
.filets span:nth-child(2){opacity:.6}
.filets span:nth-child(3){opacity:.3}
.une-grille{display:grid;grid-template-columns:1.25fr .75fr;gap:52px;align-items:start}
.chapeau{font-size:19.5px;line-height:1.6;color:var(--encre)}
.chapeau::first-letter{float:left;font-size:58px;line-height:.82;padding:6px 10px 0 0;color:var(--or)}
.une-texte p:not(.chapeau){color:var(--gris);font-size:16px}
.encart{background:var(--papier2);border:1px solid var(--trait);border-top:3px solid var(--or);padding:26px}
.encart-titre{font-family:"Helvetica Neue",Arial,sans-serif;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--or);font-weight:700;margin:0 0 12px}
.encart-texte{font-size:15px;color:var(--gris);margin-bottom:20px}
.encart-fin{font-size:12.5px;color:var(--gris);margin:12px 0 0;font-style:italic}

/* bandeau chiffres */
.bandeau{background:var(--bleu);color:#eee6d6}
.bandeau-in{display:grid;grid-template-columns:repeat(4,1fr);text-align:center}
.bandeau div{padding:28px 14px;border-right:1px solid rgba(255,255,255,.14)}
.bandeau div:last-child{border-right:0}
.bandeau b{display:block;font-size:31px;color:#fff;letter-spacing:-.01em}
.bandeau span{display:block;font-family:"Helvetica Neue",Arial,sans-serif;font-size:12px;
  color:#b8c3d6;margin-top:6px;letter-spacing:.02em}

/* sections */
.section{padding:82px 0;border-bottom:1px solid var(--trait)}
.section-creme{background:var(--papier2)}

.principe{display:grid;grid-template-columns:repeat(2,1fr);gap:38px 48px}
.principe article{display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start}
.chiffre-rond{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--or);
  border-radius:50%;color:var(--or);font-size:15px;letter-spacing:.02em}
.principe h3{grid-column:2;margin-bottom:6px}
.principe p{grid-column:2;color:var(--gris);font-size:15.5px;margin:0}

.prestations{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 30px}
.prestations article{border-top:2px solid var(--encre);padding-top:16px}
.prestations h3{font-size:17px;margin-bottom:8px}
.prestations p{color:var(--gris);font-size:14.5px;margin:0}
.section-creme .mention{margin-top:44px;padding-top:22px;border-top:1px solid var(--trait)}

/* tarif */
.tarif{border:1px solid var(--trait);background:#fff;padding:0;max-width:560px;margin:0 auto;
  box-shadow:0 2px 0 var(--trait)}
.tarif-haut{text-align:center;padding:36px 30px 26px;border-bottom:1px solid var(--trait);background:var(--papier2)}
.montant b{font-size:60px;letter-spacing:-.03em}
.montant span{color:var(--gris);margin-left:8px;font-size:17px}
.tarif-note{font-size:13px;color:var(--gris);margin:8px 0 0;font-style:italic}
.tarif-liste{list-style:none;margin:0;padding:30px 36px;display:grid;gap:11px;font-size:15.5px}
.tarif-liste li{padding-left:24px;position:relative}
.tarif-liste li::before{content:"—";position:absolute;left:0;color:var(--or)}
.tarif-bas{padding:0 36px 32px;text-align:center}
.tarif-bas .tarif-note{margin-top:14px}

/* formulaire */
.formulaire{background:#fff;border:1px solid var(--trait);padding:32px;display:grid;gap:19px}
.formulaire label{display:grid;gap:7px;font-family:"Helvetica Neue",Arial,sans-serif;
  font-size:13px;color:var(--gris)}
.formulaire input[type=text],.formulaire input[type=email],.formulaire input[type=password]{
  width:100%;border:1px solid var(--trait);background:var(--papier);color:var(--encre);
  padding:13px 14px;font:inherit;font-size:16px;border-radius:2px}
.formulaire input:focus{outline:2px solid rgba(168,133,75,.55);outline-offset:0;border-color:transparent}
.champ-adresse{display:flex;align-items:center;gap:11px}
.champ-adresse input{flex:1}
.champ-adresse em{font-style:normal;color:var(--gris);font-size:15.5px;white-space:nowrap;font-family:Georgia,serif}
.case{display:flex!important;align-items:flex-start;gap:10px;font-size:13px}
.case input{margin-top:4px}
.erreur{border:1px solid #a33;border-left:4px solid #a33;background:#fdf1f1;color:#7d2020;
  padding:15px 18px;margin-bottom:24px;font-size:15.5px}
.erreur b{display:block;margin-bottom:3px}

/* questions */
details{border-bottom:1px solid var(--trait);padding:17px 0}
summary{cursor:pointer;font-size:17px;list-style:none;color:var(--bleu)}
summary::-webkit-details-marker{display:none}
summary::before{content:"◆";color:var(--or);font-size:10px;margin-right:12px;vertical-align:2px}
details p{color:var(--gris);font-size:15.5px;margin:11px 0 0 24px}

.pied{padding:28px 0;font-family:"Helvetica Neue",Arial,sans-serif;font-size:12.5px;color:var(--gris)}
.pied-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media(max-width:920px){
  .une-grille,.principe{grid-template-columns:1fr;gap:34px}
  .prestations{grid-template-columns:repeat(2,1fr)}
  .bandeau-in{grid-template-columns:repeat(2,1fr)}
  .menu{display:none}
}
@media(max-width:560px){
  .prestations{grid-template-columns:1fr}
}