/* Page monhonorine.fr : une seule feuille pour les trois pages. Polices du système, aucun appel extérieur.
   Couleurs « ardoise et ocre » (choisies par Jérémy le 26/10/2026) ; le vert de WhatsApp ne sert que dans le
   téléphone dessiné. */

:root {
  --fond: #f4f3f0;
  --fond-carte: #ffffff;
  --encre: #24282d;
  --encre-douce: #5b6168;
  --ocre: #a86d14;
  --ocre-vif: #e0a43a;
  --trait: #dcdad5;
  --ardoise: #24282d;
  --sur-ardoise: #ffffff;
  --sur-ardoise-doux: #b9bcc0;
  --avant: #e4e2dd;
  --bouton: #24282d;
  --bouton-survol: #3a4048;
  --bouton-texte: #ffffff;
  --bouton-icone: #e0a43a;
  --ecran: #ece5dc;
  --bulle-moi: #dcf5d0;
  --bulle-elle: #ffffff;
  --bulle-texte: #24282d;
  --bulle-douce: #6b7178;
  --ombre: 0 18px 40px -18px rgba(20, 24, 28, 0.4);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #17191c;
    --fond-carte: #22252a;
    --encre: #eceae6;
    --encre-douce: #a9adb3;
    --ocre: #e0a43a;
    --trait: #33373d;
    --ardoise: #2a2e34;
    --avant: transparent;
    --bouton: #e0a43a;
    --bouton-survol: #eab65a;
    --bouton-texte: #17191c;
    --bouton-icone: #17191c;
    --ecran: #0f1113;
    --bulle-moi: #1f4d33;
    --bulle-elle: #262a2f;
    --bulle-texte: #eceae6;
    --bulle-douce: #a9adb3;
    --ombre: 0 18px 40px -18px rgba(0, 0, 0, 0.8);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
}

a { color: var(--ocre); }
a:hover { color: var(--encre); }

.conteneur {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1rem;
}

/* En-tête */
.entete { padding: 1.25rem 0; }
.entete a {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--encre);
  text-decoration: none;
}

