/* ════════════════════════════════════════════════════════════════
   L'ENTREGENT — feuille commune aux deux maisons
   Trois éléments de mise en page : la colonne de lecture, la figure,
   la planche. Aucune bande sombre, nulle part.
   ════════════════════════════════════════════════════════════════ */

:root{
  --papier:#F1F0EC; --surface:#FFFFFF; --encre:#16202B; --lecture:#23303A;
  --muted:#4A5158; --faint:#8E9299;--gris:#63696F; --filet:#D8D5CD; --filet-clair:#E7E4DC;
  --rompu:#9B3B33; --tenu:#3E7A5A; --attente:#A9762C;
  --sans:Archivo,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --serif:Fraunces,Georgia,'Times New Roman',serif;
  --d-texte:520ms; --d-trait:900ms; --d-figure:1400ms;
  --e:cubic-bezier(.16,.84,.44,1);
  --marge:100px;
}
/* la maison de l'occasion — froid */
body[data-maison="occasion"]{
  --fond:#FBFCFD; --acc:#2E4A63; --acc2:#22384B; --clair:#9DB2C4;
  --pale:#C7D4DE; --teinte:#F4F7FA; --fil:#D3E0EA;
}
/* la maison de la présence — chaud */
body[data-maison="presence"]{
  --fond:#FDFCF9; --acc:#7A6647; --acc2:#5E4E36; --clair:#C4B492;
  --pale:#DDD1B8; --teinte:#FAF7F1; --fil:#E4DAC7;
}
/* le seuil — terrain neutre, sur le même fond clair que les deux maisons.
   Le papier F1F0EC ne sert plus que de matière : la planche et le pied. */
body[data-maison="seuil"]{
  --fond:#FCFCFB; --acc:#16202B; --acc2:#16202B; --clair:#CFC7B5;
  --pale:#D8D5CD; --teinte:#FFFFFF; --fil:#D8D5CD;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--encre);font-family:var(--sans);
  font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}
[hidden]{display:none !important}
a{color:var(--acc);text-decoration:none;transition:color 180ms var(--e)}
a:hover{color:var(--encre)}
::selection{background:var(--fil)}

/* ── le bandeau de maison, qui ne quitte jamais l'écran ───────── */
.maison{position:sticky;top:0;z-index:30;background:color-mix(in srgb, var(--fond) 94%, transparent);
  -webkit-backdrop-filter:saturate(150%) blur(7px);backdrop-filter:saturate(150%) blur(7px);
  border-bottom:1px solid var(--encre)}
