/* Papote — design system. Palette et typo actées dans la spec §5. */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin.eb2486760f75.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/atkinson-regular.f1f8a8210104.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/atkinson-bold.13a58e05dfd2.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;
}
/* L'extrait audio remonté dans le héro. Le lecteur natif est gardé tel
   quel — ses contrôles sont accessibles au clavier et lus par les lecteurs
   d'écran sans rien écrire — et seulement borné en largeur : laissé libre,
   il s'étire jusqu'au bord de la colonne et pèse plus lourd que le bouton
   qu'il est censé préparer. */
.hero__preview-audio { margin: 1.3rem 0; }
.hero__audio-label {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
}
.hero__audio-player {
  display: block;
  width: 100%;
  max-width: 24rem;
}

/* Les trois réassurances sous le bouton : une ligne de texte discret, pas
   trois pastilles. Elles doivent se lire d'un coup d'œil sans concurrencer
   l'appel à l'action juste au-dessus. */
.hero__reassurance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0 0;
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--brun) 80%, var(--creme));
}
.reassurance-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.reassurance-item svg {
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brun) 15%, transparent);
}
.reassurance-separator { color: color-mix(in srgb, var(--brun) 45%, var(--creme)); }

/* L'essai gratuit se pose à côté du bouton principal sans introduire un
   style de plus sur la page. Le terracotta le distingue de la ligne de
   réassurance en dessous, qui rassure là où celui-ci invite. */
.chip-essai {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0.45rem 1rem;
  background: color-mix(in srgb, var(--terracotta) 14%, white);
  border: 1px solid color-mix(in srgb, var(--terracotta) 40%, 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);
}

/* Variantes mobile du sous-titre, du déclencheur audio et de la ligne de
   réassurance : masquées par défaut (desktop), affichées par la media query
   `max-width: 767px` ci-dessous. Voir cette media query pour le contexte. */
.hero__sous-titre--mobile,
.hero__audio-trigger,
.hero__reassurance--mobile {
  display: none;
}
.hero__audio-trigger {
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.1rem;
  background: color-mix(in srgb, var(--terracotta) 10%, white);
  border: 1px solid color-mix(in srgb, var(--terracotta) 35%, transparent);
  border-radius: 999px;
  font-family: var(--font-texte);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--brun);
  cursor: pointer;
}
.hero__audio-trigger svg { flex-shrink: 0; color: var(--terracotta); }
.hero__audio-trigger.is-playing { color: var(--terracotta); }
.hero__reassurance--mobile {
  margin: 0.7rem 0 0;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--brun) 70%, var(--creme));
}
.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; }

/* Écoute de la voix — l'extrait enregistré et le numéro à appeler, côte à
   côte : le visiteur qui veut juger sur pièce choisit entre les deux sans
   avoir à chercher. Deux cartes de la même famille que .card, la seconde
   teintée terracotta parce qu'elle porte l'action, pas la démonstration. */
.ecoute__chapo {
  max-width: 60ch;
  margin: 0.5rem 0 2rem;
}
.ecoute__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  align-items: start;
}
.ecoute__extrait { margin: 0; }
.ecoute__extrait figcaption {
  font-family: var(--font-titres);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.ecoute__lecteur { width: 100%; }
.ecoute__transcription {
  margin: 1.2rem 0 0;
  font-size: 0.95rem;
  font-style: italic;
  color: color-mix(in srgb, var(--brun) 78%, var(--creme));
}
.ecoute__appel {
  background: color-mix(in srgb, var(--terracotta) 10%, white);
  border-color: color-mix(in srgb, var(--terracotta) 35%, transparent);
}
.ecoute__appel h3 { margin-top: 0; }
.ecoute__invite { font-weight: 700; }
.ecoute__numero {
  font-size: 1.5rem;
  font-weight: 700;
  white-space: nowrap;
}
.ecoute__note {
  margin-bottom: 0;
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--brun) 75%, var(--creme));
}

