/* Papote — design system. Palette et typo actées dans la spec §5. */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/atkinson-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/atkinson-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --creme: #FAF5EE;
  --brun: #3B2F2A;
  /* Assombri depuis #C05B3C (4.03:1 sur --creme, sous le seuil AA texte
     normal 4.5:1) : cette teinte sert de couleur de texte (liens, boutons),
     pas seulement de fond, donc l'AA texte s'applique. #B64E36 ≈ 4.7:1. */
  --terracotta: #B64E36;
  --sauge: #7A8B6F;
  --ocre: #E8B15C;
  --rouille: #A93E2E;
  --radius: 14px;
  --font-titres: "Fraunces", Georgia, serif;
  --font-texte: "Atkinson Hyperlegible", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--brun);
  font-family: var(--font-texte);
  font-size: 18px;
  line-height: 1.65;
}
h1, h2, h3 { font-family: var(--font-titres); line-height: 1.2; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); }
a { color: var(--terracotta); }

.btn {
  display: inline-block;
  min-height: 52px;
  padding: 0.8rem 1.8rem;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-texte);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.btn--primary { background: var(--terracotta); color: var(--creme); }
.btn--secondary { background: transparent; color: var(--terracotta); border: 2px solid var(--terracotta); }
.btn--danger { background: var(--rouille); color: var(--creme); }

summary.btn { list-style: none; }
summary.btn::-webkit-details-marker { display: none; }

.badge {
  display: inline-block;
  background: color-mix(in srgb, var(--terracotta) 14%, var(--creme));
  color: var(--terracotta);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  margin-right: 0.4rem;
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem clamp(1rem, 5vw, 4rem);
}
.site-nav a { margin-left: 1.5rem; text-decoration: none; font-weight: 700; }
.site-footer {
  padding: 3rem clamp(1rem, 5vw, 4rem);
  border-top: 1px solid color-mix(in srgb, var(--brun) 15%, transparent);
  text-align: center;
}
main > section { padding: 4rem clamp(1rem, 5vw, 4rem); }
.card {
  background: color-mix(in srgb, var(--creme) 60%, white);
  border: 1px solid color-mix(in srgb, var(--brun) 12%, transparent);
  border-radius: var(--radius);
  padding: 2rem;
}
.messages .message { padding: 0.8rem 1.2rem; border-radius: var(--radius); margin: 0.5rem auto; max-width: 60ch; }
.message--success { background: color-mix(in srgb, var(--sauge) 25%, var(--creme)); }
.message--error { background: color-mix(in srgb, var(--rouille) 18%, var(--creme)); }

/* --- Page d'accueil --- */

.hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.5rem;
  align-items: center;
}
.hero__sous-titre { font-size: 1.15rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero__image {
  /* La dame occupe la droite de la photo (1600x1065), le reste étant du mur
     vide et la fenêtre. On recadre en portrait, puis on zoome en ancrant le
     bas pour la rapprocher sans toucher au fichier source. */
  max-width: 520px;
  margin: 0 auto;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
}
.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% 50%;
  transform: scale(1.2);
  transform-origin: 50% 100%;
  display: block;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
}
.hero__telephone {
  margin-top: 1.4rem;
  font-size: 1.05rem;
  font-weight: 700;
}
.hero__telephone a {
  font-size: 1.3rem;
  white-space: nowrap;
}
.chip-france {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.45rem 1rem;
  background: color-mix(in srgb, var(--creme) 55%, white);
  border: 1px solid color-mix(in srgb, var(--brun) 22%, transparent);
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--brun);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--brun) 10%, transparent);
}
.chip-france svg { border-radius: 3px; flex-shrink: 0; box-shadow: 0 0 0 1px color-mix(in srgb, var(--brun) 15%, transparent); }

.footer-france {
  margin-top: 1.2rem;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--brun) 70%, var(--creme));
}

.desamorcage {
  text-align: center;
  background: color-mix(in srgb, var(--sauge) 18%, var(--creme));
  border-radius: var(--radius);
}
.desamorcage p { max-width: 60ch; margin: 1rem auto 0; }

.video { text-align: center; }
.video video { width: 100%; max-width: 900px; border-radius: var(--radius); }
.video__placeholder { max-width: 640px; margin: 0 auto; text-align: center; }
.video__placeholder p:first-child { font-size: 1.4rem; font-weight: 700; }

