/*
  Trêve — feuille de style unique.

  Écrite à la main, sans framework : quatre pages qui bougeront peu, et un outil
  de construction imposerait une réinstallation à chaque correction dans deux
  ans. Un fichier CSS s'ouvre et se modifie tel quel, par n'importe qui.

  La palette est celle de l'application, aux mêmes valeurs hexadécimales. Les
  motifs aussi : le filet vertical du bandeau, les vagues de l'écran de
  connexion, la carte de demande. Un site qui invente son propre langage
  visuel donne l'impression d'être celui d'un autre produit.
*/

:root {
  --papier: #faf9f7;
  --surface: #ffffff;
  --encre: #1a1a18;
  --encre-douce: #6b6862;
  --encre-pale: #9c978e;
  --filet: #e3e0da;
  --filet-fort: #cfcac1;
  --accent: #2f5d50;
  --accent-fort: #22705a;
  --accent-pale: #edf2f0;
  --refus: #8c3a2b;
  --refus-pale: #faefec;

  --largeur: 62rem;
  --texte: 46rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Le bandeau collant décalerait les ancres : on réserve sa hauteur. */
section[id] {
  scroll-margin-top: 4.5rem;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

.contenu {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.contenu.etroit {
  max-width: var(--texte);
}

/* ============================================================== navigation */

.bandeau {
  position: sticky;
  top: 0;
  z-index: 10;
  /*
    Fond plein plutôt qu'un flou d'arrière-plan : sur un bandeau collant, le
    backdrop-filter force le navigateur à recomposer toute la page à chaque
    pixel défilé. Le gain visuel est nul sur un fond papier uni, le coût bien
    réel sur un téléphone.
  */
  background: var(--papier);
  border-bottom: 1px solid var(--filet);
}

.bandeau .contenu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
}

/* Le filet vertical du bandeau de l'application. */
.marque::before {
  content: '';
  width: 4px;
  height: 22px;
  border-radius: 2px;
  background: var(--accent);
}

.marque span {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.bandeau nav a {
  color: var(--encre-douce);
  text-decoration: none;
  font-size: 16px;
  margin-left: 1.5rem;
}

.bandeau nav a:hover {
  color: var(--accent);
}

@media (max-width: 34rem) {
  .bandeau nav a:not(.compact) {
    display: none;
  }
}

/* =================================================================== hero */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #1d3f36 0%, #2f5d50 55%, #38705f 100%);
  color: #fff;
  padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(4rem, 10vw, 7rem);
}

/*
  Les vagues de l'écran de connexion, reprises ici. Trois ellipses de périodes
  différentes : leur superposition ne se répète jamais à l'identique, ce qui
  évite l'effet de boucle qu'on repère au bout de dix secondes.
*/
.vague {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.vague-1 {
  width: 120%;
  height: 40rem;
  left: -10%;
  top: -18rem;
  animation: derive-1 9s ease-in-out infinite;
}

.vague-2 {
  width: 90%;
  height: 32rem;
  right: -20%;
  bottom: -14rem;
  background: rgba(255, 255, 255, 0.05);
  animation: derive-2 12s ease-in-out infinite;
}

.vague-3 {
  width: 60%;
  height: 24rem;
  left: 20%;
  bottom: -10rem;
  background: rgba(255, 255, 255, 0.035);
  animation: derive-3 15s ease-in-out infinite;
}

@keyframes derive-1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-4%, 3.5rem, 0) scale(1.09); }
}

@keyframes derive-2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(6%, -3rem, 0) scale(1.12); }
}

@keyframes derive-3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-7%, -2.5rem, 0) scale(1.14); }
}