.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; }
.etapes__materiel {
  max-width: 70ch;
  margin: 2rem auto 0;
  padding: 1.2rem 1.5rem;
  background: color-mix(in srgb, var(--sauge) 18%, var(--creme));
  border-radius: var(--radius);
  font-weight: 700;
}
.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 .apercu-compte-rendu {
  max-width: 46ch;
  margin: 2rem auto 0;
  border: 1px solid color-mix(in srgb, var(--sauge) 60%, transparent);
}
.apercu-compte-rendu p { margin: 0 0 0.6rem; }
.apercu-compte-rendu 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; }
/* L'essai gratuit se lit avant la grille, pas après : c'est ce qui décide un
   visiteur qui découvre les prix. Le terracotta le sort du chapô sans en
   faire un encart de plus. */
.tarifs-hero__essai {
  font-weight: 700;
  color: var(--terracotta);
}

.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; }
.google-signin { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.google-signin__separateur {
  width: 100%;
  text-align: center;
  color: color-mix(in srgb, var(--brun) 60%, transparent);
  font-size: 0.85rem;
  border-bottom: 1px solid color-mix(in srgb, var(--brun) 15%, transparent);
  line-height: 0.1em;
  margin: 0.5rem 0;
}
.google-signin__separateur span { background: var(--creme); padding: 0 0.8rem; }
.google-signin__erreur { color: var(--rouille); font-size: 0.9rem; text-align: center; }
.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;
}

/* Resume court en tete de carte, recit detaille en dessous */
.card-resume {
  font-weight: 600;
  color: var(--brun);
  margin: 0;
}

.card-detail {
  margin: 0;
  color: color-mix(in srgb, var(--brun) 85%, transparent);
  line-height: 1.6;
}

.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);
}

/* --- Blog --- */

.blog-liste { max-width: 70ch; margin: 0 auto; }
.blog-liste__chapo { font-size: 1.1rem; }
.blog-liste__articles { list-style: none; padding: 0; margin: 2.5rem 0 0; }
.blog-carte {
  padding: 1.6rem 0;
  border-top: 1px solid color-mix(in srgb, var(--brun) 15%, transparent);
}
.blog-carte h2 { margin: 0 0 0.6rem; font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.blog-carte h2 a { text-decoration: none; }
.blog-carte h2 a:hover { text-decoration: underline; }
.blog-carte p { margin: 0 0 0.8rem; }
.blog-carte__lien { font-weight: 700; text-decoration: none; }

.blog-article { max-width: 70ch; margin: 0 auto; }
.blog-article__retour { font-size: 0.95rem; margin-bottom: 1.5rem; }
.blog-article__retour a { text-decoration: none; }
.blog-article h2 { margin-top: 2.5rem; }
.blog-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 0.95rem;
}
.blog-article th, .blog-article td {
  padding: 0.8rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid color-mix(in srgb, var(--brun) 15%, transparent);
}
.blog-article thead th { font-family: var(--font-titres); }
.blog-article__appel {
  margin-top: 3rem;
  padding: 1.6rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ocre) 18%, var(--creme));
}
.blog-article__appel p { margin-top: 0; }

/* --- Popup de capture d'e-mails (aimant à prospects) --- */

.popup-lead {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
/* `display: flex` ci-dessus l'emporterait sur le `display: none` que le
   navigateur applique à l'attribut `hidden` : il faut le redire. */
.popup-lead[hidden] { display: none; }

.popup-lead__voile {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--brun) 55%, transparent);
}

.popup-lead__boite {
  position: relative;
  width: min(34rem, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 2.2rem;
  background: var(--creme);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px color-mix(in srgb, var(--brun) 35%, transparent);
  animation: popup-lead-entree 0.25s ease-out;
}
.popup-lead__boite:focus { outline: none; }

@keyframes popup-lead-entree {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .popup-lead__boite { animation: none; }
}

.popup-lead__fermer {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--brun);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 999px;
}
.popup-lead__fermer:hover { background: color-mix(in srgb, var(--brun) 8%, transparent); }