.etapes__photo {
  margin: 1.5rem auto 0;
  max-width: 360px;
  text-align: center;
}
.etapes__photo img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}
.etapes__liste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}
.etapes__liste h3 { margin-top: 0; }
.transparence {
  max-width: 70ch;
  margin: 2rem auto 0;
  padding: 1.2rem 1.5rem;
  background: color-mix(in srgb, var(--ocre) 16%, var(--creme));
  border-radius: var(--radius);
}

.etapes--aidant .sms-apercu {
  max-width: 32ch;
  margin: 2rem auto 0;
  border: 1px solid color-mix(in srgb, var(--sauge) 60%, transparent);
}
.sms-apercu p { margin: 0 0 0.6rem; }
.sms-apercu p:last-child { margin-bottom: 0; }

.offres__grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
.offre { text-align: left; }
.offre__prix { font-size: 2rem; font-family: var(--font-titres); font-weight: 700; margin: 0.4rem 0 1rem; }
.offre__prix span { font-size: 1rem; font-family: var(--font-texte); font-weight: 400; }
.offre ul { padding-left: 1.2rem; margin-bottom: 1.5rem; }
.offre li { margin-bottom: 0.5rem; }
.offre--vedette { border: 2px solid var(--terracotta); position: relative; }
.offre__badge {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.2rem 0.9rem;
  background: var(--terracotta);
  color: var(--creme);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}
.offres__note { text-align: center; margin-top: 1.5rem; font-weight: 700; }

.temoignages { text-align: center; }
.temoignages blockquote {
  max-width: 70ch;
  margin: 2rem auto 0;
  text-align: left;
}
.temoignages footer { margin-top: 1rem; font-weight: 700; }

.faq { max-width: 80ch; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid color-mix(in srgb, var(--brun) 20%, transparent);
  padding: 1.2rem 0;
}
.faq summary {
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
}
.faq details p { margin: 1rem 0 0; }

.cta-final {
  text-align: center;
  background: color-mix(in srgb, var(--terracotta) 12%, var(--creme));
  border-radius: var(--radius);
}
.cta-final p { max-width: 60ch; margin: 1rem auto 0; }

/* --- Tarifs / fonctionnement / légal --- */

.tarifs-hero { text-align: center; }
.tarifs-hero p { max-width: 60ch; margin: 1rem auto 0; }

.tarifs-tableau { overflow-x: auto; }
.tarifs-tableau table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 auto;
}
.tarifs-tableau th, .tarifs-tableau td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--brun) 15%, transparent);
}
.tarifs-tableau thead th { font-family: var(--font-titres); font-size: 1.2rem; }
.tarifs-tableau tbody th { font-weight: 700; }

.legal { max-width: 70ch; margin: 0 auto; }
.legal h2 { margin-top: 2.5rem; }

.footer-legal { margin-top: 1.5rem; }

/* --- Authentification --- */

.auth-card {
  max-width: 28rem;
  margin: 3rem auto;
}
.auth-card h1 { text-align: center; margin-top: 0; }
.auth-card form > div { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.2rem; }
.auth-card label { font-weight: 700; }
.auth-card input {
  padding: 0.7rem 1rem;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--brun) 25%, transparent);
  font-family: var(--font-texte);
  font-size: 1rem;
  background: var(--creme);
  color: var(--brun);
}
.auth-card .helptext { font-size: 0.85rem; color: color-mix(in srgb, var(--brun) 70%, transparent); }
.auth-card .errorlist { list-style: none; padding: 0; margin: 0 0 0.4rem; color: var(--rouille); font-size: 0.9rem; }
.auth-card .btn--primary { width: 100%; text-align: center; }
.auth-card__etape { font-size: 0.9rem; color: color-mix(in srgb, var(--brun) 70%, transparent); margin-bottom: 1rem; }
.auth-card__liens { margin-top: 1.5rem; text-align: center; font-size: 0.95rem; display: flex; flex-direction: column; gap: 0.4rem; }
.logout-form { display: inline; }
.logout-form button {
  background: none;
  border: none;
  padding: 0;
  margin-left: 1.5rem;
  font: inherit;
  font-weight: 700;
  color: var(--terracotta);
  cursor: pointer;
  text-decoration: none;
}

/* --- Tunnel de souscription --- */