.hero .contenu {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (max-width: 52rem) {
  .hero .contenu {
    grid-template-columns: 1fr;
  }
}

.hero h1 {
  font-size: clamp(2.9rem, 7.5vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
}

/*
  Ciblé sur le paragraphe d'accroche, et non sur tous les <p> de la section :
  la maquette du téléphone en contient, et ils héritaient du blanc destiné au
  fond vert — le texte de la demande disparaissait sur la carte blanche.
*/
.hero .accroche {
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  margin: 0 0 2rem;
  max-width: 32rem;
}

/* ============================================================ boutons */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.telecharger {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: #fff;
  color: var(--encre);
  text-decoration: none;
  padding: 0.8rem 1.4rem;
  border-radius: 10px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.telecharger:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.telecharger small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.telecharger strong {
  display: block;
  font-size: 16px;
  line-height: 1.2;
}

.telecharger svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.secondaire {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-weight: 600;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.secondaire:hover {
  background: rgba(255, 255, 255, 0.1);
}

.bouton {
  display: inline-block;
  background: var(--accent-fort);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 0.85rem 1.5rem;
  border-radius: 8px;
}

/* ======================================================== téléphone maquette */

/*
  Les deux rayons sont liés, jamais choisis séparément : sur un vrai téléphone,
  l'arrondi de la dalle est concentrique à celui du châssis, donc

      rayon de l'écran = rayon du châssis − épaisseur de la lunette

  Réglés à l'œil chacun de leur côté, l'écran se trouvait trop arrondi de
  0,1 rem : la lunette noire se pinçait dans les angles au lieu de garder une
  épaisseur constante, et l'illusion tombait. D'où les deux variables — changer
  le châssis recalcule l'écran.
*/
.telephone {
  --chassis: 2.6rem;
  --lunette: 0.7rem;
  position: relative;
  width: min(21.5rem, 100%);
  margin: 0 auto;
  background: #0e100f;
  border-radius: var(--chassis);
  padding: var(--lunette);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

.ecran {
  position: relative;
  background: var(--papier);
  border-radius: calc(var(--chassis) - var(--lunette));
  overflow: hidden;
  color: var(--encre);
}

/* La pilule noire en haut de l'écran des iPhone récents. */
.ile {
  position: absolute;
  top: 0.55rem;
  left: 50%;
  transform: translateX(-50%);
  width: 5.6rem;
  height: 1.55rem;
  border-radius: 999px;
  background: #0e100f;
  z-index: 2;
}

.barre-etat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1.4rem 0.35rem;
  background: var(--surface);
  font-size: 13px;
  font-weight: 700;
  color: var(--encre);
}

.indicateurs {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--encre);
}

.indicateurs svg {
  height: 11px;
  width: auto;
  fill: currentColor;
}

.ecran-bandeau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem 0.7rem;
  background: var(--surface);
  border-bottom: 1px solid var(--filet);
  font-size: 13px;
  color: var(--encre-douce);
}

.dossier {
  border: 1px solid var(--filet);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-size: 12.5px;
}

.salut {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
  margin: 0.2rem 0 0.15rem;
  padding-left: 0.5rem;
  border-left: 3px solid var(--accent);
}

.sous-salut {
  font-size: 12.5px;
  color: var(--encre-douce);
  margin: 0 0 0.9rem;
}

/* Le bloc « À traiter » de l'accueil, teinté comme dans l'application. */
.a-traiter {
  background: var(--accent-pale);
  border: 1px solid rgba(47, 93, 80, 0.35);
  border-radius: 10px;
  padding: 0.6rem;
  margin-bottom: 0.9rem;
}

.a-traiter-tete {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.5rem;
  padding: 0 0.15rem;
}

.titre-liste {
  font-size: 13px;
  font-weight: 700;
  color: var(--encre);
  margin: 0 0 0.5rem;
}

.demande.fantome {
  opacity: 0.55;
}

.statut.vert {
  background: var(--accent);
}

.onglets {
  display: flex;
  justify-content: space-around;
  background: var(--surface);
  border-top: 1px solid var(--filet);
  padding: 0.55rem 0 0.2rem;
  font-size: 10.5px;
  color: var(--encre-pale);
}

.onglets span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.onglets svg {
  width: 18px;
  height: 18px;
}

.onglets .actif {
  color: var(--accent);
}

/* La barre d'accueil, ce trait noir en bas des iPhone sans bouton. */
.barre-accueil {
  height: 0.35rem;
  width: 34%;
  margin: 0.25rem auto 0.5rem;
  border-radius: 999px;
  background: rgba(14, 16, 15, 0.35);
}

.ecran-marque {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 16px;
  font-weight: 700;
  color: var(--encre);
}

.ecran-marque::before {
  content: '';
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: var(--accent);
}

.ecran-corps {
  padding: 0.9rem;
}

/* La carte de demande, reproduite d'après celle de l'application. */
.demande {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 10px;
  padding: 0.9rem;
}

.demande-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.categorie {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 12px;
  color: var(--encre-douce);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pastille svg {
  width: 14px;
  height: 14px;
}

.demande-date svg {
  width: 14px;
  height: 14px;
}

.pastille {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-pale);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.statut {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--encre-douce);
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.statut.attente {
  background: var(--encre-douce);
}

.demande-date {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--accent);
  font-weight: 600;
  font-size: 13.5px;
  margin-bottom: 0.35rem;
}

.demande-texte {
  font-size: 14px;
  margin: 0 0 0.6rem;
}

.demande-pied {
  font-size: 12.5px;
  color: var(--encre-pale);
}

.reponses {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

.reponses span {
  flex: 1;
  text-align: center;
  padding: 0.7rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
}

.oui {
  background: var(--accent-fort);
  color: #fff;
}

.non {
  background: var(--surface);
  color: var(--refus);
  border: 1px solid var(--refus);
}

/* ============================================================== sections */

section {
  padding: clamp(2.75rem, 6vw, 4.5rem) 0;
}

section.pale {
  background: var(--surface);
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
}

.jalon {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.6rem;
}

/*
  En vert, comme les titres d'écran de l'application. Le noir les rendait
  interchangeables avec le corps du texte ; la couleur les rattache à la marque
  et donne un point d'ancrage à chaque section quand on parcourt la page.

  Les titres de carte restent en encre : deux niveaux verts d'affilée se
  disputeraient l'attention, et la hiérarchie disparaîtrait.
*/
h2 {
  font-size: clamp(2.1rem, 5vw, 3rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--accent);
  margin: 0 0 1rem;
}

h3 {
  font-size: 1.4rem;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}

.intro {
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--encre-douce);
  max-width: var(--texte);
  margin: 0 0 2.5rem;
}

/* ======================================================= la démonstration

  Deux téléphones côte à côte, la même question, deux issues. Le panneau de
  texte qui les précédait demandait au lecteur d'imaginer ; ici il reconnaît.

  La messagerie n'est nommée nulle part et ne porte aucun logo : la forme
  suffit, et emprunter une marque pour la montrer sous un mauvais jour serait
  une mauvaise idée, juridiquement comme moralement.
*/

.face-a-face {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

@media (max-width: 46rem) {
  .face-a-face {
    grid-template-columns: 1fr;
  }
}

.comparaison {
  margin: 0;
}

.comparaison figcaption {
  margin-top: 1.4rem;
  color: var(--encre-douce);
  font-size: 18px;
  line-height: 1.5;
  text-align: center;
}

.comparaison figcaption strong {
  display: block;
  color: var(--encre);
  font-size: 1.35rem;
  margin-bottom: 0.3rem;
}

/* Plus petit que celui de l'accueil : deux téléphones dans la largeur d'une
   page, ce n'est pas la même contrainte qu'un seul dans un bandeau. */
/*
  Le format d'un vrai téléphone : 9/19,5, celui des iPhone depuis le X. Une
  hauteur en rem, choisie à l'œil, donnait un rectangle trapu qui n'existe sur
  aucun appareil — et l'illusion tombait aussitôt.

  Le rapport se déduit de la largeur, donc les deux écrans restent identiques
  quelle que soit la place disponible.
*/
.telephone.compact .ecran {
  aspect-ratio: 9 / 19.5;
  display: flex;
  flex-direction: column;
}

.telephone.compact .messagerie-corps,
.telephone.compact .ecran-corps {
  flex: 1;
  overflow: hidden;
}

.telephone.compact {
  --chassis: 2.5rem;
  --lunette: 0.65rem;
  width: min(22rem, 100%);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.18);
}

.telephone.compact .ile {
  width: 5.4rem;
  height: 1.5rem;
}

/* ------------------------------------------------------------ messagerie */

.messagerie-tete {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem 0.7rem;
  background: var(--surface);
  border-bottom: 1px solid var(--filet);
}

.messagerie-tete .retour {
  color: var(--encre-pale);
  font-size: 20px;
  line-height: 1;
}

.messagerie-tete .contact {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 15px;
  font-weight: 600;
}

.pastille-contact {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--filet);
  color: var(--encre-douce);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/*
  Les messages partent du haut. Ancrés en bas — comme le fait une vraie
  messagerie — ils laissaient une bande blanche au-dessus du premier, qui se
  lisait comme un oubli de mise en page plutôt que comme le début d'une
  conversation.
*/
.messagerie-corps {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.4rem;
  padding: 0.7rem 0.8rem;
}

/* La date, centrée, comme au-dessus de tout fil de discussion. */
.jour {
  align-self: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--encre-pale);
  margin-bottom: 0.35rem;
}

.bulle {
  max-width: 88%;
  padding: 0.55rem 0.85rem;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.45;
}

.bulle.eux {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

/*
  Les couleurs d'une messagerie ordinaire : bleu pour ce qu'on envoie, gris
  pour ce qu'on reçoit. Une version précédente teintait de rouge les deux
  derniers messages pour marquer la montée du ton — c'était une idée de
  maquette, pas ce qu'on voit sur son téléphone. La tension est déjà dans les
  mots, la colorer les rendait moins crédibles.

  Et surtout pas de vert ici : dans cet écran-là, il associerait Trêve à la
  conversation qui dégénère.
*/
.bulle.moi {
  align-self: flex-end;
  background: #0a84ff;
  color: #fff;
  border-bottom-right-radius: 4px;
}

.bulle.eux {
  background: #e9e9eb;
  color: var(--encre);
}

.bulle.moi .heure {
  color: rgba(255, 255, 255, 0.75);
}

/* Les trois points de saisie : la conversation n'est pas finie, et c'est bien
   le problème. */
.bulle.ecrit {
  display: flex;
  gap: 3px;
  padding: 0.55rem 0.7rem;
}

.bulle.ecrit span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--encre-pale);
  animation: saisie 1.4s ease-in-out infinite;
}