.popup-lead__surtitre {
  margin: 0 0 0.4rem;
  color: var(--terracotta);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.popup-lead__boite h2 {
  margin: 0 0 0.8rem;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  padding-right: 2.5rem;
}
.popup-lead__chapo { margin: 0 0 1.4rem; font-size: 1rem; }

.popup-lead__label {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
}
.popup-lead__email {
  width: 100%;
  min-height: 52px;
  padding: 0.7rem 1rem;
  font-family: var(--font-texte);
  font-size: 1rem;
  color: var(--brun);
  background: #fff;
  border: 2px solid color-mix(in srgb, var(--brun) 25%, transparent);
  border-radius: var(--radius);
}
.popup-lead__email:focus {
  outline: 2px solid var(--terracotta);
  outline-offset: 1px;
}

/* Piège à robots : hors de l'écran plutôt qu'en display:none, que certains
   robots savent détecter. */
.popup-lead__piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.popup-lead__consentement {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 1rem 0 1.2rem;
  font-size: 0.9rem;
  line-height: 1.45;
}
.popup-lead__consentement input {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 0.15rem;
  accent-color: var(--terracotta);
}

.popup-lead__envoi { width: 100%; }

.popup-lead__mentions {
  margin: 1rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--brun) 75%, transparent);
}

/* Message de retour après soumission : il remplace le formulaire en cas de
   succès, s'affiche sous lui en cas d'échec (pour pouvoir corriger et
   renvoyer). */
.popup-lead__retour {
  margin: 1.2rem 0 0;
  padding: 0.9rem 1rem;
  font-size: 0.95rem;
  line-height: 1.5;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ocre) 22%, var(--creme));
}
.popup-lead__retour[hidden] { display: none; }
.popup-lead__retour--erreur {
  background: color-mix(in srgb, var(--terracotta) 15%, var(--creme));
}

/* Le fond ne défile plus derrière la boîte ouverte. */
body.popup-lead-ouvert { overflow: hidden; }

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

@media (max-width: 720px) {
  /* Le héro doit tenir au-dessus du pli d'un écran de 375x667 : titre,
     lecteur de voix, bouton et réassurance, sans défilement. Le trafic Meta
     Ads arrive à 90 % en mobile, et ce qui tombe sous le pli n'est pas lu.

     La photo passait devant le texte (`order: -1`) : à 375 px elle remplissait
     l'écran d'accueil à elle seule et repoussait l'argumentaire entier hors
     champ. Elle repasse sous le texte, où elle illustre au lieu d'occuper. */
  .hero {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
  }
  .hero h1 {
    font-size: 1.55rem;
    margin: 0 0 0.6rem;
  }
  .hero__sous-titre {
    margin: 0;
    font-size: 1rem;
    line-height: 1.45;
  }
  .hero__preview-audio { margin: 1rem 0; }
  .hero__actions {
    gap: 0.6rem;
    margin: 0;
  }
  /* Un pouce, une cible : le bouton prend la largeur plutôt que de partager
     sa ligne avec la pastille. */
  .hero__actions .btn {
    width: 100%;
    text-align: center;
  }
  .hero__reassurance {
    margin-top: 0.7rem;
    gap: 0.4rem;
    font-size: 0.9rem;
  }
  .hero__image { max-width: 300px; }

  /* L'en-tête est la première chose qui mange le pli : la navigation tenait
     sur deux lignes de 18 px. Elle reste lisible en un peu plus petit et
     rend ~70 px au héro. */
  .site-header {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.7rem clamp(1rem, 5vw, 4rem);
  }
  .site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 1.1rem;
  }
  .site-nav a {
    margin-left: 0;
    font-size: 0.95rem;
  }

  .etapes__liste { grid-template-columns: 1fr; }
  .portail__cartes { grid-template-columns: 1fr; }
  .popup-lead { padding: 0.8rem; }
  .popup-lead__boite { padding: 1.6rem 1.2rem; }
}