.maison .in{max-width:1440px;margin:0 auto;padding:0 var(--marge);min-height:66px;
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.marque{font-family:var(--serif);font-weight:400;font-size:14px;letter-spacing:.42em;
  text-transform:uppercase;color:var(--encre);white-space:nowrap}
/* le même gris que le filet des colonnes : deux traits alignés doivent aussi
   être de la même encre, sans quoi l'alignement ne se voit pas */
.sep{width:1px;height:15px;background:var(--filet-clair);flex:0 0 1px}
.voie{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--acc);white-space:nowrap}
.nav{display:flex;gap:30px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.nav a{color:inherit}
.nav a:hover{color:var(--encre)}
.nav a.ici{color:var(--acc);border-bottom:1px solid var(--acc);padding-bottom:3px}
.compte{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
/* La jauge est un agrément, et elle le reste : elle cède sa largeur au fil
   d'Ariane dès que celui-ci en manque, au lieu d'attendre un seuil fixe. Le
   français est plus long que l'anglais, et « Maison de la présence › 08 »
   venait buter sur le commutateur le jour où celui-ci a montré deux langues. */
.jauge{width:168px;height:1px;background:var(--fil);position:relative;
  flex:0 1 168px;min-width:0}
.jauge i{position:absolute;top:0;height:1px;background:var(--acc);width:0;transition:width 120ms linear}
body[data-maison="occasion"] .jauge i{left:0}
body[data-maison="presence"] .jauge i{right:0}

/* ── la grille ────────────────────────────────────────────────── */
.page{max-width:1440px;margin:0 auto;padding:0 var(--marge) 120px}
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.notes{padding-top:230px}
.lecture{grid-column:4/span 6;padding-top:76px;min-width:0}
.rail{padding-top:76px}
.rail .col{position:sticky;top:112px}
/* Une seule grille pour les deux maisons. Le miroir était joli sur le papier,
   mais on lit de gauche à droite : déplacer le sommaire d'un bord à l'autre en
   changeant de voie, c'est déplacer le repère de navigation. Ce qui distingue
   les deux maisons doit être l'accent et le chiffre, jamais la structure. */
.rail{grid-column:1/span 2;border-right:1px solid var(--filet-clair);padding-right:20px}
.notes{grid-column:11/span 2;border-left:1px solid var(--filet-clair);padding-left:20px}

/* Les trois colonnes tiennent sur une seule ligne. Le balisage les donne
   dans l'ordre rail, lecture, notes ; le placement automatique d'une
   grille avance et ne revient jamais en arrière, si bien que la maison II
   se dépliait en escalier sur trois lignes. On les ancre. */
@media (min-width:861px){
  .lecture,.rail,.notes{grid-row:1}
}

/* ── le point fixe : le numéro ────────────────────────────────── */
.num{position:relative;display:inline-block;font-family:var(--serif);font-weight:300;
  font-size:74px;line-height:.86;color:var(--fil)}
.num.gd{font-size:62px}
/* le nom du chapitre, posé au bas droit du chiffre */
.num .lab{position:absolute;left:100%;bottom:6px;margin-left:14px;white-space:nowrap;
  font-family:var(--sans);font-weight:400;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--faint)}
body[data-maison="presence"] .num .lab{color:var(--faint)}
h1{margin:26px 0 0;font-weight:500;font-size:38px;line-height:1.22;letter-spacing:-.02em}

/* ── la colonne de lecture ────────────────────────────────────── */
.lecture p{margin:22px 0 0;font-size:17px;line-height:1.8;color:var(--lecture);max-width:62ch}
.lecture h3{margin:44px 0 0;font-weight:500;font-size:19px;letter-spacing:-.01em}
.lecture ul{margin:18px 0 0;padding-left:20px;max-width:62ch}
.lecture li{margin:8px 0;font-size:16.5px;line-height:1.7;color:var(--lecture)}
strong,b{font-weight:600}
em{font-style:italic}

/* la déclaration : la seule chaleur, une fois par chapitre */
.dek{margin:34px 0 0 !important;font-family:var(--serif);font-weight:300;
  font-size:25px !important;line-height:1.5 !important;color:var(--acc) !important;
  border-top:1px solid var(--acc);padding-top:24px;max-width:none !important}

/* la note grise, en fin de propos */
.gris{font-size:15px !important;color:var(--muted) !important;
  border-top:1px solid var(--filet-clair);padding-top:20px;margin-top:34px !important}
/* Quand il suit immédiatement un tableau, ce renvoi n'est pas un bloc de plus :
   c'est la note de ce tableau. Il se colle dessous, sans filet — le filet noir
   de la dernière ligne fait déjà la séparation. */
.tw + .gris{border-top:0;padding-top:0;margin-top:16px !important;font-size:14px !important}

/* ── l'encadré : un filet à gauche, jamais un bloc ────────────── */
.enc{margin:36px 0 0;background:var(--teinte);border-left:3px solid var(--acc);
  padding:22px 26px;max-width:none}
.enc .t{font-size:13px;font-weight:600;margin-bottom:7px;letter-spacing:0;text-transform:none}
.enc p{margin:0 !important;font-size:15.5px !important;line-height:1.7 !important;color:var(--muted) !important}
.enc p + p{margin-top:12px !important}
.enc.interdit{border-left-color:var(--rompu);background:#FBF5F4}
.enc.interdit .t{color:var(--rompu)}
.enc.tenu{border-left-color:var(--tenu);background:#F3F8F5}
.enc.tenu .t{color:var(--tenu)}
.enc.attention{border-left-color:var(--attente);background:#FBF7F0}
.enc.attention .t{color:var(--attente)}

/* ── la figure ────────────────────────────────────────────────── */
.fig{margin:48px 0 0;border-top:1px solid var(--encre);padding-top:20px}
.fig .leg{display:flex;align-items:baseline;gap:20px;margin-bottom:16px}
.fig .leg b{margin-right:auto}
.fig .leg b{font-weight:400;font-size:12.5px;color:var(--faint)}
.fig .leg i{font-style:normal;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--acc)}
.fig svg{width:100%;height:auto;display:block}
.fig .apres{margin-top:14px;font-size:12.5px;color:var(--faint);line-height:1.6}

/* ── le commutateur de langue ─────────────────────────────────────
   Deux lettres, dans le registre des libellés du bandeau. Elles ne doivent
   pas peser plus que le fil d'Ariane qu'elles côtoient : c'est un recours,
   pas une destination. Sur téléphone elles gagnent leur cible tactile. */
/* Les deux langues paraissent ensemble, dans un ordre fixe — français, puis
   anglais —, et celle où l'on est porte l'accent de la maison. On ne montrait
   auparavant que l'autre langue : lisible pour qui voulait changer, muet pour
   qui voulait savoir où il était. La courante n'est pas un lien : on ne va pas
   là où l'on est déjà. */
.lg-c{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase}
.lg-c > .tr{flex:0 0 1px;width:1px;height:9px;background:var(--filet)}
.lg-i{color:var(--acc);padding:4px 2px}
.lg-x{flex:0 0 auto;font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);text-decoration:none;
  padding:4px 2px;transition:color 180ms var(--e)}
.lg-x:hover{color:var(--acc)}
@media (max-width:860px){
  /* Sur téléphone, les deux sigles gardent leur cible tactile en hauteur mais
     resserrent leur largeur : le fil d'Ariane a besoin de chaque pixel, et
     c'est lui qui dit où l'on est. */
  /* Le commutateur ne doit pas se lire dans la suite du fil : « 08 FR | EN »
     se lirait d'un trait. Un peu d'air l'en détache. */
  .lg-c{gap:4px;font-size:11px;margin-left:10px}
  .lg-i,
  .lg-x{display:inline-flex;align-items:center;min-height:44px;padding:0 3px;
    font-size:11px}
}
@media (max-width:420px){
  .lg-c{gap:3px;letter-spacing:.12em}
  .lg-i,.lg-x{padding:0 2px;font-size:10.5px}
}

/* ── la loupe : la figure, en grand ───────────────────────────────
   Les dessins sont composés pour huit cents pixels. Réduits à la
   colonne de lecture — et plus encore à un téléphone — leurs mentions
   deviennent illisibles. La loupe leur rend leur taille. */
.l-plus{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  border:0;background:none;cursor:pointer;padding:4px 0 4px 6px;margin:-4px 0;
  font-family:var(--sans);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);transition:color 180ms var(--e)}
.l-plus:hover{color:var(--acc)}

.loupe{position:fixed;inset:0;z-index:80;background:var(--fond);
  display:flex;flex-direction:column;opacity:0;transition:opacity 220ms var(--e)}
.loupe.vu{opacity:1}
.loupe-tete{flex:0 0 auto;display:flex;align-items:center;gap:24px;min-height:66px;
  padding:14px var(--marge);border-bottom:1px solid var(--encre)}
.loupe-tete .l-leg{font-size:13.5px;line-height:1.5;color:var(--lecture);min-width:0}
.loupe-tete .l-no{margin-left:auto;flex:0 0 auto;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--acc);white-space:nowrap}
.l-x{flex:0 0 auto;border:0;background:none;cursor:pointer;color:var(--faint);
  padding:12px;margin-right:-12px;display:inline-flex;transition:color 180ms var(--e)}
.l-x:hover{color:var(--encre)}
.loupe-corps{flex:1 1 auto;overflow:auto;display:flex;align-items:center;
  justify-content:center;padding:36px var(--marge)}
.l-dessin{margin:auto;flex:0 0 auto}
.l-dessin svg{display:block;width:min(1180px, calc(100vw - 2 * var(--marge)));height:auto}
.loupe-pied{flex:0 0 auto;padding:14px var(--marge);padding-bottom:calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--filet-clair);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint)}

/* dans la loupe le dessin est déjà tracé : on vient le lire, pas le voir naître */
.loupe .tr{stroke-dasharray:none !important;stroke-dashoffset:0 !important;transition:none !important}
.loupe .pt{opacity:1 !important;transform:none !important;transition:none !important}
.loupe .tx{opacity:1 !important;transition:none !important}

@media (max-width:860px){
  /* le dessin garde sa taille native : on le parcourt du doigt plutôt que
     de le réduire jusqu'à l'illisible */
  .loupe-tete{padding:12px 22px;gap:16px;min-height:58px}
  .loupe-tete .l-leg{font-size:12.5px}
  .loupe-corps{padding:22px;justify-content:flex-start}
  .l-dessin svg{width:840px;max-width:none}
  .loupe-pied{padding-left:22px;padding-right:22px}
}

/* ── la planche : troisième élément de mise en page ───────────── */
.planche{margin:52px 0 0;background:var(--papier);border-top:1px solid var(--encre);
  padding:24px 30px 28px}