.bulle.ecrit span:nth-child(2) { animation-delay: 0.2s; }
.bulle.ecrit span:nth-child(3) { animation-delay: 0.4s; }

@keyframes saisie {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}

.heure {
  font-size: 11.5px;
  color: var(--encre-pale);
  margin-left: 0.4rem;
}

.champ-message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0.7rem 0.2rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--filet-fort);
  border-radius: 999px;
  font-size: 14px;
  color: var(--encre-pale);
  background: var(--surface);
}

.champ-message .envoyer {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--filet-fort);
  color: var(--surface);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------------------ la réponse, à côté */

.telephone.compact .demande-texte {
  font-size: 15px;
}

.telephone.compact .categorie {
  font-size: 13px;
}

.telephone.compact .titre-liste {
  font-size: 14px;
}

.detail-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}

.detail-question {
  font-size: 1.15rem;
  line-height: 1.35;
  margin: 0 0 0.6rem;
}

.detail-infos {
  margin-top: 0.9rem;
  border: 1px solid var(--filet);
  border-radius: 10px;
  background: var(--surface);
  padding: 0.2rem 0.75rem;
}

.detail-infos div {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0;
  font-size: 13px;
  border-bottom: 1px solid var(--filet);
}

.detail-infos div:last-child {
  border-bottom: 0;
}