/* Haut de page */
.haut {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.haut h1 {
  font-weight: 800;
  font-size: clamp(3.25rem, 12vw, 5.75rem);
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 0 0 1rem;
}
@media (min-width: 52rem) {
  .haut {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 3rem;
    align-items: center;
  }
}

/* Devis dessiné, à droite du haut de page sur grand écran */
.feuille {
  margin: 2.5rem auto 0;
  width: 100%;
  max-width: 24rem;
  background: #fff;
  color: #24282d;
  border-radius: 0.4rem;
  padding: 1.4rem 1.4rem 1.2rem;
  box-shadow: var(--ombre);
  transform: rotate(1.5deg);
  font-size: 0.8125rem;
  line-height: 1.35;
  position: relative;
}
@media (min-width: 52rem) {
  .feuille { margin: 0; justify-self: end; }
}
.feuille-haut {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid #24282d;
}
.feuille-haut strong { display: block; font-size: 0.875rem; }
.feuille-haut span { color: #6b7178; font-size: 0.75rem; }
.feuille-num { text-align: right; }
.feuille-objet { font-weight: 650; margin: 0.9rem 0 0.6rem; }
.feuille table { width: 100%; border-collapse: collapse; }
.feuille td { padding: 0.4rem 0; border-bottom: 1px solid #e7e5e0; vertical-align: top; }
.feuille td:last-child { text-align: right; white-space: nowrap; padding-left: 0.75rem; }
.feuille small { display: block; color: #6b7178; font-size: 0.6875rem; }
.feuille .total td { font-weight: 800; font-size: 0.9375rem; border-bottom: 0; padding-top: 0.7rem; }
.feuille .ttc td { color: #6b7178; font-size: 0.75rem; border-bottom: 0; padding-top: 0; }
.feuille-tampon {
  position: absolute;
  right: 1.2rem;
  bottom: -0.9rem;
  margin: 0;
  background: #a86d14;
  color: #fff;
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.4rem 0.75rem;
  border-radius: 0.3rem;
  transform: rotate(-3deg);
}

.accroche {
  font-weight: 650;
  font-size: clamp(1.4rem, 4.6vw, 2rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
}
.accroche em { font-style: normal; color: var(--ocre); }
.chapeau {
  color: var(--encre-douce);
  margin: 0 0 2rem;
  max-width: 34rem;
}

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--bouton);
  color: var(--bouton-texte);
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none;
  padding: 1rem 1.4rem;
  border-radius: 0.6rem;
  box-shadow: 0 8px 20px -10px rgba(20, 24, 28, 0.6);
  transition: background 0.15s, transform 0.15s;
}
.bouton:hover, .bouton:focus-visible { background: var(--bouton-survol); color: var(--bouton-texte); transform: translateY(-1px); }
.bouton:focus-visible { outline: 3px solid var(--ocre-vif); outline-offset: 3px; }
.bouton svg { width: 1.35rem; height: 1.35rem; flex: none; color: var(--bouton-icone); }
.sous-bouton {
  font-size: 0.9375rem;
  color: var(--encre-douce);
  margin: 0.9rem 0 0;
}

/* Sections */
.section {
  padding: 3rem 0;
  border-top: 1px solid var(--trait);
}
.etiquette {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ocre);
  margin: 0 0 0.75rem;
}
.section h2, .fin h2 {
  font-weight: 800;
  font-size: clamp(1.6rem, 5vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 1.75rem;
}

/* Avant / avec Honorine */
.avant-apres {
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 40rem) {
  .avant-apres { grid-template-columns: 1fr 1fr; gap: 1rem; }
}
.avant-apres > div {
  border-radius: 1rem;
  padding: 1.5rem;
}
.avant-apres h3 {
  font-size: 0.8125rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 0.75rem;
}
.avant-apres .grand {
  font-size: clamp(1.25rem, 3.6vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
}
.avant-apres p { margin: 0; }
.avant { background: var(--avant); color: var(--encre-douce); border: 1px solid var(--trait); }
.avant h3 { color: var(--encre-douce); }
.avec { background: var(--ardoise); color: var(--sur-ardoise); }
.avec h3 { color: var(--ocre-vif); }
.avec p { color: var(--sur-ardoise-doux); }
.avec .grand { color: var(--sur-ardoise); }

/* Exemple : texte à gauche, téléphone à droite sur grand écran */
.exemple {
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 52rem) {
  .exemple { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
}
.exemple .explication p { color: var(--encre-douce); margin: 0 0 1rem; }
.exemple .explication h2 { margin-bottom: 1rem; }

/* Téléphone dessiné */
.telephone {
  justify-self: center;
  width: 100%;
  max-width: 21rem;
  margin: 0;
  background: var(--ecran);
  border: 10px solid #111315;
  border-radius: 2.25rem;
  box-shadow: var(--ombre);
  overflow: hidden;
  font-size: 0.9375rem;
  line-height: 1.4;
}
.telephone-haut {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #1f6f45;
  color: #fff;
  padding: 0.75rem 0.9rem;
}
.avatar {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--ardoise);
  color: var(--ocre-vif);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.1rem;
  flex: none;
}
.telephone-haut strong { display: block; font-size: 1rem; }
.telephone-haut span { font-size: 0.75rem; opacity: 0.85; }

.fil {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.9rem 0.7rem 1.1rem;
}
.bulle {
  max-width: 86%;
  padding: 0.5rem 0.65rem 0.35rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  color: var(--bulle-texte);
}
.bulle.moi { align-self: flex-end; background: var(--bulle-moi); border-top-right-radius: 0.2rem; }
.bulle.elle { align-self: flex-start; background: var(--bulle-elle); border-top-left-radius: 0.2rem; }
.bulle p { margin: 0; }
.heure {
  display: block;
  text-align: right;
  font-size: 0.6875rem;
  color: var(--bulle-douce);
  margin-top: 0.15rem;
}

.vocal {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 13rem;
}
.lecture {
  width: 0;
  height: 0;
  border-left: 0.7rem solid var(--bulle-douce);
  border-top: 0.45rem solid transparent;
  border-bottom: 0.45rem solid transparent;
  flex: none;
}
.onde {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 1.6rem;
  flex: 1;
}
.onde i {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: var(--bulle-douce);
  opacity: 0.7;
}
.onde .h30 { height: 30%; }
.onde .h45 { height: 45%; }
.onde .h55 { height: 55%; }
.onde .h60 { height: 60%; }
.onde .h70 { height: 70%; }
.onde .h75 { height: 75%; }
.onde .h85 { height: 85%; }
.onde .h100 { height: 100%; }
.duree { font-size: 0.75rem; color: var(--bulle-douce); }
.transcription {
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--bulle-douce);
  border-top: 1px solid rgba(127, 127, 127, 0.2);
  margin-top: 0.4rem !important;
  padding-top: 0.35rem;
}

.pdf {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(127, 127, 127, 0.1);
  border-radius: 0.5rem;
  padding: 0.55rem 0.6rem;
  margin-bottom: 0.4rem;
}
.pdf-icone {
  background: #b23a26;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  border-radius: 0.25rem;
  padding: 0.5rem 0.3rem;
  flex: none;
}
.pdf strong { display: block; font-size: 0.8125rem; }
.pdf span { font-size: 0.6875rem; color: var(--bulle-douce); }

.choix {
  align-self: flex-start;
  width: 86%;
  display: grid;
  gap: 0.3rem;
  margin-top: -0.2rem;
}
.choix span {
  display: block;
  text-align: center;
  background: var(--bulle-elle);
  color: #1d7fbf;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 0.6rem;
  padding: 0.45rem;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
@media (prefers-color-scheme: dark) {
  .choix span { color: #53bdeb; }
}

/* Prix */
.prix-bloc {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 46rem) {
  .prix-bloc { grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
}
.prix {
  background: var(--fond-carte);
  border: 1px solid var(--trait);
  border-radius: 1rem;
  padding: 1.75rem;
}
.prix .montant {
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--encre);
  margin: 0 0 0.6rem;
}
.prix .montant small { font-size: 1.0625rem; font-weight: 500; letter-spacing: 0; color: var(--encre-douce); }
.prix p { margin: 0; color: var(--encre-douce); }
.ia h3 { font-size: 1.125rem; font-weight: 800; margin: 0 0 0.5rem; }
.ia p { color: var(--encre-douce); margin: 0 0 0.8rem; }

/* Bloc final, fond ardoise */
.fin {
  background: var(--ardoise);
  color: var(--sur-ardoise);
  text-align: center;
  padding: 4rem 0;
}
.fin h2 { margin-bottom: 0.75rem; }
.fin p { color: var(--sur-ardoise-doux); margin: 0 0 1.75rem; }
.fin .bouton { background: var(--ocre-vif); color: #17191c; }
.fin .bouton svg { color: #17191c; }
.fin .bouton:hover, .fin .bouton:focus-visible { background: #eab65a; color: #17191c; }

/* Pied de page */
.pied {
  background: var(--ardoise);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.75rem 0 2.25rem;
  font-size: 0.875rem;
  color: var(--sur-ardoise-doux);
}
.pied .conteneur {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
}
.pied nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.pied a { color: var(--sur-ardoise-doux); }
.pied a:hover { color: var(--ocre-vif); }

/* Pages de texte (mentions, confidentialité) */
.texte {
  max-width: 44rem;
  padding: 1.5rem 0 3.5rem;
}
.texte h1 {
  font-weight: 800;
  font-size: clamp(2rem, 7vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 0.5rem;
}
.texte .maj { color: var(--encre-douce); font-size: 0.9375rem; margin: 0 0 2rem; }
.texte h2 {
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  margin: 2.25rem 0 0.75rem;
}
.texte ul { padding-left: 1.25rem; }
.texte li { margin-bottom: 0.4rem; }
.texte .fort { font-size: 1.125rem; }