/* Page de vente « Ce que je n'ai jamais écrit ».
   Parti pris : une revue littéraire imprimée. Du papier blanc, de l'encre, des tableaux et des photographies
   en grand, des légendes en italique. Le bordeaux est réservé aux boutons et à quelques petits repères.
   Aucun encadré coloré, aucune barre de couleur sur le côté. */

body.vente{padding-inline:0;font-size:20px;line-height:1.7}
.vente p{hyphens:manual}

/* En-tête : le nom de la maison, comme en haut d'une revue */
.entete{padding:22px 20px 16px;border-bottom:1px solid var(--encre);max-width:1100px;margin:0 auto}
.entete .slogan{margin-top:2px}

/* Ouverture : le titre et Colette à son balcon */
.ouverture{max-width:1100px;margin:0 auto;padding:40px 20px 0;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:56px;align-items:center}
.ouverture-texte .sur{text-align:left;margin:0 0 18px;font-size:15px;font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.vente h1{text-align:left;font-size:clamp(36px,4vw,54px);line-height:1.1;letter-spacing:-.01em;margin:0 0 24px;text-wrap:balance}
.chapeau{font-size:24px;line-height:1.45;font-style:italic;margin:0 0 34px;max-width:24em;text-wrap:pretty}
.appel{margin:0}
.ouverture .img{margin:0}
.appel span{display:block;font-size:16px;color:var(--gris);margin-top:14px}
.appel-milieu{clear:both;text-align:center;margin:56px 0 0}

/* Les colonnes de texte */
.texte{max-width:680px;margin:0 auto;padding:0 20px}
.texte::after{content:'';display:block;clear:both}
.ouverture + .texte{padding-top:72px;border-top:0}
.salutation{font-style:italic;margin-bottom:22px}
.lettrine::first-letter{float:left;font-size:4.1em;line-height:.82;margin:.07em .09em 0 0;font-weight:400;color:var(--encre)}

.vente h2{font-size:clamp(26px,3.6vw,34px);line-height:1.18;font-weight:700;letter-spacing:0;text-transform:none;color:var(--encre);text-align:left;margin:76px 0 24px;text-wrap:balance}

/* Citation centrale : grande, en italique, seule sur sa ligne, comme une épigraphe */
.exergue{margin:64px auto;padding:0;max-width:30em;text-align:center}
.exergue p{font-style:italic;font-size:clamp(25px,3.4vw,32px);line-height:1.35;margin:0;text-wrap:balance}
.exergue::before,.exergue::after{content:'';display:block;width:56px;margin:0 auto;border-top:1px solid var(--encre)}
.exergue::before{margin-bottom:28px}
.exergue::after{margin-top:28px}

/* Les images */
.img{margin:48px 0}
.img img{display:block;width:100%;height:auto}
.img figcaption{font-style:italic;font-size:15px;line-height:1.5;color:var(--gris);margin-top:10px}
.img .credit{font-style:normal;font-size:12px;letter-spacing:.02em;color:#8C8782;white-space:normal}
.img .credit a{color:inherit}

/* Portrait dans la marge, à droite ou à gauche du texte */
.marge-droite,.marge-gauche{max-width:400px;margin:40px auto}

/* Page de livre reproduite : une feuille posée sur la table */
.facsimile{max-width:440px;margin:56px auto}
.facsimile img{box-shadow:0 1px 2px rgba(0,0,0,.10),0 18px 36px -18px rgba(0,0,0,.35)}
.facsimile figcaption{text-align:center;margin-top:16px}

/* Tableau en pleine largeur, entre deux chapitres */
.pleine{max-width:1040px;margin:88px auto}
.pleine figcaption{max-width:680px;margin:12px auto 0;padding:0 20px;text-align:center}

/* Photographie plus large que la colonne */
.large{margin:56px -20px}
.large figcaption{padding:0 20px}

/* Deux photographies côte à côte, à la même hauteur */
.paire{display:flex;gap:14px;margin:52px 0;align-items:flex-start}
.paire .img{margin:0;flex:var(--r) 1 0}

/* Avant, après : deux phrases, comme deux états d'un manuscrit */
.avant-apres{margin:34px 0 30px;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);padding:24px 0 6px}
.vente .avant,.vente .apres{background:none;border:0;padding:0;margin:0 0 20px;font-size:inherit}
.vente .avant{color:var(--gris);font-style:italic}
.vente .avant span,.vente .apres span{display:block;font-size:13px;font-style:normal;letter-spacing:.2em;text-transform:uppercase;margin-bottom:4px}
.vente .avant span{color:var(--gris)}
.vente .apres span{color:var(--accent)}

/* Les trois appuis */
.piliers p{margin-bottom:22px}
.piliers b{display:block;font-size:22px;line-height:1.3;margin-bottom:4px}

/* Le chemin : trois temps, et quelques promesses pour chacun (le détail reste une surprise) */
.chemin{margin:36px 0 24px;border-top:1px solid var(--encre)}
.temps{padding:24px 0 8px;border-bottom:1px solid var(--filet)}
.temps:last-child{border-bottom:1px solid var(--encre)}
.temps .partie{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--gris);margin:0 0 4px}
.temps-titre{font-size:24px;line-height:1.25;font-weight:700;margin:0 0 14px}
.temps ul{margin:0 0 12px}
.temps li{font-size:18.5px;line-height:1.55;margin-bottom:12px}