.detail-infos span:first-child {
  color: var(--encre-douce);
}

.detail-infos span:last-child {
  color: var(--encre);
  font-weight: 600;
}

/* Les deux boutons de réponse, à la taille qu'ils ont dans l'application :
   c'est le geste que la page entière raconte. */
.reponses.grandes {
  margin-top: 1.1rem;
}

.reponses.grandes span {
  padding: 0.95rem;
  font-size: 1.05rem;
  border-radius: 10px;
}

.detail-note {
  margin: auto 0 0.3rem;
  font-size: 12px;
  line-height: 1.4;
  color: var(--encre-pale);
  text-align: center;
}

.verdict-oui {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.7rem;
  padding: 0.7rem;
  border-radius: 10px;
  background: var(--accent-pale);
  border: 1px solid var(--accent);
}

.verdict-oui .coche {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-fort);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.verdict-oui .coche svg {
  width: 16px;
  height: 16px;
}

.verdict-oui strong {
  display: block;
  font-size: 1.05rem;
  color: var(--accent);
}

.verdict-oui em {
  font-style: normal;
  font-size: 12px;
  color: var(--encre-douce);
}

/* ================================================================ cartes */

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
}

.carte {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 12px;
  padding: 1.4rem;
}

section.pale .carte {
  background: var(--papier);
}

.carte.accent {
  background: var(--accent-pale);
  border-color: var(--accent);
}

.carte p {
  color: var(--encre-douce);
  margin: 0;
  font-size: 17px;
}

.carte p + p {
  margin-top: 0.7rem;
}

/* ================================================================ offres

  Un en-tête commun aux deux cartes, de hauteur fixe, suivi de la liste. Les
  deux colonnes démarrent ainsi à la même ligne : c'est ce qui permet de lire
  « Trois demandes par mois » en face de « Demandes illimitées », au lieu de
  deux listes décalées de quelques pixels.
*/

.offre {
  display: flex;
  flex-direction: column;
}

.offre-tete {
  min-height: 7.5rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--filet);
}

.offre.accent .offre-tete {
  border-bottom-color: rgba(47, 93, 80, 0.3);
}

.offre-nom {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.5rem;
}

.carte .prix {
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--encre);
  /* Chiffres à chasse fixe : les deux prix s'alignent au pixel près d'une carte
     à l'autre, ce qui n'arrive jamais avec des chiffres proportionnels. */
  font-variant-numeric: tabular-nums;
  margin: 0 0 0.35rem;
}

.carte .prix .devise {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0;
  margin-left: 0.1rem;
}

.offre-cadence {
  font-size: 15px;
  color: var(--encre-douce);
  margin: 0;
}

.offre .liste {
  margin-top: 0;
  flex: 1;
}

.offre-note {
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(47, 93, 80, 0.25);
  font-size: 14px;
  color: var(--encre-douce);
}

ul.liste {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  color: var(--encre-douce);
  font-size: 17px;
}

ul.liste li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.45rem;
}

ul.liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
}

/* ================================================================ étapes */

