/* Le Tour du Proprio — feuille de style unique, zéro JS.
   Direction : éditoriale et chaleureuse. Papier, encre, tuile. L'inverse d'un
   portail immobilier : on vend une conversation avec quelqu'un, pas un catalogue. */

@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/newsreader.woff2') format('woff2-variations');
  font-weight: 300 600;
  font-display: swap;
}

:root {
  /* Colonne de contenu unique : tout le site partage cet axe, sinon le hero
     et les sections se centrent différemment et la page paraît de travers. */
  --colonne: 84rem;

  --papier: #f7f2e9;
  --papier-creux: #efe7d9;
  --encre: #191512;
  --encre-douce: #4a423a;
  --tuile: #a9482f;
  --tuile-claire: #c86a4d;
  --trait: #ddd1bd;

  --display: 'Fraunces', Georgia, serif;
  --texte: 'Newsreader', Georgia, serif;

  --mesure: 34rem;
  --marge: clamp(1.5rem, 5vw, 6rem);
}

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

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.1875rem);
  line-height: 1.65;
  font-variant-numeric: oldstyle-nums;
  /* Grain très léger : le fond doit avoir une matière, pas être un aplat. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

/* ---------- chrome ---------- */

.bandeau {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.75rem;
  padding-inline: max(var(--marge), calc((100% - var(--colonne)) / 2));
  border-bottom: 1px solid var(--trait);
}

.marque {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 30, 'WONK' 1, 'opsz' 20;
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  color: var(--encre);
  text-decoration: none;
}

.lieu {
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

/* ---------- hero ---------- */

.hero {
  padding: clamp(4rem, 12vw, 9rem) var(--marge) clamp(3rem, 8vw, 6rem);
  max-width: 62rem;
}

.surtitre {
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tuile);
  margin: 0 0 1.75rem;
}

h1 {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 110;
  font-weight: 400;
  font-size: clamp(2.75rem, 1.6rem + 5.6vw, 6.5rem);
  line-height: 0.96;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  text-wrap: balance;
}

h1 em {
  font-style: normal;
  color: var(--tuile);
}

.chapeau {
  max-width: var(--mesure);
  font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.5;
  color: var(--encre-douce);
  margin: 0;
}

/* ---------- sections ---------- */

section {
  padding-block: clamp(3rem, 7vw, 6rem);
  padding-inline: max(var(--marge), calc((100% - var(--colonne)) / 2));
}

.constat {
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
  background: var(--papier-creux);
}

.constat p {
  max-width: 44rem;
  margin: 0 auto;
  font-family: var(--display);
  font-variation-settings: 'SOFT' 40, 'opsz' 40;
  font-weight: 300;
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2.125rem);
  line-height: 1.35;
  text-wrap: pretty;
}

.constat p + p {
  margin-top: 1.5rem;
}

.constat strong {
  font-weight: 500;
  color: var(--tuile);
}

h2 {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 30, 'opsz' 30;
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin: 0 0 2.5rem;
}

/* ---------- étapes ---------- */

.etapes {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  max-width: 68rem;
}

.etape h3 {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 40;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0 0 0.75rem;
}

.etape p {
  margin: 0;
  color: var(--encre-douce);
}

.numero {
  display: block;
  font-family: var(--display);
  font-variation-settings: 'opsz' 60;
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1;
  color: var(--tuile);
  opacity: 0.35;
  margin-bottom: 0.75rem;
}

/* ---------- confiance ---------- */

.confiance {
  border-top: 1px solid var(--trait);
}

.confiance ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 52rem;
  display: grid;
  gap: 1.25rem;
}

.confiance li {
  padding-left: 1.75rem;
  position: relative;
  color: var(--encre-douce);
}

.confiance li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.6rem;
  height: 1px;
  background: var(--tuile);
}

.confiance li b {
  color: var(--encre);
  font-weight: 500;
}

/* ---------- professionnels ---------- */
/* Traité comme une section à part entière, pas comme un encart : c'est
   l'entrée du seul tunnel qui n'a pas de problème d'amorçage. */