@media (max-width: 767px) {
  /* CTA « Essayer 14 jours gratuitement » au-dessus de la ligne de
     flottaison mobile (prompt CRO 2026-09-06) : l'en-tête et le lecteur
     audio, les deux plus gros consommateurs de hauteur avant le bouton,
     sont allégés. Rien ici ne touche au rendu >=768px. */

  /* 1. En-tête : les liens texte (Accueil, Comment ça marche, Tarifs)
     disparaissent, seule reste l'action utile (Connexion / Mon espace). */
  .site-nav__primary { display: none; }

  /* 2. Lecteur audio : le `<audio controls>` natif en pleine largeur cède
     la place à un déclencheur compact qui joue le même fichier. */
  .hero__audio-label,
  .hero__audio-player {
    display: none;
  }
  .hero__audio-trigger { display: inline-flex; }

  /* 3. Sous-titre : version courte. */
  .hero__sous-titre--desktop { display: none; }
  .hero__sous-titre--mobile { display: block; }

  /* 4. CTA et réassurance : la pastille « Sans engagement » isolée laisse
     place à une ligne unique et discrète. */
  .chip-essai { display: none; }
  .hero__reassurance--desktop { display: none; }
  .hero__reassurance--mobile { display: block; }
}


/* --- Page de suivi de l'aidant (/suivi/<jeton>/) ---------------------------
   Un seul fil vertical, pensé pouce en main : pas de grille, des cibles
   larges, et rien qui demande de zoomer. Le reste du site descend en une
   colonne sous 700 px ; ici c'est la mise en page de base, y compris sur un
   grand écran, parce que la page arrive quasi toujours d'un SMS. */

.suivi {
  max-width: 34rem;
  margin: 0 auto;
}
.suivi__entete { margin-bottom: 2rem; }
.suivi__entete h1 { margin: 0 0 0.6rem; }

/* La pastille d'abonnement : l'état du service se lit avant tout le reste,
   sans avoir à interpréter une couleur seule (le point coloré est doublé du
   mot « actif » / « en pause »). */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
}
.pastille::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.pastille--active {
  background: color-mix(in srgb, var(--sauge) 22%, var(--creme));
  /* --sauge (#7A8B6F) en texte ne tient pas l'AA sur ce fond clair : #4C5A43
     (même famille) donne ~5.9:1 sur color-mix(#7A8B6F 22%, #FAF5EE). */
  color: #4C5A43;
}
.pastille--inactive {
  background: color-mix(in srgb, var(--rouille) 18%, var(--creme));
  color: var(--rouille);
}

.suivi__bloc { margin-bottom: 2.5rem; }
.suivi__bloc h2 { font-size: 1.35rem; margin: 0 0 0.8rem; }
.suivi__prochain { font-size: 1.15rem; font-weight: 700; margin: 0; }
.suivi__vide { color: color-mix(in srgb, var(--brun) 65%, transparent); margin: 0; }

/* Les carnets de souvenirs du mois (formule Compagnie). Une liste de liens
   et rien de plus : la cible fait 44 px de haut comme les cases du
   formulaire, parce que c'est le même pouce qui vise sur le même écran. */
.suivi__livrets { list-style: none; margin: 0; padding: 0; }
.suivi__livrets li { border-top: 1px solid color-mix(in srgb, var(--brun) 12%, transparent); }
.suivi__livrets li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--brun) 12%, transparent); }
.suivi__livrets a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 0;
  font-weight: 700;
}

.suivi__champ { margin-bottom: 1.6rem; }
.suivi__champ > label,
.suivi__groupe > legend {
  display: block;
  font-weight: 700;
  margin-bottom: 0.5rem;
  padding: 0;
}
/* Le <fieldset> des cases et des boutons radio, dépouillé de son cadre : il
   est là pour que <legend> étiquette le groupe, pas pour dessiner une boîte. */
.suivi__groupe { border: 0; padding: 0; margin: 0 0 1.6rem; min-width: 0; }
/* Chaque choix fait 44 px de haut : la cible qu'un pouce touche sans viser,
   étiquette comprise — on coche en touchant le mot, pas la petite case. */
