/* v4 « feuille de service » : noir et blanc, titres condensés, étiquettes mono, filets plutôt que cartes.
   Maquette : canevas Claude Design « Site Jason Drouin, refonte ». Aucun style en ligne (CSP style-src 'self'). */

:root {
  --encre: #111111;
  --papier: #ffffff;
  --gris: #f1f1ef;
  --ligne: #d6d6d6;
  --ligne-gris: #c9c9c6;
  --texte-2: #333333;
  --muted: #555555;
  --muted-clair: #bdbdbd;
  --rec: #d7261e;
  --titre: "Antonio", "Arial Narrow", Arial, sans-serif;
  --texte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mono: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; /* étiquettes : Inter en capitales, comme letmetalk.ai */
  --bouton: "Aileron", "Inter", Arial, sans-serif;
  --gouttiere: 40px;
}
@media (max-width: 760px) { :root { --gouttiere: 18px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; scroll-behavior: smooth; }
body { margin: 0; background: var(--papier); color: var(--encre); font-family: var(--texte); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; display: block; }
a { color: var(--encre); text-underline-offset: 3px; }
a:hover { color: var(--muted); }
p { margin: 0 0 16px; }
h1, h2, h3 { margin: 0; }
:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }
.noir :focus-visible { outline-color: var(--papier); }
[hidden] { display: none !important; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--gouttiere); }
.mono { font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.disp, .hero h1, h2.disp, h3.disp { font-family: var(--titre); font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.24; text-wrap: balance; }
.muted { color: var(--muted); }
.petit { font-size: 14px; }
.centre { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.evitement { position: absolute; left: -9999px; top: 0; background: var(--encre); color: var(--papier); padding: 12px 16px; z-index: 50; }
.evitement:focus { left: 12px; top: 12px; }

/* Boutons : rectangles, mono, sans arrondi */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 15px 24px; font-family: var(--bouton); font-weight: 600; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--encre); cursor: pointer; }
.btn-noir { background: var(--encre); color: var(--papier); }
.btn-noir:hover { background: #2a2a2a; color: var(--papier); }
.btn-blanc, .noir a.btn-blanc { background: var(--papier); color: var(--encre); border-color: var(--papier); }
.btn-blanc:hover, .noir a.btn-blanc:hover { background: #e9e9e9; color: var(--encre); }
.btn-ligne { background: transparent; color: var(--encre); }
.lien-mono { font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

/* Étiquette de section : numéro, nom, puis un filet */
.lab { display: flex; align-items: center; gap: 14px; margin: 0 0 40px; }
.lab .trait { flex: 1; height: 1px; background: currentColor; opacity: .35; }
.rec { display: inline-flex; align-items: center; gap: 8px; }
.rec::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--rec); }

.section { padding: 110px 0 100px; }
.section.serre { padding-top: 0; }
.noir { background: var(--encre); color: var(--papier); }
.noir a { color: var(--papier); }
.gris { background: var(--gris); border-top: 1px solid var(--encre); border-bottom: 1px solid var(--encre); }
.filet-bas { border-bottom: 1px solid var(--encre); }
.titre-xl { font-size: clamp(48px, 6.4vw, 100px); }
.titre-l { font-size: clamp(40px, 4.6vw, 68px); }
.cote { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
.tete2 { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; }
.tete2 > .bas, .cote > .bas { align-self: end; max-width: 48ch; margin: 0; }
.cote .titre-xl { font-size: clamp(44px, 5.2vw, 80px); }
.deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
@media (max-width: 900px) { .cote, .tete2 { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
@media (max-width: 760px) { .deux { grid-template-columns: minmax(0, 1fr); gap: 40px; } .section { padding: 72px 0 68px; } }

/* En-tête */
.entete { position: sticky; top: 0; z-index: 20; background: var(--papier); border-bottom: 1px solid var(--encre); }
.entete .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 64px; }
.marque { display: flex; align-items: baseline; gap: 14px; text-decoration: none; }
.marque .disp { font-size: 26px; letter-spacing: 0; white-space: nowrap; }
.marque .mono { font-size: 11px; color: var(--muted); }
.nav { display: flex; gap: 26px; }
.nav a { text-decoration: none; }
.nav a:hover { text-decoration: underline; }
.entete .btn { min-height: 44px; padding: 13px 18px; font-size: 12px; white-space: nowrap; }
@media (max-width: 1180px) { .marque .mono { display: none; } .nav { gap: 16px; } }
@media (max-width: 960px) { .nav { display: none; } }
@media (max-width: 520px) { .marque .mono { display: none; } .marque .disp { font-size: 20px; white-space: nowrap; } .entete .btn { white-space: nowrap; padding: 12px; font-size: 10.5px; min-height: 44px; } .lab .fin { display: none; } }

/* Héros */
.hero { padding: 72px 0 0; }
.hero-grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.hero-texte { padding: 24px 0 56px; }
.hero h1 { font-size: clamp(40px, 6.2vw, 96px); line-height: 1.3; }
.question-finale, .final h2 { line-height: 1.3; }
.bloc { background: var(--papier); color: var(--encre); padding: 0 .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.bloc-noir { background: var(--encre); color: var(--papier); padding: 0 .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero .accroche { font-size: 20px; line-height: 1.5; max-width: 34ch; margin: 32px 0 0; color: #e8e8e8; }
.hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 36px; }
.hero .rarete { margin: 26px 0 0; color: var(--muted-clair); font-size: 11px; line-height: 1.7; }
.hero .rarete + .rarete { margin-top: 6px; }
.hero-photo { position: relative; margin: 0; align-self: start; aspect-ratio: 4 / 5; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.grain { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: overlay; opacity: .35; pointer-events: none; }
.tc { position: absolute; color: var(--papier); font-size: 11px; }
.tc.hg { left: 14px; top: 14px; } .tc.hd { right: 14px; top: 14px; } .tc.bg { left: 14px; bottom: 14px; }
@media (max-width: 900px) {
  .hero { padding-top: 0; }
  .hero-grille { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero-photo { order: -1; min-height: 0; aspect-ratio: 4 / 5; margin: 0 calc(var(--gouttiere) * -1); }
  .hero-texte { padding: 36px 0 48px; }
}

/* Claquette (ce que tu reçois) */
.claquette { border-top: 1px solid var(--papier); }
.claquette ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.claquette li { padding: 22px 20px 24px; border-right: 1px solid rgba(255,255,255,.35); }
.claquette li:first-child { padding-left: 0; }
.claquette li:last-child { border-right: 0; padding-right: 0; }
.claquette .mono { display: block; margin: 0 0 10px; color: var(--muted-clair); font-size: 11px; }
.claquette .disp { display: block; font-size: 34px; }
@media (max-width: 760px) {
  .claquette ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .claquette li { padding: 18px 14px 20px; border-bottom: 1px solid rgba(255,255,255,.35); }
  .claquette li:nth-child(odd) { padding-left: 0; }
  .claquette li:nth-child(even) { border-right: 0; padding-right: 0; }
  .claquette .disp { font-size: 26px; }
}
.bande-confiance { border-bottom: 1px solid var(--encre); }
.bande-confiance ul { list-style: none; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 10px 36px; padding-top: 16px; padding-bottom: 16px; font-size: 11px; }

/* Liste à filets en 3 colonnes (inclus) */
.liste3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; border-top: 1px solid var(--encre); }
.liste3 > div { padding: 26px 0 30px; border-bottom: 1px solid var(--ligne); }
.liste3 .mono { margin: 0 0 12px; color: var(--muted); }
.liste3 h3 { font-size: 30px; margin-bottom: 12px; }
.liste3 p:last-child { margin: 0; color: var(--texte-2); font-size: 16px; }
@media (max-width: 900px) { .liste3 { grid-template-columns: minmax(0, 1fr); } }
.inclus-titre { max-width: 16ch; margin-bottom: 64px; }
.apres-liste { margin-top: 40px; }

/* Collaborations */
.collabs-tete { margin-bottom: 44px; }
.collabs-tete p { color: var(--texte-2); }
.sous-lab { margin: 0 0 14px; color: var(--muted); }
.sous-lab.espace { margin-top: 32px; }
.mur { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--encre); border-left: 1px solid var(--encre); }
.mur li { border-right: 1px solid var(--encre); border-bottom: 1px solid var(--encre); }
.mur-gens { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mur-gens li { padding: 22px 16px; display: flex; flex-direction: column; gap: 12px; }
.mur-gens img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
.mur-gens .disp { font-size: 22px; }
.mur-agences { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mur-agences li { padding: 18px 16px; display: flex; align-items: center; gap: 12px; }
.mur-agences img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
.mur-agences .disp { font-size: 20px; }
.mur .mono { font-size: 10px; color: var(--muted); }
@media (max-width: 1180px) { .mur-gens, .mur-agences { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mur-gens, .mur-agences { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mur-gens .disp { font-size: 19px; } .mur-agences .disp { font-size: 17px; } }

/* Planche contact (vidéos) */
.travail-tete { margin-bottom: 48px; }
.travail-tete p { color: #d6d6d6; }
.extraits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.extrait { margin: 0; min-width: 0; }
.extrait.paysage { grid-column: span 2; }
.extrait .cadre { position: relative; }
.extrait video { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; background: #000; }
.extrait.paysage video { aspect-ratio: 16 / 9; }
.extrait .num, .extrait .duree { position: absolute; top: 0; background: var(--encre); color: var(--papier); font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: .08em; padding: 6px 8px; pointer-events: none; }
.extrait .num { left: 0; }
.extrait .duree { right: 0; }
.extrait .lire { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; padding: 0; background: transparent; border: 0; cursor: pointer; }
.extrait .lire .etiq { display: inline-flex; align-items: center; gap: 8px; background: var(--papier); color: var(--encre); font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 9px 12px; }
.extrait .lire:hover .etiq, .extrait .lire:focus-visible .etiq { background: var(--rec); color: var(--papier); }
.extrait .lire:focus-visible { outline: 3px solid var(--papier); outline-offset: -3px; }
.extrait.joue .num, .extrait.joue .duree { display: none; }
.extrait figcaption { margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.35); }
.extrait .nom { display: block; font-family: var(--titre); font-weight: 700; text-transform: uppercase; font-size: 20px; line-height: 1.16; }
.extrait .type { font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-clair); }
.note-agences { margin-top: 28px; color: var(--muted-clair); font-size: 14px; }
@media (max-width: 900px) { .extraits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }

/* Méthode */
.methode-titre { font-size: clamp(48px, 5.4vw, 84px); margin-bottom: 28px; }
.methode-lead { font-size: 19px; }
.methode-2 { color: var(--texte-2); margin-bottom: 28px; }
.photo-montage { margin: 0; max-width: 380px; }
.photo-montage img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1); }
.photo-montage figcaption { margin-top: 10px; font-size: 10px; color: var(--muted); }
.video-jason { margin: 0 0 28px; max-width: 340px; }
.video-jason video { width: 100%; aspect-ratio: 9 / 16; background: #000; }
.video-jason figcaption { margin-top: 8px; font-size: 10px; color: var(--muted); }
.etapes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--encre); }
.etapes li { display: grid; grid-template-columns: 72px minmax(0, 1fr) 190px; gap: 24px; align-items: baseline; padding: 28px 0; border-bottom: 1px solid var(--ligne); }
.etapes li:last-child { border-bottom-color: var(--encre); }
.etapes .n { font-size: 44px; }
.etapes h3 { font-size: 32px; margin-bottom: 8px; }
.etapes p { margin: 0; color: var(--texte-2); }
.etapes .tps { text-align: right; color: var(--encre); }
@media (max-width: 1180px) { .etapes li { grid-template-columns: 56px minmax(0, 1fr); gap: 8px 20px; } .etapes .tps { grid-column: 2; text-align: left; } }
@media (max-width: 760px) { .etapes li { grid-template-columns: 48px minmax(0, 1fr); gap: 8px 16px; } .etapes .tps { grid-column: 2; text-align: left; } .etapes .n { font-size: 34px; } .etapes h3 { font-size: 26px; } }
.total { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 32px; }
.total .disp { font-size: clamp(26px, 3vw, 34px); background: var(--encre); color: var(--papier); padding: 10px 14px 6px; margin: 0; }
.total p:last-child { margin: 0; color: var(--texte-2); max-width: 36ch; font-size: 15px; }
.total .btn { margin-top: 8px; }

/* Problème */
.probleme-titre { max-width: 16ch; margin-bottom: 56px; }
.quatre { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--encre); margin: 0; }
.quatre > div { padding: 22px 24px 26px; border-right: 1px solid var(--ligne); }
.quatre > div:first-child { padding-left: 0; }
.quatre > div:last-child { border-right: 0; padding-right: 0; }
.quatre dt { margin: 0 0 10px; }
.quatre dd { margin: 0; color: var(--texte-2); }
@media (max-width: 900px) {
  .quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quatre > div { padding: 18px 16px 20px; border-bottom: 1px solid var(--ligne); }
  .quatre > div:nth-child(odd) { padding-left: 0; }
  .quatre > div:nth-child(even) { border-right: 0; padding-right: 0; }
}
@media (max-width: 520px) { .quatre { grid-template-columns: minmax(0, 1fr); } .quatre > div { border-right: 0; padding-left: 0; padding-right: 0; } }
.question-finale { font-size: clamp(32px, 3.6vw, 52px); margin: 72px 0 0; max-width: 24ch; }

/* Prix */
.prix-tete { margin-bottom: 52px; }
.prix-titre { font-size: clamp(56px, 7vw, 108px); }
.prix-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--encre); background: var(--papier); }
.prix-grille > * { min-width: 0; }
.offre { padding: 36px 36px 34px; }
.offre .mono { margin: 0 0 18px; color: var(--muted-clair); }
.offre .montant { font-size: clamp(56px, 6vw, 88px); margin: 0 0 18px; }
.offre .detail { margin: 0 0 24px; color: #e0e0e0; font-size: 16px; }
.offre ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.35); }
.offre li { padding: 12px 0 12px 1.1em; text-indent: -1.1em; border-bottom: 1px solid rgba(255,255,255,.2); font-size: 15px; }
.offre li:last-child { border-bottom: 0; }
.offre li::before { content: "+ "; font-family: var(--mono); }
.offre .btn { margin-top: 26px; }
.offre .note { margin: 16px 0 0; color: var(--muted-clair); font-size: 13px; }
.comparatif { padding: 36px 36px 34px; }
.comparatif .mono { margin: 0 0 18px; color: var(--muted); }
.comparatif h3 { font-size: 30px; margin-bottom: 6px; }
.comparatif .montant-agence { font-size: clamp(44px, 4.6vw, 64px); margin: 10px 0 8px; }
.comparatif .montant-agence .mono { font-size: 12px; color: var(--encre); margin: 0; }
.comparatif .source { margin: 0 0 22px; font-size: 10px; color: var(--muted); line-height: 1.6; }
.tableau { width: 100%; border-collapse: collapse; font-size: 14px; border-top: 1px solid var(--encre); }
.tableau th { font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; text-align: left; padding: 10px 8px 10px 0; border-bottom: 1px solid var(--encre); }
.tableau td { padding: 12px 10px 12px 0; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau td:first-child { font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; width: 26%; padding-top: 14px; }
.tableau td:nth-child(2) { color: var(--muted); }
.prix-fin { margin: 28px 0 0; max-width: 72ch; color: var(--texte-2); font-size: 15px; }
@media (max-width: 900px) { .prix-grille { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) {
  .offre, .comparatif { padding: 28px 20px 26px; }
  .tableau, .tableau tbody, .tableau tr, .tableau td { display: block; width: 100%; }
  .tableau thead { display: none; }
  .tableau tr { padding: 12px 0; border-bottom: 1px solid var(--ligne); }
  .tableau td { border: 0; padding: 2px 0; }
  .tableau td:first-child { width: 100%; padding: 0 0 4px; }
  .tableau td:nth-child(2)::before { content: "Agence : "; font-weight: 600; color: var(--muted); }
  .tableau td:nth-child(3)::before { content: "Avec moi : "; font-weight: 600; }
}

/* Garanties */
.garanties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.garantie { border: 1px solid var(--encre); padding: 34px 32px 28px; display: flex; flex-direction: column; }
.garantie .mono { margin: 0 0 22px; }
.garantie .citation { font-family: var(--titre); font-weight: 700; text-transform: uppercase; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.3; margin: 0 0 24px; text-wrap: balance; }
.garantie .conditions { margin: 0 0 26px; font-size: 14px; color: var(--muted); }
.garantie .signe { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--encre); font-size: 10px; }
.garanties-fin { margin: 32px 0 0; max-width: 72ch; color: var(--texte-2); }
@media (max-width: 900px) { .garanties { grid-template-columns: minmax(0, 1fr); gap: 24px; } .garantie { padding: 26px 20px 22px; } }

/* Listes à filets (échange, pour qui, merci) */
.liste-filets { list-style: none; margin: 0; padding: 0; }
.liste-filets .tete { margin: 0 0 4px; padding-bottom: 12px; border-bottom: 1px solid currentColor; }
.liste-filets li { padding: 14px 0; border-bottom: 1px solid var(--ligne); }
.liste-filets li:last-child { border-bottom: 0; }
.noir .liste-filets li { border-bottom-color: rgba(255,255,255,.2); font-size: 15px; }
.noir .liste-filets li:last-child { border-bottom: 0; }
.echange-tete p { color: #d6d6d6; }
.oui-non .tete-grosse { font-size: 40px; padding-bottom: 12px; border-bottom: 3px solid var(--encre); margin: 0; }
.oui-non .non { color: var(--muted); }
.pour-qui-titre { max-width: 15ch; margin-bottom: 36px; }
.pour-qui-lead { max-width: 60ch; color: var(--texte-2); margin-bottom: 48px; }
.ligne-fine { margin-top: 32px; color: #d6d6d6; font-size: 14px; }
.cta-centre { margin-top: 40px; }

/* Qui je suis */
.jason { align-items: end; }
.photo-jason { position: relative; margin: 0; }
.photo-jason img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 80%; filter: grayscale(1) contrast(1.06); }
.photo-jason figcaption { position: absolute; left: 0; bottom: 0; background: var(--papier); padding: 8px 10px; font-size: 10px; }
.jason h2 { font-size: clamp(64px, 8vw, 128px); margin-bottom: 28px; }
.jason .lead { font-size: 19px; }
.jason p { color: var(--texte-2); }

/* Règles */
.regles { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--encre); counter-reset: r; }
.regles li { counter-increment: r; display: grid; grid-template-columns: 56px minmax(0, 1fr); padding: 16px 0; border-bottom: 1px solid var(--ligne-gris); }
.regles li:last-child { border-bottom: 0; }
.regles li::before { content: counter(r, decimal-leading-zero); font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .08em; padding-top: 3px; }

/* FAQ */
.faq { border-top: 1px solid var(--encre); }
.faq details { border-bottom: 1px solid var(--ligne); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; font-weight: 600; font-size: 17px; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); font-size: 20px; line-height: 1; transition: transform .15s ease; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .rep p { margin: 0 0 20px; color: var(--texte-2); max-width: 68ch; }

/* Appel final + pied */
.final { padding: 120px 0 0; }
.final h2 { font-size: clamp(56px, 9vw, 150px); }
.final .bloc { padding: 0 .06em; }
.final-bas { margin-top: 48px; padding-bottom: 100px; }
.final-bas p { color: #d6d6d6; max-width: 52ch; }
.final .rarete { color: var(--muted-clair); font-size: 11px; line-height: 1.7; margin: 18px 0 0; }
.pied { border-top: 1px solid rgba(255,255,255,.35); background: var(--encre); color: var(--papier); }
.pied .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; padding-top: 28px; padding-bottom: 36px; }
.pied .disp { font-size: 24px; margin: 0 0 8px; }
.pied .desc { margin: 0; color: var(--muted-clair); font-size: 14px; max-width: 38ch; }
.pied nav { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 11px; align-items: flex-start; }
.pied a { color: var(--papier); }
.pied .copyright { width: 100%; margin: 0; color: #8f8f8f; font-size: 10px; }
.pied-clair { border-top: 1px solid var(--encre); }
.pied-clair .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 26px; padding-top: 24px; padding-bottom: 32px; font-size: 11px; }
.pied-clair nav { display: flex; flex-wrap: wrap; gap: 10px 26px; }

/* Barre collante mobile */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px var(--gouttiere) calc(10px + env(safe-area-inset-bottom)); background: var(--papier); border-top: 1px solid var(--encre); transform: translateY(110%); transition: transform .2s ease; }
.sticky-cta.on { transform: none; }
.sticky-cta .btn { width: 100%; justify-content: center; }
@media (min-width: 900px) { .sticky-cta { display: none; } }
/* Douceur, comme letmetalk.ai : apparition au défilement (site.js), boutons qui grossissent un peu, images qui reprennent leur couleur */
.apparait { transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
.a-venir { opacity: 0; transform: translateY(28px); }
.btn { transition: transform .2s ease, background-color .2s ease, color .2s ease; }
.btn:hover { transform: scale(1.04); }
.extrait .cadre { overflow: hidden; }
.extrait video { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.extrait:hover video { transform: scale(1.03); }
.extrait.joue video, .extrait.joue:hover video { transform: none; }
.mur img { transition: filter .3s ease; }
.mur li:hover img { filter: grayscale(0); }
.hero-photo img, .photo-jason img { transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.hero-photo:hover img, .photo-jason:hover img { transform: scale(1.02); }
.faq .rep { animation: deroule .35s ease; }
@keyframes deroule { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media print { .a-venir { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sticky-cta, .faq summary::after, .apparait, .btn, .extrait video, .mur img, .hero-photo img, .photo-jason img { transition: none; }
  .a-venir { opacity: 1; transform: none; }
  .btn:hover, .extrait:hover video, .hero-photo:hover img, .photo-jason:hover img { transform: none; }
  .faq .rep { animation: none; }
}

/* ===== Pages secondaires (candidature, merci, légal, 404) ===== */
.page2 .entete .lien-mono { text-decoration: none; }
.etiquette { display: inline-block; font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid currentColor; padding: 6px 9px 5px; margin-bottom: 22px; }
.page2 .btn:not(.btn-blanc):not(.btn-ligne) { background: var(--encre); color: var(--papier); }
.page2 .btn:not(.btn-blanc):not(.btn-ligne):hover { background: #2a2a2a; color: var(--papier); }
.page2 h1 { font-family: var(--titre); font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.24; text-wrap: balance; }
.page2 .lead { font-size: 19px; line-height: 1.5; }
.page2 .petit { font-size: 14px; }

/* Candidature */
.page-form { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: calc(100vh - 64px); }
.form-cote { padding: 56px var(--gouttiere) 48px max(var(--gouttiere), calc((100vw - 1280px) / 2 + var(--gouttiere))); display: flex; flex-direction: column; gap: 22px; }
.form-cote h1 { font-size: clamp(40px, 4.2vw, 64px); margin: 0; overflow-wrap: break-word; }
.form-cote p { color: #d6d6d6; max-width: 36ch; margin: 0; }
.form-cote .lab { margin: 0 0 18px; color: var(--papier); }
.form-cote-note { margin-top: auto !important; color: var(--muted-clair) !important; font-size: 11px; }
.form-wrap { padding: 56px 48px 72px; max-width: 820px; width: 100%; }
.progress { height: 3px; background: #e2e2e0; margin: 0 0 10px; }
.progress-bar { display: block; height: 3px; width: 12.5%; background: var(--encre); transition: width .2s ease; }
.progress-label { display: block; margin: 0 0 40px; font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.step { border: 0; padding: 0; margin: 0; min-width: 0; }
.step legend { font-family: var(--titre); font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.24; text-wrap: balance; font-size: clamp(36px, 4.2vw, 60px); padding: 0; margin: 0 0 18px; }
.step .aide { margin: 0 0 26px; color: var(--muted); max-width: 56ch; }
.champ { display: block; margin: 0 0 26px; }
.champ > span { display: block; font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.champ input, .champ select, .champ textarea { width: 100%; font: inherit; font-size: 18px; color: var(--encre); padding: 12px 0 10px; border: 0; border-bottom: 2px solid var(--encre); border-radius: 0; background: transparent; -webkit-appearance: none; appearance: none; }
.champ input:focus { outline: none; border-bottom-color: var(--muted); box-shadow: 0 2px 0 0 var(--encre); }
.champ small { display: block; margin-top: 8px; font-size: 14px; color: var(--muted); }
[aria-invalid="true"] { border-bottom-color: var(--rec) !important; }
.choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--encre); border-left: 1px solid var(--encre); }
.choix label { display: flex; align-items: center; gap: 12px; padding: 16px 16px; min-height: 60px; border-right: 1px solid var(--encre); border-bottom: 1px solid var(--encre); cursor: pointer; }
.choix input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--encre); }
.choix label:has(input:checked) { background: var(--encre); color: var(--papier); }
.choix label:has(input:checked) input { accent-color: var(--papier); }
.choix label:has(input:focus-visible) { outline: 3px solid var(--encre); outline-offset: -3px; }
.case { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15px; margin: 0 0 18px; cursor: pointer; }
.case input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--encre); }
.avis { border: 1px solid var(--encre); padding: 18px 20px; font-size: 14px; color: var(--texte-2); margin: 8px 0 0; }
.nav-etapes { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 36px; }
.btn-retour { font-family: var(--bouton); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; background: transparent; color: var(--encre); border: 1px solid var(--encre); min-height: 48px; padding: 14px 18px; cursor: pointer; }
.btn-retour:hover { background: var(--gris); }
.form-error { border-left: 3px solid var(--rec); padding: 10px 14px; background: #fbeceb; color: var(--encre); margin: 0 0 24px; }
.sous-envoi { margin-top: 14px; font-size: 13px; color: var(--muted); }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 900px) {
  .page-form { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .form-cote { padding: 36px var(--gouttiere) 32px; }
  .form-cote-note { margin-top: 6px !important; }
  .form-wrap { padding: 36px var(--gouttiere) 56px; }
}
@media (max-width: 640px) { .choix { grid-template-columns: minmax(0, 1fr); } }

/* Merci */
.page-merci { padding-bottom: 40px; }
.merci-photo { margin: 0; border-bottom: 1px solid var(--encre); }
.merci-photo img { width: 100%; max-height: 420px; object-fit: cover; object-position: center 72%; filter: grayscale(1) contrast(1.06); }
.merci-corps { padding-top: 56px; max-width: 980px; margin-left: auto; margin-right: auto; }
.merci-corps h1 { font-size: clamp(48px, 6.4vw, 100px); margin: 0 0 22px; }
.merci-corps h2 { font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin: 48px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--encre); }
.merci-corps .lead { max-width: 52ch; }
.merci-corps h2 + p { margin-top: 14px; }
.liste { list-style: none; margin: 0 0 8px; padding: 0; counter-reset: l; }
.liste li { counter-increment: l; display: grid; grid-template-columns: 44px minmax(0, 1fr); padding: 14px 0; border-bottom: 1px solid var(--ligne); }
.liste li::before { content: counter(l, decimal-leading-zero); font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .08em; padding-top: 3px; }
.calendrier { border: 1px solid var(--encre); min-height: 200px; margin: 28px 0 14px; background: var(--gris); }
.calendrier iframe { width: 100%; height: 720px; border: 0; display: block; background: var(--papier); }
.calendrier > p { padding: 20px; margin: 0; }
.lien-secondaire { font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

/* Pages légales */
.legal { max-width: 820px; padding-top: 56px; padding-bottom: 80px; }
.legal h1 { font-size: clamp(44px, 5.6vw, 84px); margin: 0 0 14px; }
.legal h2 { font-family: var(--titre); font-weight: 700; text-transform: uppercase; font-size: 26px; line-height: 1.24; margin: 48px 0 14px; padding-top: 16px; border-top: 1px solid var(--encre); }
.legal h3 { font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin: 24px 0 8px; }
.legal p, .legal li { color: var(--texte-2); }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 12px 0 20px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 10px 10px 0; border-bottom: 1px solid var(--ligne); }
.legal th { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border-bottom-color: var(--encre); }
.legal .tableau-defile { overflow-x: auto; }
.identification { font-size: 12px; color: var(--muted); margin: 0; }

/* 404 */
.page-404 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: calc(100vh - 140px); }
.page-404 img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.page-404 .wrap { padding-top: 72px; padding-bottom: 72px; margin: 0; }
.page-404 h1 { font-size: clamp(48px, 6vw, 96px); margin: 0 0 20px; }
@media (max-width: 760px) { .page-404 { grid-template-columns: minmax(0, 1fr); } .page-404 img { max-height: 320px; } }

/* Retrait */
.choix-1 { grid-template-columns: minmax(0, 1fr); margin-bottom: 30px; }
.champ-espace { margin-top: 8px; }
.retrait-ok h2 { font-size: clamp(44px, 5vw, 72px); margin: 0 0 18px; }
.retrait-ok:focus { outline: none; }

/* Revue mobile (21 oct.) : promesse au-dessus du pli, cibles de 44 px, rien qui déborde à 320 px */
.step:focus { outline: none; }
main a[href^="mailto:"] { overflow-wrap: anywhere; }
.extrait .type { display: block; line-height: 1.4; margin-top: 4px; }
.pied nav a, .pied-clair nav a, .page2 .entete .lien-mono, .hero .actions .lien-mono, .lien-secondaire { display: inline-flex; align-items: center; min-height: 44px; }
.pied nav, .pied-clair nav { gap: 0 24px; }
@media (max-width: 760px) {
  .hero-photo { aspect-ratio: 4 / 3; }
  .hero-photo img { object-position: center 30%; }
  .calendrier { display: none; }
  .calendrier-secours .btn { width: 100%; justify-content: center; min-height: 56px; font-size: 15px; }
  .merci-photo img { max-height: 180px; }
  .form-cote { padding: 20px var(--gouttiere) 18px; gap: 10px; }
  .form-cote .lab { margin-bottom: 4px; }
  .form-cote h1 { font-size: 32px; }
  .form-cote > p:not(.form-cote-note) { display: none; }
  .avis { font-size: 13px; padding: 14px 16px; }
}
@media (max-width: 380px) {
  .mur-agences li { padding: 14px 10px; gap: 8px; }
  .mur-agences img { width: 32px; height: 32px; }
  .mur-agences .disp { font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
}