.lien-pro {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--encre-douce);
  text-decoration: none;
  border-bottom: 1px solid var(--trait);
  padding-bottom: 0.2rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.lien-pro:hover {
  color: var(--tuile);
  border-color: var(--tuile);
}

.pro {
  border-top: 1px solid var(--trait);
  background: var(--papier-creux);
}

.pro p {
  max-width: 42rem;
  color: var(--encre-douce);
}

.pro-titre {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 60;
  font-weight: 400;
  font-size: clamp(1.625rem, 1.3rem + 1.5vw, 2.5rem);
  line-height: 1.15;
  color: var(--encre);
  margin: 0 0 1.5rem;
}

/* Les deux temps du B2B, côte à côte sur écran large.
   La largeur gagnée sert la structure, PAS la longueur de ligne : au-delà de
   ~75 caractères, l'œil perd le début de la ligne suivante. C'est pourquoi on
   colonne au lieu d'élargir les paragraphes. */
.pro-etapes {
  display: grid;
  gap: 0;
}

@media (min-width: 62rem) {
  .pro-etapes {
    grid-template-columns: 1fr 1fr;
    gap: 0 3.5rem;
  }
  .pro-bloc .pro-etape {
    margin-top: 0;
  }
}

/* Intitulé d'étape. Le B2B se lit en deux temps : le recueil acheteur d'abord,
   qui marche sans rien préparer, puis l'agent qui répond sur les biens. */
.pro-etape {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  font-size: 1.0625rem;
  color: var(--tuile);
  margin: 2.5rem 0 0.75rem;
}

.pro-note {
  font-size: 0.9375rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--trait);
  margin-bottom: 2rem;
}

.pro .lien {
  color: var(--encre);
  border-bottom-color: var(--tuile);
}

.pro .lien:hover {
  color: var(--tuile);
  border-bottom-color: var(--encre);
}

/* ---------- images d'étape ---------- */

.etape-img {
  display: block;
  width: 100%;
  height: 11rem;
  object-fit: cover;
  border-radius: 2px;
  margin-bottom: 1.5rem;
  filter: saturate(0.92);
}

/* ---------- cartes d'articles ---------- */

.cartes {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

.carte {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--trait);
  border-radius: 2px;
  overflow: hidden;
  background: var(--papier);
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.carte:hover {
  border-color: var(--tuile);
  transform: translateY(-2px);
}

.carte img,
.carte-vide {
  display: block;
  width: 100%;
  height: 9rem;
  object-fit: cover;
  background: var(--papier-creux);
}

.carte-corps {
  padding: 1.25rem 1.25rem 1.5rem;
}

.carte-meta {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tuile);
  margin-bottom: 0.6rem;
}

.carte h3 {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 40, 'opsz' 30;
  font-weight: 500;
  font-size: 1.1875rem;
  line-height: 1.25;
  margin: 0 0 0.6rem;
}

.carte p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--encre-douce);
}

/* ---------- article ---------- */

/* La largeur utile = max-width MOINS le padding (box-sizing: border-box).
   Avec --marge à 6rem de chaque côté, un max-width de 46rem ne laissait que
   ~34rem au texte. On élargit le conteneur ET on réduit son padding propre,
   puis on monte légèrement le corps pour que la longueur de ligne en
   CARACTÈRES reste lisible malgré la largeur gagnée. */
.article {
  padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 5vw, 3rem) clamp(3rem, 6vw, 5rem);
  max-width: 58rem;
  margin: 0 auto;
}

/* Le titre d'article vit dans une colonne, pas en pleine largeur : il lui faut
   sa propre échelle, sinon il hérite du clamp du hero et déborde sur 4 lignes. */
.article-corps h1,
.article h1 {
  font-size: clamp(1.875rem, 1.2rem + 2.2vw, 3rem);
  line-height: 1.08;
  margin-bottom: 2rem;
  text-wrap: balance;
}

.article-hero {
  display: block;
  width: 100%;
  border-radius: 2px;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}

/* Le HTML des articles vient de la migration WordPress : on style par élément,
   sans pouvoir compter sur des classes. */