ol.etapes {
  counter-reset: etape;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
}

ol.etapes li {
  counter-increment: etape;
}

ol.etapes li::before {
  content: counter(etape);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 14px;
  background: var(--accent-pale);
  color: var(--accent);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.7rem;
}

ol.etapes strong {
  display: block;
  font-size: 1.2rem;
  line-height: 1.3;
  margin-bottom: 0.3rem;
}

ol.etapes p {
  margin: 0;
  color: var(--encre-douce);
  font-size: 17px;
  line-height: 1.55;
}

/* ====================================================== bandeau de clôture

  Sans lui, la page ouvrait sur un grand aplat vert puis s'éteignait en beige
  jusqu'au pied. Elle se referme désormais sur le même vert : on quitte le site
  par où on y est entré, et l'appel au téléchargement se trouve là où l'on a
  fini de lire, pas seulement en haut.
*/

.cloture {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #1d3f36 0%, #2f5d50 55%, #38705f 100%);
  color: #fff;
  padding: clamp(3rem, 8vw, 5rem) 0;
  text-align: center;
}

.cloture .contenu {
  position: relative;
}

.cloture h2 {
  color: #fff;
  margin-bottom: 0.75rem;
}

.cloture p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 36rem;
  margin: 0 auto 2rem;
  font-size: 1.2rem;
}

.cloture .actions {
  justify-content: center;
}

/* ============================================== icônes des quatre étapes */

.icone-etape {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 14px;
  background: var(--accent-pale);
  color: var(--accent);
}

.icone-etape svg {
  width: 20px;
  height: 20px;
}

/*
  Le numéro se place à côté de l'icône, sur la même ligne, plutôt qu'au-dessus :
  empilés, ils formaient deux départs successifs et la rangée paraissait
  désalignée. Une grille fixe les places, elle ne les laisse pas à la suite du
  flux.
*/
ol.etapes li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.7rem;
  row-gap: 0.55rem;
  align-items: center;
}

ol.etapes li::before {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 0.9px;
  margin-bottom: 0;
  content: 'Étape ' counter(etape);
}

.icone-etape {
  grid-column: 1;
  grid-row: 1;
}

ol.etapes strong {
  grid-column: 1 / -1;
  grid-row: 2;
}

ol.etapes p {
  grid-column: 1 / -1;
  grid-row: 3;
}

/* ==================================================== grille asymétrique */

.grille.asymetrique {
  grid-template-columns: repeat(4, 1fr);
}

.grille.asymetrique .carte.large {
  grid-column: span 4;
}

@media (min-width: 60rem) {
  .grille.asymetrique .carte.large {
    grid-column: span 2;
    grid-row: span 2;
  }

  .grille.asymetrique .carte:not(.large) {
    grid-column: span 2;
  }
}

@media (max-width: 60rem) {
  .grille.asymetrique .carte:not(.large) {
    grid-column: span 2;
  }
}

@media (max-width: 40rem) {
  .grille.asymetrique .carte {
    grid-column: span 4 !important;
  }
}

/* L'échange en trois lignes, dans la carte mise en avant. */
.echange {
  margin-top: 1.25rem;
  background: var(--surface);
  border: 1px solid rgba(47, 93, 80, 0.25);
  border-radius: 10px;
  padding: 1rem;
}

.echange-ligne {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  font-size: 16px;
}

.echange-qui {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--accent);
  flex-shrink: 0;
  width: 4.5rem;
}

.echange-quoi {
  color: var(--encre);
}

.echange-fleche {
  display: flex;
  justify-content: center;
  color: var(--accent);
  padding: 0.4rem 0;
}

.echange-fleche svg {
  width: 20px;
  height: 20px;
}

.echange-verdict {
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--filet);
  font-size: 14px;
  color: var(--encre-douce);
}

/* Un mot souligné de vert, pour que la couleur ne vive pas qu'en haut de page. */
.souligne {
  background: linear-gradient(transparent 62%, var(--accent-pale) 62%);
  padding-bottom: 0.1rem;
}

/* ================================================== apparition au défilement */