.auth-card--large { max-width: 40rem; }
.auth-card--large form > div { margin-bottom: 1.2rem; }
.auth-card--large textarea {
  padding: 0.7rem 1rem;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--brun) 25%, transparent);
  font-family: var(--font-texte);
  font-size: 1rem;
  background: var(--creme);
  color: var(--brun);
  width: 100%;
}

.jours-appel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.4rem;
}
.jours-appel div {
  background: color-mix(in srgb, var(--creme) 60%, white);
  border: 1px solid color-mix(in srgb, var(--brun) 20%, transparent);
  border-radius: var(--radius);
  padding: 0.4rem 0.9rem;
}
.jours-appel label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 400;
}

.disclaimer-sauge {
  background: color-mix(in srgb, var(--sauge) 18%, var(--creme));
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
}
.disclaimer-sauge label {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-weight: 700;
}

.offre-form { margin: 0; }
.paiement-securise {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--brun) 70%, transparent);
}

.merci-card { max-width: 34rem; text-align: center; }

.portal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid color-mix(in srgb, var(--brun) 15%, transparent);
  font-weight: 700;
}

.bandeau-inactif {
  background: color-mix(in srgb, var(--ocre) 30%, var(--creme));
  border: 1px solid var(--ocre);
  border-radius: var(--radius);
  padding: 1.2rem 1.5rem;
  margin-bottom: 1.5rem;
}

.portail__cartes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.badge--alerte {
  display: inline-block;
  background: color-mix(in srgb, var(--rouille) 18%, var(--creme));
  color: var(--rouille);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

.jauge {
  background: color-mix(in srgb, var(--brun) 12%, transparent);
  border-radius: 999px;
  height: 0.6rem;
  overflow: hidden;
  margin-top: 0.5rem;
}
.jauge div {
  background: var(--terracotta);
  height: 100%;
}

/* Badges historique appels */
.badge--vigilance {
  display: inline-block;
  background: color-mix(in srgb, var(--ocre) 16%, var(--creme));
  /* --ocre (#E8B15C) en texte direct ne tient que ~1.8:1 sur ce fond très
     clair (color-mix(#E8B15C 16%, #FAF5EE) = #F7EAD7). Premier correctif
     (#946318) ne tenait que 4.36:1 sur ce fond réel (calculé par erreur
     contre --creme au lieu du fond mixé) — sous le seuil AA 4.5:1.
     #7D5314 (même famille ocre, plus sombre) tient ~5.68:1, vérifié par
     script Python (voir task-13-report.md, section fix contraste). */
  color: #7D5314;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

.badge--critique {
  display: inline-block;
  background: color-mix(in srgb, var(--rouille) 18%, var(--creme));
  color: var(--rouille);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

/* Cartes historique appels */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--brun) 15%, transparent);
}

.card-date {
  font-weight: 700;
  color: var(--brun);
  margin: 0;
  font-size: 0.95rem;
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.card-placeholder {
  color: color-mix(in srgb, var(--brun) 60%, transparent);
  font-style: italic;
  margin: 0;
}

.mood-score {
  font-weight: 700;
  color: var(--brun);
  margin: 0;
}

.attention-points {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0 0;
  font-size: 0.95rem;
}

.attention-points li {
  padding-left: 1.5rem;
  position: relative;
  color: color-mix(in srgb, var(--brun) 80%, transparent);
  margin-bottom: 0.4rem;
}

.attention-points li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--ocre);
  font-weight: 700;
}

/* Pagination historique appels */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--brun) 15%, transparent);
  flex-wrap: wrap;
}

.pagination-link {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: color-mix(in srgb, var(--brun) 8%, var(--creme));
  color: var(--brun);
  text-decoration: none;
  border-radius: var(--radius);
  font-size: 0.9rem;
  transition: background 0.2s ease;
}

.pagination-link:hover {
  background: color-mix(in srgb, var(--brun) 15%, var(--creme));
}

.pagination-info {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--brun) 70%, transparent);
}

@media (max-width: 1024px) {
  .offres__grille { grid-template-columns: 1fr; max-width: 34rem; margin-left: auto; margin-right: auto; }
}

@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; }
  .hero__image { order: -1; }
  .etapes__liste { grid-template-columns: 1fr; }
  .portail__cartes { grid-template-columns: 1fr; }
  .site-header { flex-wrap: wrap; gap: 0.5rem; }
  .chip-france { order: 3; }
}