.planche > .t{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--acc);margin-bottom:18px}
.planche .grille{display:grid;gap:0;border-top:1px solid var(--filet)}
.planche .grille.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.planche .grille.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.planche .grille.n5{grid-template-columns:repeat(5,minmax(0,1fr))}
.planche .c{padding:20px 22px 6px 22px;border-left:1px solid var(--filet)}
.planche .c:first-child{padding-left:0;border-left:0}
.planche .c:last-child{padding-right:0}
.planche .ch{font-family:var(--serif);font-weight:300;font-size:36px;line-height:1}
.planche .ch.fort{color:var(--acc)}
.planche .lg{margin-top:10px;font-size:12.5px;color:var(--gris);line-height:1.5}
.planche .apres{margin:20px 0 0;font-size:13px;color:var(--faint);line-height:1.6;max-width:92ch}
/* entrées en liste */
.planche .liste{margin-top:16px}
.planche .liste .e{display:flex;gap:18px;padding:12px 0;border-top:1px solid var(--filet);
  font-size:14.5px;line-height:1.55}
.planche .liste .e:last-child{border-bottom:1px solid var(--filet)}
.planche .liste .e u{text-decoration:none;font-size:12px;color:var(--clair);width:20px;flex:0 0 20px}
.planche .liste .e u.non{font-family:var(--serif);font-size:16px;color:var(--rompu)}
.planche .vis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.planche .vis > div{padding:0 34px 6px 30px}
.planche .vis > div:first-child{padding-left:0}
/* anthracite adouci : le noir plein coupait la planche en deux */
.planche .vis > div:last-child{padding-right:0;padding-left:34px;border-left:1px solid var(--muted)}
.planche .vis .t{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--acc)}
.planche .vis .t.non{color:var(--rompu)}

/* les cartes du site d'origine deviennent des planches */
.cartes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  margin:36px 0 0;background:var(--papier);border-top:1px solid var(--encre)}
.carte{padding:20px 26px 22px;border-top:1px solid var(--filet);border-left:1px solid var(--filet)}
.carte:nth-child(-n+2){border-top:0}
.carte:nth-child(odd){border-left:0}
.carte .t,.carte > b{display:block;font-family:var(--serif);font-size:19px;font-weight:400;
  line-height:1.3;margin-bottom:8px}
.carte p,.carte > span{display:block;margin:0 !important;font-size:14px !important;
  line-height:1.65 !important;color:var(--gris) !important}

/* Le sous-libellé d'une cellule : la précision qui suit un intitulé, sur la
   ligne d'en dessous. Une seule graisse, une seule taille, une seule encre —
   quatre variantes en style inline traînaient dans le barème. */
.lecture td .sl{display:block;margin-top:3px;font-weight:400;font-size:12.5px;
  line-height:1.45;color:var(--faint)}

/* les tableaux deviennent des planches réglées */
.lecture table{width:100%;border-collapse:collapse;margin:36px 0 0;background:var(--papier)}
.lecture thead th{text-align:left;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);font-weight:400;padding:14px 16px;border-top:1px solid var(--encre);
  border-bottom:1px solid var(--filet)}
.lecture td{padding:14px 16px;font-size:14.5px;line-height:1.6;color:var(--lecture);
  border-bottom:1px solid var(--filet)}
.lecture tbody tr:last-child td{border-bottom:1px solid var(--encre)}

/* la suite des temps (le protocole en n étapes) */
.temps{margin:36px 0 0;border-top:1px solid var(--encre)}
.temps .p{display:grid;grid-template-columns:34px 1fr;gap:18px;padding:16px 0;
  border-bottom:1px solid var(--filet)}
.temps .p > i{font-style:normal;font-family:var(--serif);font-size:17px;line-height:1.4;color:var(--clair)}
.temps .p > div > b{display:block;font-weight:600;font-size:15.5px;margin-bottom:5px}
.temps .p > div > span{display:block;font-size:15.5px;line-height:1.7;color:var(--lecture)}

/* l'index des chapitres, sur les deux accueils */
.index{margin:20px 0 0;border-top:1px solid var(--encre)}
.index .ip{display:grid;grid-template-columns:34px 300px 1fr 22px;gap:24px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--filet);color:inherit}
.index .ip:hover{background:var(--teinte)}
.index .ip u{text-decoration:none;font-size:12px;letter-spacing:.14em;color:var(--clair)}
.index .ip b{font-family:var(--serif);font-weight:400;font-size:21px}
.index .ip span{font-size:14px;color:var(--gris);line-height:1.55}
.index .ip svg{align-self:center;opacity:.45}
@media (max-width:860px){
  .index .ip{grid-template-columns:28px 1fr;gap:14px}
  .index .ip span{grid-column:2}
  .index .ip svg{display:none}
}

/* ── les notes de marge ───────────────────────────────────────── */
.notes .n{font-size:11.5px;line-height:1.65;color:var(--faint);padding:20px 0;
  border-top:1px solid var(--filet-clair)}
.notes .n:first-child{border-top:0;padding-top:0}
.notes .n em{font-style:normal;color:var(--acc)}