.suivi__groupe label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  cursor: pointer;
}
.suivi__champ input[type="radio"],
.suivi__champ input[type="checkbox"] {
  width: 1.3rem;
  height: 1.3rem;
  accent-color: var(--terracotta);
  flex: 0 0 auto;
}
.suivi__champ select {
  width: 100%;
  min-height: 52px;
  padding: 0.6rem 0.8rem;
  font-family: var(--font-texte);
  font-size: 1.05rem;
  color: var(--brun);
  background: color-mix(in srgb, var(--creme) 60%, white);
  border: 1px solid color-mix(in srgb, var(--brun) 30%, transparent);
  border-radius: var(--radius);
}
.suivi__champ .helptext {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--brun) 70%, transparent);
  margin: 0.4rem 0 0;
}
.suivi__champ .errorlist {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem;
  color: var(--rouille);
  font-size: 0.95rem;
  font-weight: 700;
}
.suivi__form .btn--primary { width: 100%; text-align: center; }

.suivi__appel { padding: 1.2rem; margin-bottom: 1rem; }
.suivi__appel .card-header { margin-bottom: 0.6rem; padding-bottom: 0.6rem; }
.suivi__statut {
  margin: 0 0 0.5rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--brun) 75%, transparent);
  font-size: 0.95rem;
}

.suivi__pied {
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--brun) 70%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--brun) 15%, transparent);
  padding-top: 1.5rem;
}
/* --- Bandeau de consentement aux cookies publicitaires ---------------------
   Une carte posée en bas de l'écran, non modale : rien n'est grisé derrière,
   le visiteur peut continuer à lire — c'est justement ce qui rend le refus
   indolore. Le fond est opaque et le liseré marqué, sinon le texte se perd
   sur les pages claires.

   Une carte et non plus une barre pleine largeur : la mémé y occupe une vraie
   portion de la surface, en portrait. À 80 px elle se lisait comme l'icône
   d'un bandeau de conformité ; c'est sa taille qui fait la différence entre
   une carte qu'on regarde et une formalité qu'on chasse.

   « Refuser » et « Accepter » ont la même taille et la même place : c'est une
   exigence de la CNIL, pas un choix graphique — ne pas transformer le refus en
   lien discret, et ne pas laisser l'illustration pencher d'un côté : elle est
   à gauche du bloc de texte entier (au-dessus de lui sur un petit écran),
   donc à égale distance des deux boutons. */

.bandeau-cookies {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 90;
  width: min(50rem, calc(100vw - 1.5rem));
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  padding: 1.25rem clamp(1.25rem, 3vw, 1.75rem);
  background: var(--creme);
  border: 2px solid color-mix(in srgb, var(--brun) 20%, transparent);
  border-radius: 20px;
  box-shadow: 0 12px 40px color-mix(in srgb, var(--brun) 22%, transparent);
}
/* `display: flex` ci-dessus l'emporterait sur le `display: none` de
   l'attribut `hidden` : il faut le redire. */
.bandeau-cookies[hidden] { display: none; }

.bandeau-cookies__meme {
  /* Un portrait, pas une icône : la mémé doit se voir avant qu'on lise. Le
     fichier fait 288×360 px et s'affiche à 176 de large — au-dessus de sa
     taille d'affichage, donc net y compris sur un écran dense. Le cadrage 4:5
     est celui du fichier : ne pas le refaire ici avec un `object-fit: cover`,
     qui rognerait l'assiette de cookies, laquelle est le sujet. */
  flex: none;
  width: 176px;
  height: 220px;
  /* Des coins adoucis plutôt qu'un cercle ou qu'un angle vif : le dessin est
     déjà cadré, il n'a pas besoin d'être redécoupé. */
  border-radius: 16px;
}

/* La colonne de droite : ce que la mémé propose, ce que ça engage, la question
   et les deux réponses — dans cet ordre, de haut en bas. */
.bandeau-cookies__mot {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
}
.bandeau-cookies__mot p { margin: 0; }
/* La plaisanterie du titre porte sur l'écart entre les cookies de la mémé et
   celui de Meta ; c'est elle que `aria-labelledby` désigne. */
.bandeau-cookies__titre {
  font-family: var(--font-titres);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  line-height: 1.3;
}
.bandeau-cookies__detail {
  font-size: 0.9rem;
}
/* La question, juste au-dessus des deux réponses : les boutons répondent à
   quelque chose, ils ne sont pas une barre d'outils. */