.prose {
  font-size: 1.125rem;
  line-height: 1.72;
}

.prose > :first-child {
  margin-top: 0;
}

.prose p {
  margin: 0 0 1.35em;
}

.prose .chapo {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 40, 'opsz' 30;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--encre);
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--trait);
}

.prose h2,
.prose h3 {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 40;
  font-weight: 500;
  line-height: 1.2;
  color: var(--encre);
  margin: 2.5em 0 0.75em;
  text-transform: none;
  letter-spacing: -0.01em;
}

.prose h2 {
  font-size: 1.625rem;
}

.prose h3 {
  font-size: 1.25rem;
}

.prose a {
  color: var(--encre);
  text-decoration: none;
  border-bottom: 1px solid var(--tuile);
  transition: background 0.2s ease;
}

.prose a:hover {
  background: var(--papier-creux);
}

.prose ul,
.prose ol {
  margin: 0 0 1.35em;
  padding-left: 1.25rem;
}

.prose li {
  margin-bottom: 0.5em;
}

.prose img {
  max-width: 100%;
  height: auto;
  border-radius: 2px;
  margin: 2rem 0;
}

.prose figure {
  margin: 2rem 0;
  overflow-x: auto;
}

.prose table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9375rem;
}

.prose th,
.prose td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--trait);
}

.prose th {
  font-family: var(--display);
  font-weight: 500;
}

.prose blockquote {
  margin: 2rem 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--tuile);
  color: var(--encre-douce);
}

.prose .note {
  margin-top: 2.5rem;
  padding: 1.25rem;
  background: var(--papier-creux);
  border-radius: 2px;
  font-size: 0.9375rem;
}

.prose .sources {
  font-size: 0.875rem;
  color: var(--encre-douce);
}

.prose code {
  font-size: 0.9em;
  background: var(--papier-creux);
  padding: 0.15em 0.4em;
  border-radius: 2px;
}

/* ---------- pied ---------- */

.chantier {
  border-top: 1px solid var(--trait);
  background: var(--encre);
  color: var(--papier);
}

.chantier p {
  max-width: 40rem;
  margin: 0 0 1.75rem;
  color: #cfc4b4;
}

.chantier h2 {
  color: #9b8f7f;
}

.lien {
  display: inline-block;
  font-family: var(--display);
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 40;
  font-size: 1.375rem;
  color: var(--papier);
  text-decoration: none;
  border-bottom: 2px solid var(--tuile-claire);
  padding-bottom: 0.15rem;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.lien:hover {
  color: var(--tuile-claire);
  border-color: var(--papier);
}

footer {
  padding-block: 2rem 3rem;
  padding-inline: max(var(--marge), calc((100% - var(--colonne)) / 2));
  font-size: 0.8125rem;
  color: var(--encre-douce);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}

footer a {
  color: inherit;
}

/* ---------- fiche bien (placeholder) ---------- */

.fiche {
  padding-block: clamp(4rem, 10vw, 8rem);
  padding-inline: max(var(--marge), calc((100% - 52rem) / 2));
}

.fiche h1 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
}

.attente {
  display: inline-block;
  margin-bottom: 2rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--trait);
  border-radius: 2px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

/* ---------- apparition ---------- */

@media (prefers-reduced-motion: no-preference) {
  .apparait {
    animation: monte 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
  }
  .apparait:nth-child(1) { animation-delay: 0.05s; }
  .apparait:nth-child(2) { animation-delay: 0.16s; }
  .apparait:nth-child(3) { animation-delay: 0.27s; }

  @keyframes monte {
    from {
      opacity: 0;
      transform: translateY(0.9rem);
    }
  }
}

.pro-img {
  display: block;
  width: 100%;
  max-width: 42rem;
  height: 13rem;
  object-fit: cover;
  border-radius: 2px;
  margin-bottom: 2rem;
  filter: saturate(0.92);
}

.pro-integration {
  max-width: 42rem;
  padding: 1.25rem 1.5rem;
  background: var(--papier);
  border-left: 2px solid var(--tuile);
  border-radius: 2px;
  margin-bottom: 1.5rem !important;
}

