/* =========================================================================
   Lex — pages publiques : vitrine, offres, retour de paiement, activation,
   documents contractuels. Orange et blanc (Johann, 30.09.2026).

   Deux oranges, et pas plus : l'orange plein porte du texte blanc (4.8:1,
   AA pour le corps) ; l'orange vif ne porte jamais de texte courant, il
   signe la marque et les tampons de date. Inter pour tout : grande hauteur
   d'x, formes ouvertes, chiffres tabulaires pour les dates et les montants,
   lisible par des yeux fatigués sur un petit téléphone.
   Aucun script requis, aucun style en ligne (CSP).
   ========================================================================= */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
/* Le cyrillique d'Inter (lot D, 04.10.2026), chargé seulement quand une page en a besoin. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-cyrillique.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --fond:          #FFFFFF;
  --accent:        #C8480C;
  --orange:        #C8480C;
  --orange-fonce:  #A13A08;
  --orange-pale:   #FFEDD5;
  --orange-brume:  #FFF7F1;
  --encre:         #1C1917;
  --encre-douce:   #57534E;
  --filet:         #EFE6DF;
  --blanc:         #FFFFFF;
  --rayon:         18px;
  --gouttiere:     clamp(16px, 5vw, 48px);
  --largeur:       1120px;
  --police:        "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--orange); text-underline-offset: .18em; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; margin: 0; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
.mono { font-variant-numeric: tabular-nums; }

/* ---- Enveloppe commune ------------------------------------------------- */
.cadre {
  width: 100%;
  max-width: calc(var(--largeur) + 2 * var(--gouttiere));
  margin: 0 auto;
  padding-inline-start: var(--gouttiere);
  padding-inline-end: var(--gouttiere);
}