.bandeau-cookies__question {
  font-weight: 600;
  margin-top: 0.15rem;
}

.bandeau-cookies__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 0.35rem;
}
/* Deux boutons rigoureusement de même largeur : `flex: 1 1 0` les fait partir
   d'une base nulle et partager le reste à parts égales, quelle que soit la
   longueur des deux mots — aucun des deux ne doit se lire comme le chemin
   qu'on attend du visiteur. Le plafond évite qu'ils ne s'étirent en deux
   pavés sur toute la largeur d'une carte de 50 rem. */
.bandeau-cookies__actions .btn {
  flex: 1 1 0;
  min-width: 9rem;
  max-width: 13rem;
  text-align: center;
}
/* « Accepter » porte un liseré de sa propre couleur, donc invisible. Sans lui,
   les deux boutons ne font pas la même largeur : `.btn--secondary` a une
   bordure de 2 px, `flex-basis: 0` part de la boîte de bordure, et « Refuser »
   se retrouve 4 px plus large que « Accepter ». Mesuré dans le navigateur, pas
   déduit — et 4 px d'écart, c'est déjà deux boutons qui n'ont plus tout à fait
   la même place. */
.bandeau-cookies__actions .btn--primary {
  border: 2px solid var(--terracotta);
}

/* Le rappel « Cookies » du pied de page : un bouton, parce qu'il n'emmène
   nulle part, mais dessiné comme les liens légaux qui l'entourent. */
.lien-cookies {
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
  color: var(--terracotta);
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 720px) {
  .bandeau-cookies {
    /* Sur un petit écran la carte peut couvrir une bonne part de la hauteur :
       elle défile alors sur elle-même plutôt que de manger la page. */
    max-height: 80vh;
    overflow-y: auto;
    /* La mémé passe au-dessus du texte : côte à côte, la colonne de droite
       tomberait à trois mots par ligne. `stretch` et non `center` — c'est ce
       qui donne au bloc de texte, donc aux deux boutons, toute la largeur de
       la carte ; centrer le conteneur les laisserait à une largeur de contenu,
       et deux boutons à parts égales d'une largeur floue ne le sont plus tout
       à fait. La mémé, elle, se recentre toute seule juste en dessous. */
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
    padding: 1.1rem;
    border-radius: 18px;
  }
  /* Elle rétrécit, mais elle reste un portrait qu'on regarde : pas question de
     revenir à l'icône. */
  .bandeau-cookies__meme {
    width: 132px;
    height: 165px;
    align-self: center;
  }
  /* Ici, en revanche, les deux boutons prennent toute la largeur : sur un
     écran étroit, deux boutons de 13 rem ne tiendraient pas sur une ligne et
     « Accepter » passerait dessous — donc plus bas que « Refuser », ce qui
     n'est plus la même place. */
  .bandeau-cookies__actions .btn {
    min-width: 0;
    max-width: none;
  }
}

/* Écran court *et* étroit — un téléphone d'ancienne génération en 360×640, où
   la carte empilée dépasse la hauteur disponible et met les deux réponses hors
   de vue. Elles restent atteignables (la carte défile sur elle-même) et à
   égalité stricte, mais devoir faire défiler pour répondre est une friction de
   trop, et elle tombe sur le refus comme sur l'accord. La mémé rétrécit donc
   encore, sans cesser d'être un portrait, et le texte se resserre. Mesuré à
   360×640 et 320×568 : les deux boutons y sont visibles sans rien faire. */
@media (max-width: 720px) and (max-height: 700px) {
  .bandeau-cookies {
    max-height: 92vh;
    gap: 0.6rem;
    padding: 0.9rem;
  }
  .bandeau-cookies__meme {
    width: 104px;
    height: 130px;
  }
  .bandeau-cookies__mot {
    gap: 0.35rem;
    font-size: 0.88rem;
  }
  .bandeau-cookies__titre { font-size: 1rem; }
  .bandeau-cookies__detail { font-size: 0.84rem; }
  .bandeau-cookies__actions .btn {
    min-height: 46px;
    padding: 0.6rem 1rem;
    font-size: 1rem;
  }
}