/* Personne en particulier : la lectrice */
.lectrice{display:flex;gap:20px;align-items:center;margin:0 0 28px}
.lectrice-photo{flex:0 0 120px;height:150px;display:flex;align-items:center;justify-content:center;text-align:center}

/* Les listes : un petit repère discret */
.texte ul.coches li::before{content:'✔';color:var(--accent);font-size:.85em}

/* Le prix : une liste de tarifs, avec des points de conduite */
.tarifs{margin:24px 0 26px}
.tarifs p{display:flex;align-items:flex-end;margin:0 0 14px;font-size:18px}
.tarifs span{flex:0 1 auto}
.tarifs p::after{content:'';order:2;flex:1 1 24px;min-width:24px;margin:0 10px;border-bottom:1px dotted #9C968F;transform:translateY(-6px)}
.tarifs b{order:3;white-space:nowrap;font-weight:400;font-variant-numeric:tabular-nums}
.tarifs span{order:1}
.tarifs .nous{margin-top:22px;padding-top:18px;border-top:1px solid var(--encre);font-size:20px}
.tarifs .nous span{font-weight:700}
.tarifs .nous b{font-weight:700;font-size:26px}

/* La garantie : entre deux doubles filets, comme un engagement imprimé */
.vente .garantie{border:0;border-top:3px double var(--encre);border-bottom:3px double var(--encre);padding:26px 0 10px;margin:40px 0;text-align:center}
.vente .garantie-titre{color:var(--encre);font-size:24px;font-style:italic;font-weight:400}
.vente .garantie p{font-size:18px}

/* Questions */
.questions p{margin-bottom:26px}
.questions b{font-size:21px;line-height:1.5}

/* Bon de commande : le coupon découpé, sur papier blanc */
.vente .bon{background:#fff;margin-top:52px}

.signature{margin-top:40px}
.ps{margin-top:22px}

.credits-bloc{clear:both;margin:56px 0 0;font-size:14px;color:var(--gris)}
.credits-bloc summary{cursor:pointer}
.credits{margin-top:12px}
.credits li{font-size:13px;line-height:1.5;margin-bottom:6px}

.vente footer{padding:24px 20px 40px;margin-top:64px}

/* Tablettes et ordinateurs : les portraits passent dans la marge */
@media (min-width:760px){
  .marge-droite{float:right;width:44%;margin:8px 0 24px 36px}
  .marge-gauche{float:left;width:44%;margin:8px 36px 24px 0}
}
/* Les images plus larges que la colonne débordent dans la marge seulement quand l'écran a la place (sinon, défilement horizontal sur tablette). */
@media (min-width:920px){
  .large{margin:64px -90px}
  .large figcaption{padding:0 90px}
  .paire{margin:56px -60px}
}
@media (min-width:1100px){
  .marge-droite{width:330px;margin-right:-150px}
  .marge-gauche{width:330px;margin-left:-150px}
  .large{margin:72px -170px}
  .large figcaption{padding:0 170px}
  .paire{margin:64px -130px;gap:18px}
}

/* Téléphones */
@media (max-width:759px){
  .ouverture{grid-template-columns:1fr;gap:34px;padding-top:26px;text-align:center}
  .ouverture-texte .sur{text-align:center;font-size:13px}
  .vente h1{text-align:center;font-size:clamp(31px,8.4vw,40px)}
  .chapeau{font-size:20px;margin:0 auto 26px}
  .appel .bouton{display:block;width:100%}
  .ouverture .img{margin:0 auto;max-width:360px}
  .ouverture .img figcaption{text-align:center}
  .ouverture + .texte{padding-top:48px}
  .vente h2{margin-top:58px}
  .pleine{margin:64px 0}
  .paire{flex-direction:column;gap:32px}
  .paire .img{flex:none;width:100%}
  .tarifs p{font-size:17px}
  .tarifs .nous b{font-size:22px}
}
@media (max-width:520px){
  body.vente{font-size:18.5px}
  .lectrice{flex-direction:column;align-items:stretch}
  .lectrice-photo{flex-basis:auto}
}

/* Un portrait dans la marge ne déborde jamais sur le chapitre suivant */
.vente h2,.paire,.exergue,.avant-apres,.chemin,.facsimile,.large,.tarifs,.garantie,.bon,.signature{clear:both}

/* Page des trois ateliers offerts : le bon d'inscription dans l'ouverture */
.accueil .ouverture{padding-top:48px;align-items:start}
.accueil .ouverture .img{margin-top:8px}
.accueil .ouverture .bon{margin:6px 0 0;max-width:460px}
.accueil .chapeau{margin-bottom:26px}
.appel-milieu .bouton{text-decoration:none}
.appel-note{text-decoration:none;color:var(--gris);font-size:.8em;vertical-align:super;line-height:0}
.note{font-size:14px;line-height:1.5;color:var(--gris);margin-top:28px}
.texte .bon{max-width:560px;margin-left:auto;margin-right:auto}
@media (max-width:759px){
  .accueil .ouverture{padding-top:28px}
  .accueil .ouverture .bon{margin:0 auto;text-align:left}
}
.insecable{white-space:nowrap}
/* Citation longue, dans le fil de la lettre */
.citation{margin:28px 0 30px;padding:0 0 0 1.4em;font-style:italic}
.citation p{margin:0 0 6px}
.citation .source{font-style:normal;font-size:15px;color:var(--gris)}
/* Les critères de relecture : de simples questions, en italique */
.criteres{margin:0 0 22px 1.4em}
.criteres li{font-style:italic;padding-left:0;text-indent:0;margin-bottom:6px}
.criteres li::before{content:none}
.noel{margin-top:26px;padding-top:18px;border-top:1px solid var(--filet)}

/* ===== Version « lettre de vente » : ouverture sur une seule colonne, centrée, sans image ni filet ===== */
.ouverture{display:block;max-width:760px;margin:0 auto;padding:56px 20px 0;text-align:center}
.ouverture-texte .sur{text-align:center;margin:0 0 18px;font-size:19px;font-style:italic;letter-spacing:0;text-transform:none;color:var(--accent)}
.vente h1{text-align:center;font-size:clamp(34px,5vw,50px);line-height:1.15;margin:0 auto 22px;max-width:17em}
.chapeau{font-size:22px;line-height:1.5;margin:0 auto 30px;max-width:30em;color:var(--encre)}
.ouverture .appel .bouton{display:inline-block}
.accueil .ouverture{padding-top:56px}
.accueil .ouverture .bon{margin:0 auto;max-width:480px;text-align:left}
.ouverture + .texte{padding-top:56px}
.exergue::before,.exergue::after{content:none}
.avant-apres{border:0;padding:6px 0 0}
.vente .garantie{border:0;padding:0;margin:36px 0}
.noel{border-top:0;padding-top:0}
footer,.vente footer{border-top:0}
.apropos{margin-top:8px}
@media (max-width:759px){
  .ouverture{padding-top:32px}
  .ouverture-texte .sur{font-size:17px}
  .vente h1{font-size:clamp(29px,8vw,38px)}
  .chapeau{font-size:19px}
  .ouverture .appel .bouton{display:block;width:100%}
  .ouverture + .texte{padding-top:40px}
}