.apparait {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.apparait.vu {
  opacity: 1;
  transform: none;
}

/* ============================================ en-tête des pages de texte

  Sans lui, ces pages étaient un document Word posé sur fond blanc : un titre,
  des paragraphes, rien qui les rattache au produit. Le même bandeau vert que
  l'accueil, en plus court, et les mêmes vagues : on reste chez Trêve même dans
  les mentions légales.
*/

.entete-page {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #1d3f36 0%, #2f5d50 60%, #38705f 100%);
  color: #fff;
  padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(2.5rem, 6vw, 3.5rem);
}

.entete-page .contenu {
  position: relative;
}

.entete-page .fil-ariane {
  font-size: 14px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 0.6rem;
}

.entete-page .fil-ariane a {
  color: inherit;
  text-decoration: none;
}

.entete-page .fil-ariane a:hover {
  color: #fff;
}

.entete-page h1 {
  font-size: clamp(2.5rem, 6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 0.75rem;
  color: #fff;
}

.entete-page p {
  font-size: 1.2rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  max-width: 38rem;
}

.entete-page .date {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 1rem;
}

/* ================================================================== texte */

.page-texte .carte {
  position: relative;
  padding-left: 1.8rem;
}

/* Le filet vertical de la marque, en marge de chaque bloc : c'est lui qui
   signe la page, sans rien ajouter au texte. */
.page-texte .carte::before {
  content: '';
  position: absolute;
  left: 0.85rem;
  top: 1.4rem;
  bottom: 1.4rem;
  width: 3px;
  border-radius: 2px;
  background: var(--accent-pale);
}

.page-texte details {
  position: relative;
}

.page-texte summary::marker {
  color: var(--accent);
}

/* Le titre, le chapeau et la date vivent désormais dans le bandeau vert. */
.page-texte {
  padding-top: 0.5rem;
  padding-bottom: 1rem;
}

.page-texte .jalon:first-of-type {
  margin-top: 2rem;
}

.page-texte .carte p {
  color: var(--encre);
  font-size: 17px;
  line-height: 1.7;
}

.page-texte .carte p + p {
  margin-top: 0.9rem;
}

.page-texte details {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
}

.page-texte summary {
  font-weight: 600;
  cursor: pointer;
}

.page-texte details p {
  color: var(--encre-douce);
  font-size: 17px;
  line-height: 1.65;
}

/* À remplacer par les vraies valeurs : voir README. */
.a-completer {
  background: #fff6d8;
  border-bottom: 1px solid #e3d9a8;
  padding: 0 0.25rem;
}

/* ================================================================== pied */

footer {
  background: var(--surface);
  border-top: 1px solid var(--filet);
  padding: 2.5rem 0 3.5rem;
  color: var(--encre-pale);
  font-size: 14px;
}

footer .contenu {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}

footer nav a {
  color: var(--encre-douce);
  text-decoration: none;
  margin-right: 1.25rem;
}

footer nav a:hover {
  color: var(--accent);
}

/*
  Mouvement réduit : les vagues et les apparitions s'arrêtent. Le réglage
  système existe pour les personnes que le mouvement gêne physiquement, il ne se
  discute pas.
*/
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vague { animation: none; }
  .apparait { opacity: 1; transform: none; transition: none; }
}

/* =========================================================== sur téléphone

  Le site n'était pas cassé en petite largeur, il était seulement rétréci :
  boutons de tailles inégales alignés à gauche, maquettes prévues pour une
  colonne de bureau, navigation réduite à un seul mot. Ces règles ne changent ni
  la palette ni la structure, elles adaptent les proportions à un pouce.
*/
@media (max-width: 40rem) {
  body {
    font-size: 17px;
  }

  .contenu {
    padding: 0 1.15rem;
  }

  /* Le seul lien restant devient un vrai bouton : « Télécharger » perdu en gris
     au bout du bandeau ne se lisait pas comme une action. */
  .bandeau nav a.compact {
    margin-left: 0;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: var(--accent-fort);
    color: #fff;
    font-weight: 600;
  }

  .hero {
    padding-top: 2.5rem;
    padding-bottom: 3rem;
  }

  .hero h1 {
    font-size: clamp(2.5rem, 11vw, 3.2rem);
  }

  .hero .accroche {
    font-size: 1.05rem;
  }

  /* Deux boutons de largeurs différentes, l'un sous l'autre, donnent une
     colonne en escalier. Pleine largeur, ils forment un bloc. */
  .actions {
    display: grid;
    gap: 0.6rem;
  }

  .telecharger,
  .secondaire {
    justify-content: center;
    text-align: center;
  }

  /* Dans le bandeau de clôture, les boutons étaient centrés donc réduits à leur
     contenu : deux largeurs de plus que dans la hero, pour les deux mêmes
     actions. */
  .cloture .actions {
    justify-content: stretch;
  }

  .secondaire {
    padding: 0.9rem 1rem;
  }

  /*
    La maquette d'accueil accompagne le discours, elle ne le remplace pas.

    Elle n'avait aucun rapport imposé : sa hauteur venait de son contenu, si
    bien que la rétrécir la rendait plus haute — 184 de large pour 997 de haut,
    le texte se repliant à l'infini. Elle prend donc le même rapport d'écran que
    les deux autres, et son contenu déborde derrière le cadre au lieu de
    l'étirer.
  */
  .telephone .ecran {
    aspect-ratio: 9 / 19.5;
    display: flex;
    flex-direction: column;
  }

  .telephone .ecran-corps {
    flex: 1;
    overflow: hidden;
  }

  .telephone {
    width: min(13rem, 64%);
    margin-top: 2rem;
    border-radius: 1.7rem;
    padding: 0.35rem;
  }

  .telephone .ecran {
    border-radius: 1.4rem;
  }

  .telephone .ile {
    width: 3.4rem;
    height: 1rem;
    top: 0.4rem;
  }

  .telephone .salut {
    font-size: 1rem;
    border-left-width: 2px;
  }

  .telephone .sous-salut {
    font-size: 8.5px;
    margin-bottom: 0.5rem;
  }

  .telephone .a-traiter {
    padding: 0.4rem;
    margin-bottom: 0.5rem;
  }

  .telephone .a-traiter-tete {
    font-size: 9px;
  }

  .telephone .demande {
    padding: 0.45rem;
  }

  .telephone .demande-texte {
    font-size: 9.5px;
  }

  .telephone .demande-pied {
    font-size: 8px;
  }

  .telephone .reponses {
    gap: 0.3rem;
    margin-top: 0.45rem;
  }

  .telephone .reponses span {
    padding: 0.35rem;
    font-size: 10px;
    border-radius: 6px;
  }

  /*
    L'aperçu d'historique disparaît sur téléphone : à cette hauteur, il poussait
    la barre d'onglets hors du cadre, et une maquette d'iPhone amputée de son
    bas ne ressemble plus à un iPhone. Ce qui compte — le bonjour, la demande à
    traiter, les deux boutons — reste entier.
  */
  .telephone .titre-liste,
  .telephone .demande.fantome {
    display: none;
  }

  .telephone.compact .titre-liste {
    display: block;
    font-size: 9.5px;
  }

  .telephone .onglets {
    font-size: 7px;
    padding: 0.35rem 0 0.1rem;
  }

  .telephone .onglets svg {
    width: 12px;
    height: 12px;
  }

  .telephone.compact {
    width: min(17rem, 88%);
  }

  /*
    Les deux téléphones restent côte à côte sur téléphone aussi. Empilés, on ne
    voyait jamais les deux écrans ensemble : la comparaison devenait deux
    illustrations séparées par un défilement, c'est-à-dire plus une
    comparaison. Le contenu rétrécit pour tenir dans la moitié de la largeur.
  */
  .face-a-face {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.45rem;
    /* Les maquettes débordent de la marge du texte : sur un écran étroit, ce
       sont elles qui portent la démonstration, elles méritent la largeur. */
    margin-inline: -0.6rem;
  }

  .telephone.compact {
    width: 100%;
    border-radius: 1.4rem;
    padding: 0.3rem;
  }

  .telephone .ecran {
    border-radius: 1.15rem;
  }

  .telephone .ile {
    width: 2.9rem;
    height: 0.85rem;
    top: 0.35rem;
  }

  .telephone .barre-etat {
    padding: 0.4rem 0.55rem 0.2rem;
    font-size: 9px;
  }

  .telephone .indicateurs svg {
    height: 7px;
  }

  .telephone .messagerie-tete {
    padding: 0.3rem 0.45rem 0.4rem;
  }

  .telephone .messagerie-tete .contact {
    font-size: 10px;
    gap: 0.25rem;
  }

  .telephone .pastille-contact {
    width: 14px;
    height: 14px;
    font-size: 8px;
  }

  .telephone .messagerie-corps {
    padding: 0.35rem 0.4rem;
    gap: 0.25rem;
  }

  .telephone .jour {
    font-size: 8px;
    margin-bottom: 0.15rem;
  }

  .telephone .bulle {
    font-size: 10px;
    padding: 0.3rem 0.45rem;
    border-radius: 10px;
    max-width: 92%;
  }

  .telephone .heure {
    font-size: 7.5px;
    margin-left: 0.2rem;
  }

  /*
    La conversation entière, comme sur ordinateur : c'est l'accumulation qui
    fait l'argument, et un extrait de trois répliques ne montre plus l'engrenage.
    Elle tient grâce à des bulles plus serrées.
  */
  .telephone .bulle {
    font-size: 8.5px;
    padding: 0.2rem 0.35rem;
    border-radius: 8px;
    line-height: 1.3;
  }

  .telephone .messagerie-corps {
    gap: 0.15rem;
    padding: 0.3rem 0.35rem;
  }

  .telephone .heure {
    font-size: 7px;
  }

  .telephone .champ-message {
    margin: 0 0.4rem 0.15rem;
    padding: 0.3rem 0.5rem;
    font-size: 9px;
  }

  .telephone .champ-message .envoyer {
    width: 13px;
    height: 13px;
    font-size: 8px;
  }

  .telephone .ecran-bandeau {
    padding: 0.3rem 0.5rem 0.4rem;
  }

  .telephone .ecran-marque {
    font-size: 11px;
  }

  .telephone .dossier {
    font-size: 8px;
    padding: 0.1rem 0.3rem;
  }

  .telephone .ecran-corps {
    padding: 0.45rem;
  }

  .telephone .categorie {
    font-size: 8.5px;
    gap: 0.25rem;
  }

  .telephone .pastille {
    width: 15px;
    height: 15px;
  }

  .telephone .pastille svg,
  .telephone .demande-date svg {
    width: 9px;
    height: 9px;
  }

  .telephone .statut {
    font-size: 7.5px;
    padding: 0.1rem 0.3rem;
  }

  .telephone .detail-question {
    font-size: 12px;
    line-height: 1.3;
  }

  .telephone .demande-date {
    font-size: 9.5px;
  }

  .telephone .detail-infos {
    padding: 0.1rem 0.4rem;
    margin-top: 0.5rem;
  }

  .telephone .detail-infos div {
    font-size: 8.5px;
    padding: 0.25rem 0;
    gap: 0.3rem;
  }

  .telephone .reponses.grandes {
    margin-top: 0.6rem;
    gap: 0.35rem;
  }

  .telephone .reponses.grandes span {
    padding: 0.5rem;
    font-size: 11px;
    border-radius: 7px;
  }

  .telephone .detail-note {
    font-size: 7.5px;
    margin-bottom: 0.15rem;
  }

  .telephone .barre-accueil {
    height: 0.2rem;
  }

  .comparaison figcaption {
    margin-top: 0.9rem;
    font-size: 14px;
  }

  .comparaison figcaption strong {
    font-size: 1.05rem;
  }

  section {
    padding: 2.5rem 0;
  }

  h2 {
    font-size: clamp(1.9rem, 8vw, 2.3rem);
  }

  .intro {
    font-size: 1.15rem;
  }

  .carte {
    padding: 1.15rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  /* Les étapes gardent leur grille, mais le texte respire moins large. */
  ol.etapes {
    gap: 1.75rem;
  }

  .entete-page {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }

  .entete-page p {
    font-size: 1.1rem;
  }

  .cloture p {
    font-size: 1.1rem;
  }

  /*
    Les deux offres restent côte à côte. Empilées, on lisait « gratuit » puis,
    un écran plus bas, « abonnement » : deux propositions successives au lieu
    d'une comparaison, et le lecteur ne voyait jamais ce que l'une a de plus que
    l'autre. Le texte rétrécit, la confrontation reste.
  */
  #tarifs .grille {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.6rem;
  }

  #tarifs .carte {
    padding: 0.9rem 0.8rem;
  }

  #tarifs h3 {
    font-size: 1.05rem;
  }

  #tarifs .prix {
    font-size: 1.9rem;
  }

  #tarifs .prix .devise {
    font-size: 1.05rem;
  }

  #tarifs .offre-nom {
    font-size: 12px;
    letter-spacing: 0.7px;
  }

  #tarifs .offre-cadence {
    font-size: 12.5px;
    line-height: 1.3;
  }

  #tarifs .offre-tete {
    min-height: 6.6rem;
    padding-bottom: 0.7rem;
    margin-bottom: 0.7rem;
  }

  #tarifs .offre-note {
    font-size: 12.5px;
    margin-top: 0.7rem;
    padding-top: 0.6rem;
  }

  #tarifs ul.liste {
    font-size: 13.5px;
    margin-top: 0.7rem;
  }

  #tarifs ul.liste li {
    padding-left: 1.1rem;
    margin-bottom: 0.4rem;
    line-height: 1.35;
  }

  #tarifs ul.liste li::before {
    width: 0.35rem;
    height: 0.35rem;
    top: 0.45rem;
  }

  /*
    Retirée : cette règle visait tous les paragraphes de la carte, prix compris,
    et sa spécificité — un identifiant et deux classes — écrasait la taille du
    prix. Chaque élément de l'en-tête a désormais la sienne.
  */

  /*
    Les vagues accélèrent nettement sur téléphone. Sur un grand écran, une
    dérive lente se remarque parce que la surface est vaste ; dans une bande de
    quelques centaines de pixels, le même mouvement paraît immobile. Périodes
    divisées par deux environ, amplitudes élargies.
  */
  .vague-1 {
    animation-duration: 5s;
  }

  .vague-2 {
    animation-duration: 6.5s;
  }

  .vague-3 {
    animation-duration: 8s;
  }

  footer .contenu {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  footer nav a {
    margin-right: 1rem;
  }
}