.pro-integration strong {
  color: var(--encre);
}

/* Une carte sans image ne réserve plus de place : elle devient purement
   typographique, ce qui se lit comme un choix et non comme un trou.
   Un filet en terre cuite remplace le poids visuel de l'image. */
.carte:not(:has(img)) .carte-corps {
  border-top: 3px solid var(--tuile);
  padding-top: 1.5rem;
}

.carte:not(:has(img)) h3 {
  font-size: 1.3125rem;
}

.constat-lien {
  font-family: var(--texte) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  margin-top: 2rem !important;
}

.constat-lien a {
  color: var(--tuile);
  text-decoration: none;
  border-bottom: 1px solid var(--trait);
  padding-bottom: 0.15rem;
}

.constat-lien a:hover {
  border-color: var(--tuile);
}

/* ---------- liens du bandeau ---------- */

.bandeau-liens {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
}

.lien-langue {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 30, 'opsz' 20;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--encre-douce);
  text-decoration: none;
  border-bottom: 1px solid var(--trait);
  padding-bottom: 0.2rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.lien-langue:hover {
  color: var(--tuile);
  border-color: var(--tuile);
}

@media (max-width: 32rem) {
  .bandeau-liens { gap: 1rem; }
  .lien-pro { font-size: 0.75rem; }
}

/* ---------- carnet d'acheteurs ---------- */
/* Le seul élément interactif du site. Amélioration progressive : sans JS,
   le bloc affiche le texte statique laissé dans le HTML. */

.carnet {
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 3px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.carnet-titre {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 30;
  font-weight: 500;
  font-size: 1.0625rem;
  margin: 0;
}

.carnet-sous {
  font-size: 0.875rem;
  color: var(--encre-douce);
  margin: -0.5rem 0 0;
}

.carnet-fil {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 9rem;
  max-height: 24rem;
  overflow-y: auto;
}

/* Dans le hero, le bloc a de la place : on lui donne de la présence plutôt
   que de le laisser flotter en haut d'une colonne vide. */
.hero-double .carnet {
  padding: 1.75rem;
}

.hero-double .carnet-fil {
  min-height: 13rem;
}

.hero-double .carnet-titre {
  font-size: 1.1875rem;
}

.carnet-bulle {
  font-size: 0.9375rem;
  line-height: 1.55;
  padding: 0.7rem 0.9rem;
  border-radius: 3px;
  max-width: 92%;
}

.carnet-agent {
  background: var(--papier-creux);
  color: var(--encre);
  align-self: flex-start;
}

.carnet-vous {
  background: var(--tuile);
  color: #fdf9f2;
  align-self: flex-end;
}

/* Composeur type messagerie : un seul conteneur arrondi, le bouton dedans.
   Le focus est porté par le conteneur, pas par la zone de texte, pour que
   l'ensemble se comporte comme un champ unique. */
/* Composeur inspiré de vendredi-app : une seule carte arrondie, la zone de
   texte en haut, les champs et le bouton en pilules dessous. Montrer le champ
   e-mail d'emblée dit ce qu'on propose sans avoir à l'écrire. */
.carnet-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 1.125rem;
  padding: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.carnet-form:focus-within {
  border-color: var(--tuile);
  box-shadow: 0 0 0 3px rgb(169 72 47 / 0.09);
}

.carnet-saisie {
  font-family: var(--texte);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--encre);
  background: transparent;
  border: none;
  resize: none;
  overflow-y: auto;
  min-height: 3.4rem;
  max-height: 10rem;
  padding: 0;
}

.carnet-saisie:focus { outline: none; }