/* ---- Barre ------------------------------------------------------------- */
.barre {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.barre__marque {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-inline-end: auto;
  color: inherit;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -.02em;
}
.barre__marque svg { width: 36px; height: 36px; flex: none; }
.choix-langue { position: relative; }
.choix-langue > summary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: 999px;
  font-weight: 600; letter-spacing: .04em; cursor: pointer; list-style: none;
}
.choix-langue > summary::-webkit-details-marker { display: none; }
.choix-langue > summary::after {
  content: ""; width: 6px; height: 6px; margin-block-start: -3px;
  /* Bordures physiques, à dessein : la flèche pointe vers le bas dans les deux sens d'écriture. */
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.choix-langue[open] > summary::after { margin-block-start: 3px; transform: rotate(-135deg); }
.choix-langue__liste {
  position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 6px); z-index: 60;
  display: grid; min-width: 168px; margin: 0; padding: 6px;
  background: var(--blanc); color: var(--encre); border: 1px solid var(--filet); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(28, 25, 23, .16);
}
.choix-langue__liste button {
  min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent;
  color: inherit; font: inherit; font-weight: 500; text-align: start; cursor: pointer;
}
.choix-langue__liste button:hover, .choix-langue__liste button:focus-visible { background: var(--orange-brume); }
.choix-langue > summary:hover { background: rgba(0, 0, 0, .06); }
.barre__connexion {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
.barre__connexion:hover { text-decoration: underline; }
@media (max-width: 599px) {
  .barre__langues { order: 5; width: 100%; display: flex; justify-content: flex-end; }
}
/* Au téléphone étroit, l'appel « S'abonner » de la barre passerait seul sur une
   deuxième ligne : la vitrine le porte déjà sous le titre, et le pied de chaque page aussi. */
@media (max-width: 479px) {
  .barre > .bouton { display: none; }
}

/* ---- Boutons ----------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 2px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.bouton:active { transform: translateY(1px); }
.bouton--fort { background: var(--orange); color: var(--blanc); }
.bouton--fort:hover { background: var(--orange-fonce); }
.bouton--fort[disabled] { background: #D6CDC7; color: var(--encre); cursor: not-allowed; }
.bouton--blanc { background: var(--blanc); color: var(--orange-fonce); }
.bouton--blanc:hover { background: var(--orange-pale); }
.bouton--sobre { background: transparent; color: var(--orange); border-color: currentColor; }
.bouton--sobre:hover { background: var(--orange-brume); }
.bouton--petit { min-height: 44px; padding: 0 18px; font-size: .95rem; }

/* ======================= Vitrine ======================================== */
.aplat { background: var(--orange); color: var(--blanc); }
.aplat a:not(.bouton) { color: var(--blanc); }
.aplat .choix-langue > summary:hover { background: rgba(255, 255, 255, .14); }

.heros {
  display: grid;
  gap: 40px;
  align-items: center;
  padding-top: clamp(24px, 6vw, 72px);
  padding-bottom: clamp(48px, 8vw, 96px);
}
.heros__questions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 18px;
  font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem);
  font-weight: 600;
  line-height: 1.3;
  color: #FFFFFF;
}
.heros__titre {
  font-size: clamp(2.9rem, 2rem + 5vw, 5.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
}
.heros__sous {
  max-width: 34ch;
  margin-top: 20px;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
  line-height: 1.5;
}
.heros__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 28px;
}
.heros__lien { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
/* Blanc pur sur l'orange : la crème #FFE9D9 faisait 4,1:1 (banc du 08.10.2026), le blanc 4,8:1. */
.heros__prix { margin-top: 14px; font-size: .95rem; color: #FFFFFF; }
.heros__ecran { margin: 0; justify-self: center; }
.telephone {
  width: min(300px, 78vw);
  padding: 9px;
  border-radius: 40px;
  background: var(--encre);
  box-shadow: 0 28px 48px -18px rgba(60, 18, 0, .55);
}
.telephone img { width: 100%; border-radius: 31px; }
.heros__legende { margin-top: 12px; font-size: .85rem; text-align: center; color: #FFFFFF; }
@media (min-width: 900px) {
  .heros { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
}

/* ---- Sections ---------------------------------------------------------- */
.section { padding-top: clamp(56px, 9vw, 112px); padding-bottom: clamp(56px, 9vw, 112px); }
.section + .section { padding-top: 0; }
.titre-section {
  max-width: 22ch;
  font-size: clamp(1.8rem, 1.4rem + 2vw, 2.8rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.025em;
}
.chapeau { max-width: 60ch; margin-top: 16px; color: var(--encre-douce); font-size: 1.1rem; }

/* Le parcours d'un courrier : chaque étape porte son tampon de date. */
.parcours { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 16px; }
.parcours__etape {
  position: relative;
  padding: 22px 22px 24px;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  background: var(--blanc);
}
.tampon {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 12px;
  border: 2px solid var(--orange);
  border-radius: 999px;
  color: var(--orange-fonce);
  background: var(--orange-brume);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.parcours__etape h3 { font-size: 1.2rem; font-weight: 750; line-height: 1.25; }
.parcours__etape p:last-child { margin-top: 8px; color: var(--encre-douce); }
@media (min-width: 720px) { .parcours { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .parcours { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.domaines { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.domaines li {
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--orange-brume);
  border: 1px solid var(--filet);
  font-weight: 600;
}
.domaines__texte { max-width: 62ch; margin-top: 28px; font-size: 1.1rem; }

/* Le clin d'œil : un temps de silence, puis la réponse. */
.clin {
  padding-top: clamp(40px, 7vw, 88px);
  padding-bottom: clamp(40px, 7vw, 88px);
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  text-align: center;
}
.clin__question { font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); color: var(--encre-douce); font-style: italic; }
.clin__reponse {
  margin-top: 14px;
  font-size: clamp(2rem, 1.3rem + 3.4vw, 3.8rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.clin__reponse em { font-style: normal; color: var(--orange); }

.deux-colonnes { display: grid; gap: 40px; }
@media (min-width: 900px) { .deux-colonnes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }
.promesses { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.promesses li { padding-inline-start: 22px; border-inline-start: 4px solid var(--orange); }
.promesses strong { display: block; font-size: 1.1rem; }
.promesses span { color: var(--encre-douce); }

/* ---- La fin : le prix, sur l'orange du début --------------------------- */
.fin { background: var(--orange); color: var(--blanc); }
.fin__corps { padding-top: clamp(56px, 9vw, 104px); padding-bottom: clamp(56px, 9vw, 104px); display: grid; gap: 28px; align-items: end; }
@media (min-width: 900px) { .fin__corps { grid-template-columns: auto minmax(0, 1fr); gap: 56px; } }
.fin__chiffre {
  font-size: clamp(4.8rem, 3rem + 10vw, 9.5rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}
.fin__unite { margin-top: 10px; font-size: 1.15rem; font-weight: 600; }
.fin__texte { max-width: 46ch; font-size: 1.05rem; }
.fin__texte + .bouton { margin-top: 22px; }

/* ---- Pied -------------------------------------------------------------- */
.pied { padding-top: 32px; padding-bottom: 40px; font-size: .9rem; color: var(--encre-douce); }
.pied__liens { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; }
.pied__liens a { display: inline-flex; align-items: center; min-height: 44px; color: var(--encre); }

/* ======================= Vitrine : ce que Lex fait de mieux ============== */
/* Refonte du 03.10.2026. Les objets dessinés (lettres, facture, e-mail, enveloppe) sont des
   papiers : blancs, légèrement penchés, ombre décalée. Le surlignage orange pâle est ce que Lex
   a lu. Le tampon (signature de la page) prolonge les tampons de date du parcours : il tombe
   sur le papier quand une étape aboutit. État de repos complet : sans :has(), sans animation
   au défilement, tout le contenu reste affiché, empilé. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.titre-section--large { max-width: 24ch; }
main section { overflow-x: clip; }

/* ---- Les papiers ---- */
.papier {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 24px 24px 26px;
  border: 1px solid var(--filet);
  border-radius: 8px;
  background: var(--blanc);
  color: var(--encre);
  font-size: .95rem;
  line-height: 1.5;
  box-shadow: 0 22px 34px -22px rgba(60, 18, 0, .45), 0 2px 5px rgba(28, 25, 23, .05);
}
.papier--penche { transform: rotate(-1deg); }
.papier__expediteur { font-weight: 800; font-size: .9rem; letter-spacing: .02em; }
.papier__objet { font-weight: 700; font-size: 1.15rem; padding-bottom: 6px; border-bottom: 1px solid var(--filet); }
.papier mark {
  padding: 0 .15em;
  border-radius: 3px;
  background: var(--orange-pale);
  color: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---- Les quatre gestes : une photo, et Lex fait le reste ---- */
.talents { padding-top: clamp(56px, 9vw, 112px); padding-bottom: clamp(48px, 7vw, 88px); }
.etapes { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 16px; counter-reset: etape; }
@media (min-width: 640px) { .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.etape {
  position: relative;
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 24px 22px 26px;
  border-radius: var(--rayon);
  background: var(--orange-brume);
  border: 1px solid var(--filet);
  counter-increment: etape;
}
.etape::before {
  content: counter(etape);
  position: absolute;
  top: 20px;
  inset-inline-end: 20px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--blanc);
  font-weight: 800;
}
.etape svg { width: 48px; height: 48px; color: var(--orange); }
.etape__titre { font-size: 1.35rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.etape p { color: var(--encre-douce); }
.badges { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.badges li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 2px solid var(--orange);
  background: var(--blanc);
  color: var(--orange-fonce);
  font-weight: 700;
}
.badges svg { width: 18px; height: 18px; flex: none; }

/* ---- Les puces de choix (boutons radio) : la puce entière est la cible ---- */
.puces { display: flex; flex-wrap: wrap; gap: 10px; }
.puce { position: relative; display: inline-flex; }
.puce__radio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.puce__texte {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 20px;
  border: 2px solid var(--orange);
  border-radius: 999px;
  background: var(--blanc);
  color: var(--orange-fonce);
  font-weight: 700;
  transition: background-color .15s ease, color .15s ease;
}
.puce__radio:hover + .puce__texte { background: var(--orange-brume); }
.puce__radio:checked + .puce__texte { background: var(--orange); color: var(--blanc); }
.puce__radio:focus-visible + .puce__texte { outline: 3px solid var(--orange); outline-offset: 3px; }

/* ---- L'essai des langues ---- */
.essai {
  margin-top: clamp(40px, 6vw, 64px);
  padding: clamp(20px, 4vw, 40px);
  border-radius: calc(var(--rayon) + 6px);
  background: var(--orange-brume);
  border: 1px solid var(--filet);
}
.essai__choix { margin: 0 0 28px; padding: 0; border: 0; min-width: 0; }
.essai__consigne { padding: 0; margin-bottom: 14px; font-weight: 700; font-size: 1.1rem; }
.essai__scene { display: grid; gap: 28px; align-items: start; }
.essai__scene + .essai__scene { margin-top: 36px; }
@media (min-width: 820px) { .essai__scene { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; } }
.essai:has(.puce__radio:checked) .essai__scene { display: none; }
.essai:has(#essai-de:checked) .essai__scene--de,
.essai:has(#essai-it:checked) .essai__scene--it,
.essai:has(#essai-en:checked) .essai__scene--en,
.essai:has(#essai-fr:checked) .essai__scene--fr { display: grid; margin-top: 0; }
.explication {
  padding: 22px 22px 24px;
  border-radius: var(--rayon);
  background: var(--blanc);
  border: 2px solid var(--orange);
}
.explication__langue {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--blanc);
  font-size: .85rem;
  font-weight: 700;
}
.explication__liste { margin: 0; display: grid; gap: 14px; }
.explication__liste dt { font-size: .85rem; font-weight: 700; color: var(--orange-fonce); }
.explication__liste dd { margin: 2px 0 0; font-weight: 600; }

/* ---- Le chemin d'une facture ---- */
.facture { padding-top: clamp(56px, 9vw, 112px); padding-bottom: clamp(56px, 9vw, 112px); border-top: 1px solid var(--filet); }
.facture__grille { display: grid; gap: 40px; margin-top: 40px; align-items: start; }
@media (min-width: 900px) {
  .facture__grille { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; }
  .facture__figure { position: sticky; top: 24px; }
}
.facture__figure { margin: 0; }
.facture__legende { margin-top: 14px; font-size: .85rem; color: var(--encre-douce); }
.qr-facture {
  position: relative;
  border: 1px solid var(--filet);
  border-radius: 8px;
  background: var(--blanc);
  box-shadow: 0 22px 34px -22px rgba(60, 18, 0, .45), 0 2px 5px rgba(28, 25, 23, .05);
  transform: rotate(.8deg);
}
.qr-facture__haut { display: grid; gap: 10px; padding: 24px 24px 22px; }
.qr-facture__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.qr-facture__bas { padding: 18px 24px 24px; border-top: 2px dashed #D6CDC7; }
.qr-facture__section { font-weight: 800; font-size: .9rem; }
.qr-facture__code { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.qr-facture__code svg { width: 112px; height: 112px; flex: none; }
.qr-facture__montant { font-weight: 700; }
.epingle {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--blanc);
  font-size: .8rem;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
}
.papier__expediteur .epingle { margin-inline-end: 6px; }

.chemin { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: chemin; }
.chemin__etape {
  position: relative;
  padding: 20px 22px 22px 66px;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  background: var(--blanc);
  counter-increment: chemin;
}
.chemin__etape::before {
  content: counter(chemin);
  position: absolute;
  inset-inline-start: 20px;
  top: 20px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--orange);
  color: var(--orange-fonce);
  font-weight: 800;
}
.chemin__etape h3 { font-size: 1.2rem; font-weight: 750; line-height: 1.25; }
.chemin__etape > p { margin-top: 6px; color: var(--encre-douce); }
.chemin__etape--fourche { border: 2px solid var(--orange); background: var(--orange-brume); }
.fourche { margin: 16px 0 0; padding: 0; border: 0; min-width: 0; }
.fourche__issues { display: grid; gap: 12px; margin-top: 16px; }
@media (min-width: 560px) { .fourche__issues { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.issue { padding: 16px 18px 18px; border-radius: 14px; background: var(--blanc); border: 1px solid var(--filet); }
.issue h4 { margin: 0; font-size: 1.08rem; font-weight: 750; }
.issue p { margin-top: 6px; color: var(--encre-douce); font-size: 1rem; }
.fourche:has(#fourche-payer:checked) .issue--contester,
.fourche:has(#fourche-contester:checked) .issue--payer { display: none; }
.fourche:has(.puce__radio:checked) .fourche__issues { grid-template-columns: minmax(0, 1fr); }
.fourche:has(.puce__radio:checked) .issue { border: 2px solid var(--orange); }

.poursuite {
  margin-top: 40px;
  padding: 20px 22px;
  border-inline-start: 4px solid var(--orange);
  background: var(--orange-brume);
  border-radius: 0 14px 14px 0;
}
.poursuite__titre { font-weight: 700; font-size: 1.08rem; max-width: 70ch; }
.poursuite__definition { margin-top: 8px; color: var(--encre-douce); font-size: .95rem; max-width: 70ch; }

/* ---- Le tampon : il tombe quand l'étape aboutit ---- */
.coup {
  position: absolute;
  z-index: 2;
  padding: 6px 16px;
  border: 3px solid var(--orange);
  border-radius: 10px;
  background: rgba(255, 247, 241, .92);
  color: var(--orange-fonce);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.2;
  transform: rotate(-10deg);
  pointer-events: none;
}
.qr-facture .coup { inset-inline-end: 7%; top: 34%; display: none; }
.facture:has(#fourche-payer:checked) .coup--paye,
.facture:has(#fourche-contester:checked) .coup--conteste { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .qr-facture .coup { animation: tombe .42s cubic-bezier(.2, .9, .3, 1.3) both; }
}
@keyframes tombe {
  from { opacity: 0; transform: rotate(-18deg) scale(1.8); }
  to { opacity: 1; transform: rotate(-10deg) scale(1); }
}

/* ---- Le pic : la commune réclame le bail ---- */
.bail {
  padding-top: clamp(72px, 12vw, 152px);
  padding-bottom: clamp(64px, 10vw, 128px);
  background: var(--orange-brume);
  border-top: 1px solid var(--filet);
}
.bd { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 22px; counter-reset: bd; }
@media (min-width: 760px) { .bd { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; } }
.bd__case {
  display: grid;
  gap: 18px;
  align-content: start;
  padding: 22px;
  border-radius: calc(var(--rayon) + 4px);
  background: var(--blanc);
  border: 1px solid var(--filet);
  counter-increment: bd;
}
.bd__titre { display: flex; align-items: baseline; gap: 10px; font-size: 1.2rem; font-weight: 750; line-height: 1.25; }
.bd__titre::before {
  content: counter(bd);
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--blanc);
  font-size: .9rem;
  font-weight: 800;
  transform: translateY(4px);
}
.bd__case--sommet { border: 2px solid var(--orange); }
.bulle {
  padding: 20px 22px;
  border-radius: 20px 20px 20px 6px;
  background: var(--orange);
  color: var(--blanc);
}
.bulle__texte { font-size: 1.15rem; font-weight: 650; line-height: 1.45; }
.etiquettes { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.etiquettes li { padding: 5px 12px; border-radius: 999px; background: var(--blanc); color: var(--orange-fonce); font-size: .88rem; font-weight: 700; }
.classeur { border: 1px solid var(--filet); border-radius: 14px; overflow: hidden; }
.classeur__titre { padding: 12px 16px; background: var(--orange-brume); font-weight: 800; border-bottom: 1px solid var(--filet); }
.classeur__liste { list-style: none; margin: 0; padding: 0; }
.classeur__liste li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 12px 16px; border-bottom: 1px solid var(--filet); color: var(--encre-douce); }
.classeur__liste li:last-child { border-bottom: 0; }
.classeur__liste .classeur__trouve { background: var(--orange-pale); color: var(--encre); font-weight: 700; }
.classeur__coche { padding: 3px 10px; border-radius: 999px; background: var(--orange); color: var(--blanc); font-size: .8rem; font-weight: 700; }
.courriel { position: relative; border: 1px solid var(--filet); border-radius: 14px; background: var(--blanc); box-shadow: 0 22px 34px -24px rgba(60, 18, 0, .45); }
.courriel__barre { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--filet); }
.courriel__barre span { width: 10px; height: 10px; border-radius: 50%; background: #E7DCD3; }
.courriel__entete { margin: 0; padding: 8px 16px; border-bottom: 1px solid var(--filet); }
.courriel__entete div { display: flex; gap: 10px; padding: 4px 0; }
.courriel__entete dt { flex: none; width: 4.5em; color: var(--encre-douce); font-size: .9rem; }
.courriel__entete dd { margin: 0; min-width: 0; font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; }
.courriel__corps { padding: 14px 16px 0; font-size: .95rem; }
.courriel__traduction { margin: 12px 16px 0; padding: 10px 12px; border-radius: 10px; background: var(--orange-brume); font-size: .9rem; color: var(--encre-douce); }
.courriel__traduction strong { color: var(--encre); }
.courriel__piece {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 16px 0;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--orange);
  color: var(--orange-fonce);
  font-weight: 700;
  font-size: .92rem;
  overflow-wrap: anywhere;
}
.courriel__piece svg { width: 18px; height: 18px; flex: none; }
/* Le bouton dessiné et son tampon partagent une rangée : le tampon ne recouvre jamais rien,
   et passe à la ligne sur un téléphone étroit. */
.courriel__envoyer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 16px; }
.courriel__bouton {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--blanc);
  font-weight: 700;
}
.courriel .coup { position: static; padding: 4px 12px; font-size: 1rem; }
.bail__fin { margin-top: clamp(40px, 6vw, 64px); text-align: center; }
.bail__geste {
  max-width: 24ch;
  margin: 0 auto;
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.bail__note { max-width: 58ch; margin: 16px auto 0; color: var(--encre-douce); }

/* Le tampon « Envoyé » s'abat au défilement, là où le navigateur sait le faire sans
   script. Il reste lisible à chaque instant : seule l'échelle bouge, jamais l'opacité, pour
   qu'une capture ou un navigateur figé le montre posé. Les blocs, eux, ne s'animent pas :
   une apparition en fondu les laissait invisibles sur toute capture pleine page. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .courriel .coup {
      animation: appuie linear both;
      animation-timeline: view();
      animation-range: entry 40% cover 50%;
    }
  }
}
@keyframes appuie {
  from { transform: rotate(-16deg) scale(1.3); }
  to { transform: rotate(-10deg) scale(1); }
}

/* ---- Le proche aidant ---- */
.aidant { display: grid; gap: 48px; align-items: center; padding-top: clamp(56px, 9vw, 112px); padding-bottom: clamp(56px, 9vw, 112px); }
@media (min-width: 900px) { .aidant { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; } }
.aidant__points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 18px; }
.aidant__points li { padding-inline-start: 20px; border-inline-start: 4px solid var(--orange); }
.aidant__points strong { display: block; font-size: 1.1rem; }
.aidant__points span { color: var(--encre-douce); }
.tri { margin: 0; display: grid; justify-items: center; gap: 4px; }
.enveloppe {
  position: relative;
  width: min(100%, 340px);
  aspect-ratio: 16 / 10;
  padding: 22px;
  display: grid;
  align-items: end;
  border: 1px solid var(--filet);
  border-radius: 8px;
  background: var(--blanc);
  box-shadow: 0 22px 34px -22px rgba(60, 18, 0, .45);
  transform: rotate(-2deg);
}
.enveloppe__timbre { position: absolute; top: 16px; inset-inline-end: 16px; width: 40px; height: 48px; border: 3px dotted var(--orange); border-radius: 4px; background: var(--orange-pale); }
.enveloppe__adresse { font-weight: 600; line-height: 1.45; }
.tri__fleche { width: 110px; height: 56px; color: var(--orange); }
.tiroirs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; width: 100%; max-width: 420px; }
.tiroir { padding: 16px; border-radius: 14px; border: 1px solid var(--filet); background: var(--blanc); }
.tiroir__nom { font-weight: 800; }
.tiroir__compte { margin-top: 2px; font-size: .9rem; color: var(--encre-douce); }
.tiroir--choisi { border: 2px solid var(--orange); background: var(--orange-brume); }
.tiroir__coche { display: inline-block; margin-top: 10px; padding: 3px 10px; border-radius: 999px; background: var(--orange); color: var(--blanc); font-size: .8rem; font-weight: 700; }

/* ---- Le parcours, la confiance ---- */
.section--veille { border-top: 1px solid var(--filet); }
.section--veille .parcours { margin-top: 32px; }
.promesses--rang { margin-top: 32px; }
@media (min-width: 900px) { .promesses--rang { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }

/* ======================= Vitrine : le mouvement ========================== */
/* Johann (03.10.2026) : « rajoute des animations de textes et de boîtes », dans l'esprit
   d'Airtable. Sans script (CSP, test de la vitrine) : le héros se compose au chargement, en
   cascade ; plus bas, titres et boîtes montent au défilement (animation-timeline: view()),
   et chaque montée s'achève quand le haut de l'élément a parcouru 180 px de l'écran, si bien
   qu'un bloc haut n'attend jamais d'être entré aux trois quarts. Les montées passent par la
   propriété `translate`, jamais par `transform` : une lettre penchée garde sa rotation, et le
   soulèvement au survol (transform) s'ajoute sans conflit. Navigateur sans chronologie de vue,
   ou visiteur qui demande moins de mouvement : tout est en place d'emblée. */
@keyframes monte {
  from { opacity: 0; translate: 0 22px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes eclot {
  from { opacity: 0; scale: .82; }
  to { opacity: 1; scale: 1; }
}
@keyframes lettre {
  from { opacity: 0; translate: 0 18px; rotate: -3deg; }
  to { opacity: 1; translate: 0 0; rotate: 0deg; }
}
@keyframes surligne {
  from { background-size: 0% 100%; }
  to { background-size: 100% 100%; }
}
@keyframes souligne {
  from { background-size: 0% .3em; }
  to { background-size: 100% .3em; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Le héros : les trois questions, puis la réponse, puis la promesse ; le téléphone monte. */
  .vitrine .heros__questions span,
  .vitrine .heros__titre,
  .vitrine .heros__sous,
  .vitrine .heros__actions,
  .vitrine .heros__prix { animation: monte .7s cubic-bezier(.2, .8, .2, 1) both; }
  .vitrine .heros__questions span:nth-child(2) { animation-delay: .12s; }
  .vitrine .heros__questions span:nth-child(3) { animation-delay: .24s; }
  .vitrine .heros__titre { animation-name: eclot; animation-duration: .8s; animation-delay: .38s; }
  .vitrine .heros__sous { animation-delay: .52s; }
  .vitrine .heros__actions { animation-delay: .62s; }
  .vitrine .heros__prix { animation-delay: .7s; }
  .vitrine .heros__ecran { animation: monte .9s cubic-bezier(.2, .8, .2, 1) .2s both; }

  /* Choisir une langue fait entrer la lettre, puis son explication. */
  .vitrine .essai__scene .papier { animation: lettre .5s cubic-bezier(.2, .8, .2, 1) both; }
  .vitrine .essai__scene .explication { animation: monte .5s cubic-bezier(.2, .8, .2, 1) .12s both; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .vitrine main .titre-section,
    .vitrine .clin__question,
    .vitrine .clin__reponse,
    .vitrine .bail__geste,
    .vitrine .etape,
    .vitrine .essai,
    .vitrine .qr-facture,
    .vitrine .chemin__etape,
    .vitrine .poursuite,
    .vitrine .bd__case,
    .vitrine .aidant__points li,
    .vitrine .enveloppe,
    .vitrine .tiroir,
    .vitrine .parcours__etape,
    .vitrine .domaines li,
    .vitrine .promesses li,
    .vitrine .fin__chiffre {
      animation: monte linear both;
      animation-timeline: view();
      animation-range: entry 0px entry 180px;
    }
    .vitrine .badges li {
      animation: eclot linear both;
      animation-timeline: view();
      animation-range: entry 0px entry 120px;
    }
    /* Une liste arrive en cascade : chaque élément part un peu plus tard que le précédent. */
    .vitrine :is(.etape, .badges li, .chemin__etape, .bd__case, .aidant__points li, .tiroir, .parcours__etape, .domaines li, .promesses li):nth-child(2) { animation-range: entry 30px entry 210px; }
    .vitrine :is(.etape, .badges li, .chemin__etape, .bd__case, .aidant__points li, .tiroir, .parcours__etape, .domaines li, .promesses li):nth-child(3) { animation-range: entry 60px entry 240px; }
    .vitrine :is(.etape, .badges li, .chemin__etape, .bd__case, .aidant__points li, .tiroir, .parcours__etape, .domaines li, .promesses li):nth-child(4) { animation-range: entry 90px entry 270px; }
    .vitrine :is(.domaines li):nth-child(n+5) { animation-range: entry 120px entry 300px; }

    /* Ce que Lex a lu se surligne sous les yeux, et « change la vie » se souligne. */
    .vitrine .papier mark {
      background: linear-gradient(var(--orange-pale), var(--orange-pale)) no-repeat 0 0 / 100% 100%;
      animation: surligne linear both;
      animation-timeline: view();
      animation-range: entry 60% cover 45%;
    }
    .vitrine .clin__reponse em {
      background: linear-gradient(var(--orange-pale), var(--orange-pale)) no-repeat 0 92% / 100% .3em;
      animation: souligne linear both;
      animation-timeline: view();
      animation-range: entry 40% cover 50%;
    }
  }
}

/* Au survol (souris seulement), une boîte se soulève d'un rien. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .vitrine :is(.etape, .chemin__etape, .bd__case, .parcours__etape, .tiroir, .explication) {
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .vitrine :is(.etape, .chemin__etape, .bd__case, .parcours__etape, .tiroir, .explication):hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 30px -20px rgba(60, 18, 0, .35);
  }
}

/* ======================= Vitrine : l'espace ============================== */
/* Johann (03.10.2026) : « utilise mieux l'espace, tout est trop centré ». Sur un grand écran,
   la page s'élargit (1400 px) et se compose en deux colonnes : le titre à gauche, ce qu'il
   annonce à droite ; la bande du bail se lit en une rangée de quatre cases ; plus rien n'est
   centré. Sous 1080 px, chaque section reprend sa pile d'origine, mesurée aux sept formats. */
.vitrine { --largeur: 1400px; --gouttiere: clamp(16px, 5vw, 64px); }
.vitrine .clin { text-align: start; }
.vitrine .bail__fin { text-align: start; }
.vitrine .bail__geste { margin: 0; max-width: 30ch; }

@media (min-width: 1080px) {
  /* Les quatre gestes : le titre à gauche, les trois assurances en face, calées en bas. */
  .vitrine .talents {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: 48px;
  }
  .vitrine .talents > .titre-section { grid-column: 1; grid-row: 1; }
  .vitrine .talents > .badges { grid-column: 2; grid-row: 1; align-self: end; justify-content: flex-end; margin: 0; }
  .vitrine .talents > .etapes { grid-column: 1 / -1; grid-row: 2; }
  .vitrine .talents > .essai { grid-column: 1 / -1; grid-row: 3; }

  /* Les sections courtes : le titre dans une colonne étroite, le contenu dans la large. */
  .vitrine .section {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: 64px;
    align-items: start;
  }
  .vitrine .section > .titre-section { grid-column: 1; max-width: 14ch; }
  .vitrine .section > :not(.titre-section) { grid-column: 2; margin-top: 6px; }
  .vitrine .section--veille .parcours { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Le clin d'œil : la question à gauche, la réponse en grand à droite. */
  .vitrine .clin .cadre {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: 64px;
    align-items: baseline;
  }
  .vitrine .clin__reponse { margin-top: 0; }

  /* La chute du bail : la phrase à gauche, l'appel à s'abonner à droite. */
  .vitrine .bail__fin { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
}

@media (min-width: 1200px) {
  .vitrine .bd { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .vitrine .bd__case { padding: 20px; }
}

/* ======================= Pages secondaires =============================== */
.page .barre { border-bottom: 1px solid var(--filet); }
.page__corps { padding-top: clamp(32px, 6vw, 72px); padding-bottom: clamp(48px, 8vw, 96px); }
.page__flashes { padding-top: 16px; }
.page__flash { padding: 12px 16px; border-radius: 12px; background: var(--orange-brume); border: 1px solid var(--filet); }
.page__flash--error { background: #FEE2E2; border-color: #FCA5A5; color: #7F1D1D; }
.page__flash--success { background: #DCFCE7; border-color: #86EFAC; color: #14532D; }

.eyebrow { margin-bottom: 10px; color: var(--orange-fonce); font-weight: 700; font-size: .9rem; }
.titre { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
.titre--h1 { font-size: clamp(2rem, 1.5rem + 2.6vw, 3.3rem); letter-spacing: -.03em; }
.texte { max-width: 62ch; margin-top: 14px; font-size: 1.08rem; color: var(--encre-douce); }
.note { margin-top: 12px; font-size: .9rem; color: var(--encre-douce); }

/* Offres */
.offre__grille { display: grid; gap: 24px; margin-top: 36px; }
@media (min-width: 900px) { .offre__grille { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.carte-prix { padding: 28px; border-radius: var(--rayon); background: var(--orange); color: var(--blanc); }
.carte-prix__chiffre { font-size: clamp(3.6rem, 2.6rem + 4vw, 5.4rem); font-weight: 800; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.carte-prix__unite { margin-top: 6px; font-weight: 600; font-size: 1.1rem; }
.carte-prix__mention { margin-top: 14px; }
.carte-prix__engagement { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .35); }
.inclus { padding: 28px; border-radius: var(--rayon); border: 1px solid var(--filet); }
.inclus h2 { font-size: 1.35rem; font-weight: 800; }
.inclus__liste { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.inclus__liste li { padding: 6px 12px; border-radius: 999px; background: var(--orange-brume); border: 1px solid var(--filet); font-weight: 600; font-size: .95rem; }
.inclus__engagements { margin: 22px 0 0; display: grid; gap: 14px; }
.inclus__engagements dt { font-weight: 700; }
.inclus__engagements dd { margin: 2px 0 0; color: var(--encre-douce); }

.souscription { margin-top: 48px; padding: 28px; border-radius: var(--rayon); background: var(--orange-brume); border: 1px solid var(--filet); }
.champs { display: grid; gap: 16px; margin-top: 22px; }
@media (min-width: 900px) { .champs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.champ { display: grid; gap: 6px; font-weight: 600; }
.champ small { font-weight: 400; color: var(--encre-douce); }
.champ__aide { font-weight: 400; font-size: .9rem; color: var(--encre-douce); }
.champ input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1.5px solid #D6CDC7;
  border-radius: 12px;
  background: var(--blanc);
  color: var(--encre);
  font: inherit;
  font-weight: 400;
}
.champ input:focus { border-color: var(--orange); outline: 3px solid var(--orange-pale); outline-offset: 0; }
.accord { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; }
.accord input { width: 24px; height: 24px; margin: 2px 0 0; flex: none; accent-color: var(--orange); }
.accord__liens { display: flex; flex-wrap: wrap; gap: 0 16px; }
.accord__liens a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.souscription__action { margin-top: 22px; }

.questions { margin-top: 64px; max-width: 760px; }
.questions details { border-bottom: 1px solid var(--filet); }
.questions summary {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 8px 0;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  list-style-position: inside;
}
.questions details p { padding: 0 0 18px; color: var(--encre-douce); max-width: 62ch; }

/* Retour de paiement, activation */
.retour { max-width: 680px; }
.retour__form { margin-top: 24px; }
.retour__aide { margin-top: 36px; padding: 22px; border-radius: var(--rayon); background: var(--orange-brume); border: 1px solid var(--filet); }
.retour__aide h2 { font-size: 1.15rem; font-weight: 750; margin-bottom: 8px; }
.retour__ref { margin-top: 10px; font-weight: 600; overflow-wrap: anywhere; }
.retour > .bouton { margin-top: 28px; }

/* Documents contractuels */
.doc { max-width: 760px; }
/* Le titre d'un document se lit dans la langue du visiteur : « Rückerstattungsrichtlinie » ou « Datenschutzerklärung »
   ne tiennent pas d'un bloc sur un téléphone de 360 px au corps du titre de page. Plus petit au téléphone, et coupé à
   la syllabe (jamais lettre à lettre) si un mot reste trop long. */
.doc .titre--h1 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 480px) { .doc .titre--h1 { font-size: 1.7rem; } }
.doc__reference { margin-top: 10px; color: var(--encre-douce); }
.doc__alerte { margin-top: 20px; padding: 14px 16px; border-radius: 12px; background: #FEF3C7; border: 1px solid #FCD34D; }
.doc__corps { margin-top: 32px; line-height: 1.7; }
.doc__corps h2 { margin: 32px 0 10px; font-size: 1.3rem; font-weight: 750; }
.doc__corps h3 { margin: 22px 0 8px; font-size: 1.08rem; font-weight: 700; }
.doc__corps p, .doc__corps ul, .doc__corps ol { margin: 0 0 12px; }
.doc__pied { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--filet); }
.doc__pied h2 { font-size: 1.1rem; margin-bottom: 8px; }
.doc__pied address { font-style: normal; }

/* ======================= De droite à gauche (lot E, 04.10.2026) =============================
   Les feuilles parlent en propriétés logiques (scripts/convertir_logique.py) : la page arabe se retourne d'elle-même.
   Restent ici les cas sans équivalent logique, et la typographie de l'arabe : Inter n'a pas cette écriture, le
   navigateur prend la police arabe du système (Segoe UI, SF Arabic, Noto) et garde Inter pour les chiffres ; aucun
   interlettrage, qui casserait la liaison des lettres ; un interligne plus généreux. */
html[lang="ar"] body { line-height: 1.65; }
html[lang="ar"] :where(body, body *) { letter-spacing: 0 !important; }
/* Un texte dans une autre langue (une lettre reçue, un nom de langue) garde son sens d'écriture. */
[dir="rtl"] [lang]:not([lang="ar"]) { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .choix-langue__liste button { text-align: right; }
/* Les données qui s'écrivent de gauche à droite : adresses, téléphones, IBAN, références, montants saisis. */
[dir="rtl"] input:is([type="email"], [type="tel"], [type="url"], [inputmode="decimal"], [inputmode="numeric"],
  [name*="iban"], [name*="reference"], [name*="npa"]) { direction: ltr; text-align: end; }
[dir="rtl"] .poursuite { border-radius: 14px 0 0 14px; }
[dir="rtl"] .bulle { border-radius: 20px 20px 6px 20px; }

/* --- La signature des développeurs (17.10.2026) ---------------------------
   « Développé par Octaforge.fr et hybridbusiness.ch », demandée par Johann
   sur tous les sites de HBS : discrète, sous les liens du pied, un cran plus
   petite que sa phrase. Soulignée d'un trait fin : dans une phrase, la
   couleur seule ne fait pas un lien. */
.pied__credit { margin: 8px 0 0; font-size: .8rem; letter-spacing: .02em; }
.pied__credit a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.pied__credit a:hover, .pied__credit a:focus-visible { color: var(--encre); }

/* --- Le tutoriel sur la vitrine (19.10.2026). Le téléphone vertical fait au plus
   360 px de large, à côté du texte ; au téléphone il passe dessous, centré. --- */
.tuto-site { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 5vw, 80px); align-items: center; padding-top: clamp(48px, 8vh, 96px); padding-bottom: clamp(48px, 8vh, 96px); }
.tuto-site__texte { display: grid; gap: 18px; max-width: 560px; }
.tuto-site__sur { margin: 0; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }
.tuto-site .texte { max-width: 46ch; }
.tuto-site__cadre { width: min(360px, 100%); justify-self: center; aspect-ratio: 9 / 16; border-radius: 28px; background: #141414; padding: 10px; box-sizing: border-box; box-shadow: 0 40px 80px -40px rgba(28, 25, 23, 0.45); }
.tuto-site__video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; background: #FFF7F1; }
.bouton--tuto { justify-self: start; display: inline-flex; align-items: center; gap: 10px; }
.tuto-site__format { font-size: 11px; opacity: 0.7; font-family: ui-monospace, Menlo, monospace; }
@media (max-width: 760px) {
  .tuto-site { grid-template-columns: minmax(0, 1fr); }
  .tuto-site__cadre { width: min(300px, 100%); }
}