/* ── le rail : le sommaire tenu à vue ─────────────────────────── */
.rail .t{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);margin-bottom:18px}
.rail a{display:flex;gap:12px;padding:9px 0;border-top:1px solid var(--filet-clair);color:inherit}
.rail a:last-of-type{border-bottom:1px solid var(--filet-clair)}
.rail a u{text-decoration:none;font-size:10.5px;color:var(--pale);flex:0 0 auto}
.rail a b{font-weight:400;font-size:12.5px;color:var(--faint)}
.rail a:hover b{color:var(--encre)}
.rail a.ici{border-top-color:var(--acc);border-bottom:1px solid var(--acc)}
.rail a.ici u,.rail a.ici b{color:var(--acc)}
.encart{margin-top:34px;border:1px solid var(--fil);background:var(--teinte);padding:16px}
.encart u{text-decoration:none;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
.encart b{display:block;margin-top:10px;font-family:var(--serif);font-size:19px;font-weight:400}
.encart i{display:block;margin-top:8px;font-style:normal;font-size:11.5px;color:var(--faint);line-height:1.55}

/* ── la suite ─────────────────────────────────────────────────── */
.suite{margin:60px 0 0;border-top:1px solid var(--encre);padding-top:22px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.suite a{display:inline-flex;align-items:baseline;gap:16px;font-family:var(--serif);font-size:25px}
.suite span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
/* sur le seuil, le renvoi porte les deux voies : l'intitulé passe au-dessus
   et les deux maisons s'alignent côte à côte, à poids strictement égal */
body[data-maison="seuil"] .suite{justify-content:flex-start;gap:46px}
body[data-maison="seuil"] .suite > span{flex:0 0 100%;margin-bottom:2px}
@media (max-width:640px){
  body[data-maison="seuil"] .suite{gap:16px}
  body[data-maison="seuil"] .suite a{flex:0 0 100%}
}
/* reste du miroir : la maison II lisait son renvoi de droite à gauche.
   On lit dans le même sens dans les deux maisons. */

/* ── le pied : planche à trois colonnes ───────────────────────── */
.pied{background:var(--papier);border-top:1px solid var(--encre);margin-top:0}
.pied .in{max-width:1440px;margin:0 auto;padding:26px var(--marge) 34px}
.pied .grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.pied .c{padding:0 34px}
.pied .c:first-child{padding-left:0}
.pied .c:not(:first-child){border-left:1px solid var(--filet)}
.pied .c:last-child{padding-right:0}
.pied .t{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.pied .t.autre{color:var(--acc)}
.pied .v{margin-top:14px;font-family:var(--serif);font-size:19px}
.pied .d{margin-top:8px;font-size:13px;line-height:1.7;color:var(--gris)}

/* ── formulaires ──────────────────────────────────────────────── */
/* Le filet d'accent à gauche est réservé aux encadrés : ce sont des remarques
   mises en évidence dans le texte. Un formulaire n'est pas une remarque. */
.form{margin:40px 0 0;background:var(--teinte);border-top:1px solid var(--encre);
  padding:28px 30px 32px}
.form label{display:block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--acc);font-weight:600;margin:20px 0 6px}
.form input,.form textarea,.form select{width:100%;font-family:var(--sans);font-size:16px;
  color:var(--encre);background:#fff;border:1px solid var(--fil);border-radius:0;padding:12px 13px}
.form input:focus,.form textarea:focus,.form select:focus{outline:0;border-color:var(--acc)}
.form textarea{resize:vertical;min-height:84px;line-height:1.55}
.form .duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.form .btn{margin-top:26px;width:100%;background:var(--acc2);color:#fff;border:0;
  padding:17px 26px;font-family:var(--sans);font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;cursor:pointer;min-height:52px;transition:background 200ms var(--e)}
.form .btn:hover{background:var(--acc)}
.form .btn[disabled]{opacity:.5;cursor:default}
.form .note{margin-top:16px;font-size:12.5px;color:var(--faint);line-height:1.6}
.form .cadre{display:flex;gap:12px;align-items:flex-start;margin-top:26px;background:#fff;
  border:1px solid var(--fil);padding:16px 18px;
  text-transform:none;letter-spacing:0;font-weight:400;font-size:14px;line-height:1.6;color:var(--lecture)}
.form .cadre input{width:auto;flex:0 0 auto;margin-top:3px;accent-color:var(--acc)}
.merci{margin:40px 0 0;background:#fff;border:1px solid var(--filet-clair);
  border-left:3px solid var(--acc);padding:26px 30px;font-size:15.5px;line-height:1.65}
.merci.rate{border-left-color:var(--rompu)}

/* ── LE MOUVEMENT ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference){
  .mo{opacity:0;transform:translateY(10px);
    transition:opacity var(--d-texte) var(--e),transform var(--d-texte) var(--e);
    transition-delay:var(--d,0ms)}
  .mo.vu{opacity:1;transform:none}
  .tr{stroke-dasharray:var(--L);stroke-dashoffset:var(--L);
    transition:stroke-dashoffset var(--d-trait) var(--e);transition-delay:var(--d,0ms)}
  .vu .tr{stroke-dashoffset:0}
  .pt{opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center;
    transition:opacity 300ms var(--e),transform 300ms var(--e);transition-delay:var(--d,0ms)}
  .vu .pt{opacity:1;transform:none}
  .tx{opacity:0;transition:opacity 420ms var(--e);transition-delay:var(--d,0ms)}
  .vu .tx{opacity:1}
}

/* ── écrans plus étroits ──────────────────────────────────────── */
@media (max-width:1180px){
  :root{--marge:48px}
  .notes{display:none}
  /* le sommaire reste à gauche ; il s'élargit d'une colonne pour que les
     titres de chapitre ne se brisent pas */
  .rail{grid-column:1/span 3}
  .lecture{grid-column:4/span 9}
  .nav{display:none}
}
@media (max-width:860px){
  :root{--marge:22px}
  .maison .in{min-height:56px}
  .plan-p .ph{min-height:57px}
  /* seul le filet de la marque disparaît : celui qui sépare le chemin de la
     maison d'en face reste, c'est lui qui les distingue */
  .marque,.jauge,.g > .sep{display:none}
  .rail{display:none !important}
  .voies .v{font-size:10.5px;letter-spacing:.1em}
  .lecture{grid-column:1/span 12;padding-top:34px}
  .page{padding-bottom:80px}
  .num{font-size:50px}
  .num.gd{font-size:46px}
  .num .lab{font-size:9.5px;letter-spacing:.18em;margin-left:10px;bottom:4px}
  h1{font-size:28px}
  .dek{font-size:20px !important;margin-top:26px !important;padding-top:18px}
  .lecture p{font-size:16px;line-height:1.75}
  .planche{padding:20px 20px 24px;margin-top:40px}
  .planche .grille.n3,.planche .grille.n5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .planche .grille.n2,.planche .vis,.cartes{grid-template-columns:1fr}
  .planche .c{padding:16px 0 6px;border-left:0;border-top:1px solid var(--filet)}
  .planche .c:first-child{border-top:0}
  .planche .vis > div{padding:0 0 6px !important;border-left:0 !important}
  .planche .vis > div:last-child{border-top:1px solid var(--muted);padding-top:22px !important;margin-top:16px}
  .carte{border-left:0 !important;border-top:1px solid var(--filet) !important}
  .carte:first-child{border-top:0 !important}
  .pied .grille{grid-template-columns:1fr}
  .pied .c{padding:20px 0 0 !important;border-left:0 !important;border-top:1px solid var(--filet)}
  .pied .c:first-child{padding-top:0 !important;border-top:0}
  .form{padding:22px 20px 26px}
  .form .duo{grid-template-columns:1fr}
  .lecture table{display:block;overflow-x:auto}
  .suite{flex-direction:column !important;align-items:flex-start}
  .suite a{font-size:21px}
}

/* ── le vocabulaire hérité du premier site, repris dans le système ── */
.lead{font-size:19px !important;line-height:1.7 !important;color:var(--muted) !important;
  max-width:58ch !important;margin-top:30px !important}

.chiffres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:40px 0 0;
  background:var(--papier);border-top:1px solid var(--encre);border-bottom:1px solid var(--filet)}
/* les quatre cellules respirent de la même façon : le premier chiffre ne colle
   pas au filet de gauche, le dernier libellé ne touche pas le bord droit */
.chiffres > div{padding:22px 24px 24px;border-left:1px solid var(--filet)}
.chiffres > div:first-child{border-left:0}
.chiffres .v{font-family:var(--serif);font-weight:300;font-size:32px;line-height:1;color:var(--encre)}
.chiffres .l{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--gris)}

.tw{margin:36px 0 0;overflow-x:auto}
/* un tableau posé dans un encadré ne doit pas coller au paragraphe qui suit */
.enc .tw{margin-top:22px}
.enc .tw + p{margin-top:26px !important}
/* Le filet noir appartient aux tableaux de pleine page. Logé dans un encadré,
   un tableau qui le garde devient l'objet le plus lourd de la page : il prend
   donc l'accent de l'encadré qui l'accueille, à la même épaisseur que le reste
   de la boîte. */
.enc .tw table{background:transparent}
.enc .tw thead th{border-top:1px solid var(--acc);border-bottom-color:var(--fil);
  padding-top:13px;padding-left:0}
.enc .tw td{border-bottom-color:var(--fil);padding-left:0}
.enc .tw tbody tr:last-child td{border-bottom:1px solid var(--acc)}
.enc.attention .tw thead th{border-top-color:var(--attente)}
.enc.attention .tw tbody tr:last-child td{border-bottom-color:var(--attente)}
.enc.tenu .tw thead th{border-top-color:var(--tenu)}
.enc.tenu .tw tbody tr:last-child td{border-bottom-color:var(--tenu)}
.enc.interdit .tw thead th{border-top-color:var(--rompu)}
.enc.interdit .tw tbody tr:last-child td{border-bottom-color:var(--rompu)}
.tw table{margin:0}
.lecture td.f{font-weight:500;color:var(--encre)}
.lecture td.n{font-family:var(--serif);font-size:17px;white-space:nowrap;color:var(--acc)}

.ecoute{display:flex;align-items:center;gap:16px;margin:36px 0 0;background:var(--teinte);
  border-top:1px solid var(--encre);
  padding:20px 24px;color:var(--encre);font-size:15px}
.ecoute:hover{color:var(--acc)}
.ecoute .ic{display:inline-flex;color:var(--acc);flex:0 0 auto;align-self:flex-start;margin-top:2px}
.ecoute > span:not(.ic):not(.fl){display:block;flex:1 1 auto;min-width:0}
.ecoute b{display:block;font-size:15.5px;font-weight:600;line-height:1.4;margin-bottom:4px}
.ecoute .d{display:block;font-size:13.5px;line-height:1.62;color:var(--gris)}
.ecoute .fl{margin-left:auto;color:var(--acc);font-size:18px;flex:0 0 auto;align-self:center}

@media (max-width:860px){
  .chiffres{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Sur deux colonnes, chaque cellule respire des quatre côtés. La version
     précédente mettait le rembourrage horizontal à zéro et ne le rendait qu'à
     la colonne de droite : les chiffres de gauche collaient au bord du bloc,
     et les libellés de droite au bord de la page. */
  .chiffres > div{padding:18px 18px 20px;border-left:0;border-top:1px solid var(--filet)}
  .chiffres > div:nth-child(-n+2){border-top:0}
  .chiffres > div:nth-child(even){border-left:1px solid var(--filet)}
  .lead{font-size:17px !important}
}

/* ── la figure redressée, pour le téléphone ───────────────────── */
.fig .portrait{display:none;margin-top:4px}
.portrait .e{display:grid;grid-template-columns:30px 1fr;gap:14px;padding:14px 0;
  border-top:1px solid var(--filet)}
.portrait .e:last-child{border-bottom:1px solid var(--filet)}
.portrait .e > u{text-decoration:none;font-family:var(--serif);font-size:14px;
  line-height:1.5;color:var(--clair)}
.portrait .e > div > b{display:block;font-size:15.5px;font-weight:600;line-height:1.45}
.portrait .e > div > span{display:block;margin-top:4px;font-size:14.5px;line-height:1.62;color:var(--gris)}
.portrait .e.fort > u,.portrait .e.fort > div > b{color:var(--acc)}
.portrait .e.non > u,.portrait .e.non > div > b{color:var(--rompu)}

/* La liste des chapitres du pied a été retirée le 4 septembre 2026 : elle
   doublait le sommaire du ☰, et posée après « Chapitre suivant » elle faisait
   finir la page deux fois. Sa mise en page part avec elle — une règle qui
   cache un bloc mort est une dette qu'on oublie. */

@media (max-width:720px){
  /* Le dessin reste, réduit. Il ne se lit pas dans le détail à cette taille —
     ce n'est pas ce qu'on lui demande. Il donne la forme, et la forme est ce
     qu'une figure donne d'abord ; le détail est à un toucher, dans la loupe.
     La version redressée suit, pour les mots. */
  /* « > » : sans lui la règle attrape aussi l'icône du bouton Agrandir, qui
     est un svg elle aussi et se retrouverait posée sur une planche */
  .fig > svg{display:block;background:var(--teinte);padding:16px 12px;
    box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  .fig .portrait{display:block;margin-top:18px;border-top:1px solid var(--filet-clair);
    padding-top:4px}
  .fig .leg{margin-bottom:12px;flex-wrap:wrap;row-gap:8px}
  /* le bouton d'agrandissement se détache : sur un téléphone, c'est lui qui
     rend la figure lisible, il ne peut pas être un détail de la légende */
  .fig .leg .l-plus{order:3;margin-left:auto;padding:7px 12px 7px 11px;
    border:1px solid var(--fil);color:var(--acc);min-height:34px}
}

/* ── derniers réglages du téléphone ───────────────────────────── */
@media (max-width:860px){
  /* les titres d'accueil sont dessinés pour 1440 px : on les ramène à l'échelle */
  h1{font-size:28px !important;line-height:1.26 !important;letter-spacing:-.01em !important}
  h1 > span{display:inline}
  .lecture > .num{font-size:50px !important}
  .lecture{grid-column:1/span 12 !important}
  .lecture > p{font-size:16px !important;line-height:1.75 !important}
  .dek{font-size:19.5px !important}
}
@media (max-width:600px){
  /* le bandeau ne tient pas à deux mentions : la maison l'emporte,
     le numéro du chapitre est déjà en très grand sur la page */
  .compte,.jauge{display:none}
  .voie{font-size:10px;letter-spacing:.18em}
  .maison .in{justify-content:flex-start}
  body[data-maison="presence"] .maison .in{justify-content:flex-end}
}

/* les titres d'accueil : une ligne par proposition sur grand écran */
h1 > span{display:block}

@media (max-width:560px){
  .ariane .ch{display:none}
  .ariane{gap:6px}
}
@media (max-width:380px){
  /* Au plus étroit, la maison d'en face s'efface à son tour : le fil ne garde
     que celle où l'on est et le chapitre. C'est le dernier échelon — en
     dessous, il n'y aurait plus de fil du tout. */
  .ariane .ar.autre,
  .ariane .ar.autre + .fl,
  .ariane .ar.autre ~ .ch:first-of-type{display:none}
}
@media (max-width:420px){
  .ariane .ar.seuil,.ariane .ar.seuil + .fl{display:none}
  /* sur le seuil, « Le seuil » est la page courante : il s'efface aussi */
  body[data-maison="seuil"] .ariane > .ar.ici,
  body[data-maison="seuil"] .ariane > .ar.ici + .fl{display:none}
}

/* ── le seuil, sur téléphone : les deux portes s'empilent ─────── */
@media (max-width:860px){
  .seuil-in{padding-top:40px !important}
  .portes{grid-template-columns:1fr !important;margin-top:44px !important}
  .portes > a{padding:24px 22px 26px !important;border-left:0 !important}
  .portes > a + a{border-top:1px solid #16202B}
  .portes > a > div:nth-child(2),.portes > a > div:nth-child(3){max-width:none !important}
}

@media (max-width:860px){
  /* même les notes de bas de formulaire restent lisibles */
  .form .note,.planche .apres,.fig .apres{font-size:13.5px !important;line-height:1.65 !important}
}

/* ════════════════════════════════════════════════════════════════
   LA NAVIGATION — la même à la même place, sur les dix-huit pages
   ════════════════════════════════════════════════════════════════ */
/* Le fil d'Ariane ne cède pas sa largeur : il dit où l'on est, et un « 08 »
   à demi recouvert ne le dit plus. Quand la place manque, ce sont les
   agréments de droite qui reculent — la jauge d'abord, seule compressible —
   et, plus bas, les paliers qui replient les noms longs. */
.maison .in > .g{display:flex;align-items:center;gap:18px;min-width:0}
/* La droite du bandeau peut céder de la largeur — mais elle seule décide où :
   la jauge est compressible, le commutateur et le sommaire ne le sont pas. Sans
   cela, `.d` restait rigide et c'est le fil d'Ariane qui débordait dessous. */
.maison .in > .d{display:flex;align-items:center;gap:22px;flex:0 1 auto;
  min-width:0;margin-left:auto}
.maison .in > .d > .lg-c,
.maison .in > .d > .somm{flex:0 0 auto}
a.marque{color:var(--encre)}
a.marque:hover{color:var(--acc)}

.ariane{display:flex;align-items:center;gap:10px;min-width:0;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.ariane .fl{color:var(--pale);font-size:14px;line-height:1}
.ariane .ar{color:var(--gris);white-space:nowrap;transition:color 180ms var(--e)}
.ariane a.ar:hover{color:var(--encre)}
/* L'accent revient à la maison où l'on se trouve, non au seuil dont on sort :
   la couleur doit dire « vous êtes ici », pas « voici la sortie ». */
.ariane .ar.seuil{color:var(--gris)}
.ariane .ar.mai{color:var(--acc)}
/* la maison où l'on n'est pas : présente, atteignable, en retrait */
.ariane .ar.autre{color:var(--gris)}
.ariane a.ar.autre:hover{color:var(--encre)}
.ariane .ar.ici{color:var(--encre)}

/* ── les deux maisons, toujours visibles ──────────────────────────
   Deux chiffres romains, qui sont le nom même des maisons. Celle où l'on est
   porte l'accent, l'autre attend en gris. C'est le repère permanent — et la
   traversée en un clic — sans transformer le fil d'Ariane en menu. */
.voies{display:flex;align-items:center;flex:0 0 auto;margin-left:4px}
/* même graisse et même chasse que le fil d'Ariane : les deux moitiés du
   bandeau se répondent. Le rembourrage n'ajoute pas un pixel visible, il
   donne de quoi poser le pouce. */
.voies .v{display:inline-block;padding:11px 2px;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gris);
  white-space:nowrap;transition:color 180ms var(--e)}
.voies .v:hover{color:var(--encre)}

/* ── le bandeau posé sur la grille de la page ─────────────────────
   Le petit filet du bandeau et le long filet du sommaire doivent tomber sur
   la même ligne, au pixel : le bandeau reprend donc les douze colonnes de la
   page. La marque occupe les colonnes du sommaire, le filet se pose à leur
   fin — exactement là où passe le filet du sommaire — et le fil d'Ariane
   s'aligne sur la colonne de lecture. */
@media (min-width:861px){
  .maison .in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:24px;align-items:center;position:relative}
  /* la sous-grille reprend les gouttières de la page : sans cela les tracks
     se recalculent et le filet retombe à côté */
  .maison .in > .g{grid-column:1/span 9;display:grid;
    grid-template-columns:subgrid;align-items:center;column-gap:24px}
  /* les trois pièces tiennent sur une seule ligne : la marque et le filet
     partagent la même colonne, le placement automatique les empilerait */
  .maison .in > .g > *{grid-row:1}
  .maison .in > .g > .marque{grid-column:1/span 2}
  .maison .in > .g > .sep{grid-column:2/3;justify-self:end}
  /* Le fil porte les deux maisons : il lui faut la largeur — mais il doit
     laisser sa place à la droite du bandeau, qui est hors du flux et se
     poserait sinon par-dessus. C'est ce qui est arrivé le jour où le
     commutateur a montré deux langues au lieu d'une : « Maison de la
     présence › 08 » est passé sous « FR ».

     La droite reste hors du flux — elle ne doit jamais élargir la grille — et
     le fil réserve sa largeur en marge. Deux valeurs seulement, une par état
     de la droite : avec la jauge, et sans elle. */
  .maison .in > .g > :nth-child(3){grid-column:4/span 9;
    padding-right:var(--reserve-d, 210px)}
  .maison .in > .d{position:absolute;right:var(--marge);top:0;height:100%;
    display:flex;align-items:center;gap:22px}
}
@media (min-width:861px) and (max-width:1180px){
  /* le sommaire prend trois colonnes à cette largeur : le filet le suit */
  .maison .in > .g > .marque{grid-column:1/span 3}
  .maison .in > .g > .sep{grid-column:3/4}
}


.somm{display:inline-flex;align-items:center;gap:10px;background:none;border:0;
  padding:10px 0 10px 14px;font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);cursor:pointer;min-height:44px;
  transition:color 180ms var(--e)}
.somm:hover{color:var(--acc)}
.somm svg{color:var(--acc)}

/* ── le panneau : la carte complète, atteignable de partout ───── */
.plan-fond{position:fixed;inset:0;z-index:190;background:rgba(22,32,43,.34);
  opacity:0;transition:opacity 220ms var(--e)}
.plan-fond.vu{opacity:1}
.plan-fond[hidden],.plan-p[hidden]{display:none !important}
.plan-p{position:fixed;top:0;right:0;bottom:0;z-index:191;width:min(430px,90vw);
  background:var(--papier);border-left:1px solid var(--encre);display:flex;flex-direction:column;
  transform:translateX(16px);opacity:0;transition:transform 260ms var(--e),opacity 200ms var(--e)}
.plan-p.vu{transform:none;opacity:1}
.plan-p .ph{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;min-height:67px;border-bottom:1px solid var(--encre)}
/* le filet du panneau tombe exactement sur celui du bandeau */
.plan-p .ph span{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}
.plan-p .ph .x{width:44px;height:44px;margin-right:-12px;border:0;background:none;color:var(--gris);
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.plan-p .ph .x:hover{color:var(--encre)}
.plan-p .pc{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:0 0 30px}

.plan-p .rac{display:block;padding:18px 22px;border-bottom:1px solid var(--filet);
  font-family:var(--serif);font-size:19px;color:var(--encre)}
.plan-p .rac span{display:block;margin-top:3px;font-family:var(--sans);font-size:12.5px;color:var(--faint)}
.plan-p .rac:hover{background:#fff}
.plan-p .rac.bas{border-bottom:0;border-top:1px solid var(--filet);margin-top:8px;font-size:16px}

.plan-p .bl{padding:6px 0 10px;border-bottom:1px solid var(--filet)}
.plan-p .bl[data-v="occasion"]{--a:#2E4A63;--c:#9DB2C4;--f:#F4F7FA}
.plan-p .bl[data-v="presence"]{--a:#7A6647;--c:#C4B492;--f:#FAF7F1}
.plan-p .mm{display:flex;align-items:baseline;gap:12px;padding:16px 22px 10px}
.plan-p .mm b{font-family:var(--serif);font-weight:300;font-size:20px;color:var(--c)}
.plan-p .mm span{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--a)}
.plan-p .ec{display:flex;align-items:center;gap:11px;width:100%;margin:0 0 6px;
  padding:11px 22px;border:0;border-top:1px solid var(--filet-clair);border-bottom:1px solid var(--filet-clair);
  background:var(--f);font-family:var(--sans);font-size:13px;color:var(--encre);
  cursor:pointer;text-align:left;min-height:48px}
.plan-p .ec:hover{filter:brightness(.98)}
.plan-p .ec .b{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--a);color:#fff;
  display:flex;align-items:center;justify-content:center}
.plan-p .ec i{margin-left:auto;font-style:normal;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)}
.plan-p .bl > a{display:flex;gap:12px;padding:10px 22px;color:var(--gris);font-size:14px;min-height:42px;
  align-items:baseline}
.plan-p .bl > a u{text-decoration:none;font-size:11px;letter-spacing:.12em;color:var(--c);flex:0 0 20px}
.plan-p .bl > a:hover{background:#fff;color:var(--encre)}
.plan-p .bl > a.ici{color:var(--a)}
.plan-p .bl > a.ici u{color:var(--a)}

/* ── l'écoute, dans le bloc de couleur de la maison ───────────── */
.ecoute-b{display:flex;align-items:center;gap:16px;width:100%;max-width:640px;margin:34px 0 0;
  padding:18px 24px;border:1px solid var(--fil);border-left:3px solid var(--acc);
  background:var(--teinte);font-family:var(--sans);color:inherit;text-align:left;
  cursor:pointer;min-height:64px;transition:background 220ms var(--e)}
.ecoute-b:hover{background:#fff}
.ecoute-b .b{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--acc);color:#fff;
  display:flex;align-items:center;justify-content:center;transition:transform 220ms var(--e)}
.ecoute-b:hover .b{transform:scale(1.07)}
.ecoute-b .x{flex:1 1 auto;min-width:0}
.ecoute-b .x b{display:block;font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.3}
.ecoute-b .x span{display:block;margin-top:3px;font-size:13px;color:var(--gris);line-height:1.5}
.ecoute-b .d{flex:0 0 auto;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap}

/* En anglais, « House of the Occasion » et « House of the Presence » sont
   soixante-quatorze pixels plus longs que leurs équivalents français, et
   l'écart ne se referme à aucune largeur : le fil et le bloc de droite
   grandissent du même pas. Le nom long ne s'affiche donc jamais en anglais —
   « Threshold › I · Occasion · II · Presence » se suffit, et se lit mieux. */
html[lang="en"] .ariane .lg{display:none}

@media (max-width:1400px){
  /* le fil porte deux maisons : le nom long ne tient plus dès 1400 */
  .ariane .lg{display:none}
}
/* La jauge de lecture cède la place, à toute largeur.

   Le bandeau est plafonné à 1440 px : sa largeur utile ne dépend donc pas de
   l'écran, et vaut 1240 px partout. Dans ces 1240 px doivent tenir la marque,
   le fil d'Ariane portant les deux maisons, le commutateur — qui montre
   désormais les deux langues — et le sommaire. L'addition ne passe plus.

   Il fallait choisir entre deux choses : les mots « Maison de », qui disent ce
   qu'est chaque moitié, et la jauge, qui dit où l'on en est de sa lecture. La
   première porte du sens, la seconde est un agrément — elle a d'ailleurs
   toujours été décrite comme tel dans cette feuille. C'est donc elle qui s'en
   va, et les noms des maisons restent entiers en français.

   Le fil réserve à sa droite la largeur de ce qui reste : commutateur et
   sommaire. */
:root{--reserve-d:224px}
.jauge{display:none}
@media (max-width:860px){
  /* la marque et son filet s'effacent ; celui qui sépare le chemin de la
     maison d'en face reste — c'est lui qui les distingue */
  a.marque,.maison .in > .g > .sep{display:none}
  .ariane{font-size:10.5px;gap:8px}
  /* Quatre intitulés ne tiennent pas côte à côte sur un téléphone. On retire
     d'abord les chiffres romains — les noms portent le sens à eux seuls —
     puis, sur les écrans les plus étroits, le retour au seuil, qui reste en
     tête du panneau Sommaire, à une touche. */
  .somm{padding-left:0}
  .somm span{display:none}
  .somm{gap:0;width:44px;justify-content:flex-end}
  .plan-p{width:100vw;border-left:0}
  .ecoute-b{padding:14px 16px;gap:12px;margin-top:26px}
  .ecoute-b .x b{font-size:17px}
  .ecoute-b .d{display:none}
}

/* ── le seuil : la porte et son écoute dans le même bloc ──────── */
.bloc{display:flex;flex-direction:column}
.bloc[data-v="occasion"]{background:#F4F7FA;--a:#2E4A63;--fi:#D3E0EA}
.bloc[data-v="presence"]{background:#FAF7F1;--a:#7A6647;--fi:#E4DAC7}
.bloc .porte{background:none !important;flex:1 1 auto}
.bloc .ec{display:flex;align-items:center;gap:14px;width:100%;padding:16px 30px 20px;
  border:0;border-top:1px solid var(--fi);background:none;cursor:pointer;
  font-family:var(--sans);color:inherit;text-align:left;min-height:56px;
  transition:background 220ms var(--e)}
.bloc .ec:hover{background:rgba(255,255,255,.6)}
.bloc .ec .b{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:var(--a);color:#fff;
  display:flex;align-items:center;justify-content:center;transition:transform 220ms var(--e)}
.bloc .ec:hover .b{transform:scale(1.08)}
.bloc .ec .x{flex:1 1 auto;min-width:0}
.bloc .ec .x b{display:block;font-size:13px;font-weight:600}
.bloc .ec .x span{display:block;margin-top:2px;font-size:12.5px;color:var(--gris);line-height:1.45}
.bloc .ec .d{flex:0 0 auto;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap}
@media (max-width:860px){
  .bloc .ec{padding:14px 22px 18px}
  .bloc .ec .d{display:none}
}

/* ════════════════════════════════════════════════════════════════
   LE TÉLÉPHONE — audit du 3 septembre 2026
   Rien ici ne s'applique au-dessus de 860 px : le desktop ne bouge pas.
   ════════════════════════════════════════════════════════════════ */

/* ── les tableaux deviennent des fiches ───────────────────────────
   Un tableau à trois colonnes ne rentre pas dans un téléphone. Il y
   défilait latéralement, ce qui coupait la troisième colonne — le
   barème était illisible. On le déplie : chaque ligne devient une
   fiche, chaque cellule porte son intitulé, repris de data-l.        */
@media (max-width:640px){
  .tw{overflow-x:visible;margin-top:30px}
  .lecture table{display:block;overflow-x:visible;width:100%;background:transparent;margin:0}
  .lecture thead{display:none}
  .lecture tbody{display:block}
  .lecture tbody tr{display:block;background:var(--papier);
    padding:18px 18px 20px;border-top:1px solid var(--filet)}
  .lecture tbody tr:first-child{border-top:1px solid var(--encre)}
  .lecture tbody tr:last-child{border-bottom:1px solid var(--encre)}
  .lecture tbody td{display:block;padding:0;border:0;font-size:15.5px;line-height:1.7;
    color:var(--lecture)}
  .lecture tbody td:empty{display:none}
  .lecture tbody tr:last-child td{border-bottom:0}
  .lecture tbody td + td{margin-top:12px}

  /* l'intitulé de colonne, repris en surtitre — sauf sur la première
     cellule, qui est le titre de la fiche et se suffit à elle-même */
  /* l'étiquette reprend exactement la spécification de l'en-tête de colonne
     qu'elle remplace : 10,5 px, .18em, capitales, gris de retrait */
  .lecture tbody td[data-l]::before{content:attr(data-l);display:block;
    font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--faint);margin-bottom:5px}
  .lecture tbody tr > td:first-child::before{display:none}
  /* dans un tableau à deux colonnes, l'intitulé de la seconde répète
     le titre de la section : on ne le redit pas */
  .lecture tbody tr > td:nth-child(2):last-child::before{display:none}

  /* le titre de fiche suit la même graduation qu'un temps de protocole :
     15,5 px en 600, et son texte en 15,5 régulier */
  .lecture tbody td.f{font-size:15.5px;font-weight:600;color:var(--encre);line-height:1.45}
  /* un montant tient sur une ligne avec son intitulé */
  .lecture tbody td.n{display:flex;align-items:baseline;gap:12px;font-size:19px}
  .lecture tbody td.n::before{margin-bottom:0;flex:0 0 auto;position:relative;bottom:1px;
    min-width:112px}
  .lecture tbody tr > td.n:first-child{display:block}

  /* Dans un encadré, le filet d'accent appartient à la fiche, jamais à chacune
     de ses cellules. Déplié en fiches, un tableau logé dans un encadré traçait
     un trait d'accent sous le titre de la fiche, puis un second sous son texte :
     deux lignes ambre au milieu d'un bloc, qui ne disaient rien. Le filet
     revient là où il a un sens — en tête et en pied de la fiche. */
  .enc .tw tbody td,
  .enc .tw tbody tr:last-child td{border-bottom:0}
  .enc .tw tbody tr{border-top-color:var(--fil)}
  .enc .tw tbody tr:first-child{border-top:1px solid var(--acc)}
  .enc .tw tbody tr:last-child{border-bottom:1px solid var(--acc)}
  .enc.attention .tw tbody tr:first-child{border-top-color:var(--attente)}
  .enc.attention .tw tbody tr:last-child{border-bottom-color:var(--attente)}
  .enc.tenu .tw tbody tr:first-child{border-top-color:var(--tenu)}
  .enc.tenu .tw tbody tr:last-child{border-bottom-color:var(--tenu)}
  .enc.interdit .tw tbody tr:first-child{border-top-color:var(--rompu)}
  .enc.interdit .tw tbody tr:last-child{border-bottom-color:var(--rompu)}
}

/* ── les cibles tactiles ──────────────────────────────────────────
   Un lien de douze pixels de haut ne se touche pas avec un pouce.
   On garde le même dessin, on élargit seulement la zone sensible.   */
@media (max-width:860px){
  .ariane .ar{padding:13px 0}
  a.marque{padding:12px 0}
  .suite a{padding:9px 0 11px}
  .pied .v a{display:inline-block;padding:7px 0}
  .form .cadre input[type="checkbox"]{width:20px;height:20px;margin-top:1px}
  .plan a{min-height:48px}
  /* l'encart d'écoute : la flèche passe sous le texte plutôt que de
     l'écraser contre le bord */
  .ecoute{flex-wrap:wrap;padding:18px 18px 20px;gap:12px}
  .ecoute .fl{margin-left:0;align-self:flex-start}
  .ecoute > span:not(.ic):not(.fl){flex:1 1 220px}
}

/* ── le confort de lecture des encadrés ──────────────────────────── */
@media (max-width:600px){
  .enc{padding:18px 18px 20px}
  .enc .t{line-height:1.45}
  .lecture h3{line-height:1.3}
}