.carnet-pied {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.carnet-email {
  flex: 1;
  min-width: 0;
  font-family: var(--texte);
  font-size: 0.875rem;
  color: var(--encre);
  background: var(--papier-creux);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.carnet-email:focus {
  outline: none;
  border-color: var(--trait);
  background: var(--papier);
}

.carnet-email--ok {
  background: rgb(169 72 47 / 0.1);
  border-color: var(--tuile);
  color: var(--tuile);
}

/* Curseur clignotant en bout de placeholder pendant la frappe. */
.carnet-form:not(:focus-within) .carnet-saisie::placeholder {
  animation: carnet-curseur 1.05s steps(1) infinite;
}

@keyframes carnet-curseur {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .carnet-form:not(:focus-within) .carnet-saisie::placeholder { animation: none; }
}

.carnet-saisie::placeholder,
.carnet-email::placeholder {
  color: #9b8f7f;
  font-style: italic;
}

.carnet-envoi {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--papier);
  background: var(--encre);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

.carnet-envoi:hover {
  background: var(--tuile);
  transform: translateY(-1px);
}

.carnet-envoi:active { transform: none; }

.carnet-note {
  font-size: 0.75rem;
  text-wrap: balance;
  line-height: 1.45;
  color: #8d8274;
  margin: 0;
}

/* ---------- hero en deux colonnes ---------- */

.hero-double {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding-block: clamp(3rem, 9vw, 7rem) clamp(2.5rem, 6vw, 4rem);
  padding-inline: max(var(--marge), calc((100% - var(--colonne)) / 2));
}

@media (min-width: 60rem) {
  /* La colonne du chat est bornée : au-delà, une conversation trop large
     devient pénible à lire. Tout l'espace en plus va au titre. */
  /* La colonne du chat est dimensionnée pour que la mention sur l'usage de
     l'adresse tienne sur une seule ligne : une note qui se casse en deux se
     lit comme une clause perdue, alors que c'est une promesse. */
  .hero-double { grid-template-columns: minmax(0, 1fr) minmax(26rem, 38rem); }
}

.hero-double .hero { padding: 0; max-width: none; }

/* ---------- article en deux colonnes ---------- */

.article-double {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  padding-block: clamp(3rem, 8vw, 6rem) clamp(3rem, 6vw, 5rem);
  padding-inline: max(clamp(1.5rem, 5vw, 3rem), calc((100% - var(--colonne)) / 2));
}

@media (min-width: 62rem) {
  /* La colonne latérale est fixe : tout l'espace gagné va au texte. */
  .article-double { grid-template-columns: minmax(0, 1fr) 19rem; }
  .aside { position: sticky; top: 2rem; }
}

@media (min-width: 84rem) {
  .article-double { grid-template-columns: minmax(0, 1fr) 21rem; }
}

.aside {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.aside-bloc h2 {
  margin-bottom: 1rem;
}

.aside-liens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

.aside-liens a {
  color: var(--encre);
  text-decoration: none;
  font-size: 0.9375rem;
  line-height: 1.4;
  display: block;
  padding-left: 0.9rem;
  border-left: 2px solid var(--trait);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.aside-liens a:hover {
  border-color: var(--tuile);
  color: var(--tuile);
}

/* Piège à robots : hors écran, hors tabulation, hors lecteurs d'écran.
   `display:none` serait détecté par les robots un peu sérieux. */
.carnet-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---------- inscription professionnelle ---------- */

.pro-form { display: grid; gap: 1.25rem; margin: 2rem 0; max-width: 34rem; }
.pro-form label { display: grid; gap: .35rem; font-size: .95rem; }
.pro-form input {
  font: inherit; padding: .7rem .9rem;
  border: 1px solid var(--trait); border-radius: 12px;
  background: var(--papier); color: var(--encre);
}
.pro-form small { color: var(--encre-douce); font-size: .8rem; }
.pro-form button {
  font: inherit; justify-self: start;
  padding: .7rem 1.4rem; border: 0; border-radius: 999px;
  background: var(--tuile); color: var(--papier); cursor: pointer;
}
.pro-form button[disabled] { opacity: .6; cursor: default; }
.erreur { color: #a33; font-size: .9rem; margin: 0; }

/* Piège à robots : hors écran plutôt que display:none, que certains
   remplisseurs automatiques savent détecter. */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; }

.detecte { color: var(--encre-douce); font-size: .9rem; }
.pro-reglages { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 1.5rem 0; }
.pro-reglages label { display: grid; gap: .3rem; font-size: .85rem; }
.pro-apercu {
  width: 100%; height: 30rem; border: 1px solid var(--trait);
  border-radius: 16px; background: var(--papier);
}
.prose textarea {
  width: 100%; font: .85rem/1.5 ui-monospace, Menlo, monospace;
  padding: .8rem; border: 1px solid var(--trait); border-radius: 12px;
  background: var(--papier-creux); color: var(--encre); resize: vertical;
}
.avertissement {
  background: var(--papier-creux); border-left: 3px solid var(--tuile);
  padding: .9rem 1.1rem; font-size: .9rem;
}

/* Appel à l'action de la section professionnels. Le bandeau mène désormais à
   la page dédiée ; la section de la home doit offrir la même sortie, sinon le
   lecteur qui a lu l'argumentaire n'a nulle part où aller. */
.pro-appel {
  display: flex;
  align-items: center;
  gap: 1rem 1.25rem;
  flex-wrap: wrap;
  margin: 2rem 0 0;
}

.pro-appel .bouton {
  display: inline-block;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  background: var(--tuile);
  color: var(--papier);
  text-decoration: none;
  font-size: 1rem;
}

.pro-appel .bouton:hover { background: var(--encre); }
.pro-appel span { font-size: 0.9375rem; color: var(--encre-douce); }

/* `display: grid` sur .pro-form l'emporterait sur la règle d'agent utilisateur
   `[hidden] { display: none }` : le formulaire restait affiché après envoi,
   bouton figé sur « Un instant… ». */
[hidden] { display: none !important; }

/* ---------- grille tarifaire ---------- */

.grille-tarifs {
  display: grid;
  gap: 1.5rem;
  /* 15rem et non 17 : la colonne d'article fait ~52rem utiles, et trois cartes
     à 17rem plus les gouttières en réclamaient 54, d'où la troisième qui
     passait seule à la ligne. */
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 2rem 0;
}

.tarif {
  border: 1px solid var(--trait);
  border-radius: 18px;
  padding: 1.75rem;
  background: var(--papier);
}

.tarif-fondateur {
  border-color: var(--tuile);
  background: var(--papier-creux);
}

.tarif-nom {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  font-family: var(--display);
  font-size: 1.0625rem;
  margin: 0 0 0.75rem;
}

.tarif-places {
  font-family: var(--texte);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tuile);
}

.tarif-prix {
  font-family: var(--display);
  font-size: 2.5rem;
  line-height: 1;
  margin: 0 0 1.25rem;
}

.tarif-prix span {
  display: block;
  font-family: var(--texte);
  font-size: 0.8125rem;
  color: var(--encre-douce);
  margin-top: 0.4rem;
}

.prose .tarif ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: grid;
  gap: 0.6rem;
}

.prose .tarif li {
  padding-left: 1.25rem;
  position: relative;
  font-size: 0.9375rem;
}

.prose .tarif li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.5rem;
  height: 1px;
  background: var(--tuile);
}

.tarif-note {
  font-size: 0.8125rem;
  color: var(--encre-douce);
  padding-top: 1rem;
  border-top: 1px solid var(--trait);
  margin: 0;
}

/* Contrainte Hoguet énoncée publiquement : l'écrire sur la page en fait un
   engagement opposable, pas une clause enterrée dans des CGU. */
.tarif-hoguet {
  font-size: 0.9375rem;
  color: var(--encre-douce);
  border-left: 3px solid var(--tuile);
  padding-left: 1rem;
}

.tarif-suite {
  font-size: 0.9375rem;
  margin-top: -0.5rem;
}

/* Bouton « Copier ». Il portait la classe .lien, faite pour des ancres : sur un
   <button> le fond gris du navigateur subsistait sous une couleur de texte
   pensée pour le papier, d'où un libellé illisible. */
[data-copier] {
  font: inherit;
  font-size: 0.9375rem;
  padding: 0.5rem 1.2rem;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: var(--papier);
  color: var(--encre);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

[data-copier]:hover {
  border-color: var(--tuile);
  color: var(--tuile);
}