/* =====================================================================
   LES POLICES, HEBERGEES ICI DEPUIS LE 11/08
   ---------------------------------------------------------------------
   Elles venaient de Google Fonts. Mesure faite ce jour-la : l'API css2
   sert des fichiers de POLICE VARIABLE aux Chrome recents, et ceux de
   Jost v20 comme de Cormorant Garamond v21 repondent 404. Sur Chrome 141
   la feuille cite des fichiers statiques, tous a 200 ; sur Chrome 151 elle
   en cite d'autres, tous a 404. Les polices ne se chargeaient donc plus du
   tout sur un navigateur a jour, et la page tombait sur son repli sans que
   rien ne le dise, sauf la console.

   Les heberger repond a trois choses a la fois :
   - la page ne depend plus d'un tiers qui peut changer d'avis ;
   - elle garde ses polices ouverte en file://, ce que le client fait a
     chaque relecture ;
   - la politique de securite de contenu se resserre, plus aucun domaine
     exterieur n'y est autorise.

   Les deux familles sont sous licence SIL Open Font, qui autorise
   explicitement l'hebergement. Fichiers pris sur fonts.gstatic.com, sous
   ensembles latin et latin-ext seulement : le site est en francais et en
   anglais, le cyrillique et le vietnamien ne servaient a personne.

   CE SONT DES POLICES VARIABLES : un seul fichier par famille et par
   style, et la graisse se declare en INTERVALLE. Declarer deux fois le
   meme fichier a 300 puis a 400 ferait rendre les deux a la graisse par
   defaut, et l'ecart entre le titrage et le courant disparaitrait.
   ===================================================================== */
@font-face {
  font-family:'Cormorant Garamond';
  font-style:italic;
  font-weight:300 400;
  font-display:swap;
  src:url('fonts/cormorant-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Cormorant Garamond';
  font-style:italic;
  font-weight:300 400;
  font-display:swap;
  src:url('fonts/cormorant-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:300 400;
  font-display:swap;
  src:url('fonts/cormorant-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:300 400;
  font-display:swap;
  src:url('fonts/cormorant-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Jost';
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
  src:url('fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Jost';
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
  src:url('fonts/jost-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   VILLA VASCO DE GAMA
   Un livre d'architecture, pas une fiche immobiliere.

   PALETTE, TROISIEME REGLAGE, 30/07 : « le blanc casse est trop jaunatre ».
   Le fond n'etait plus le principal coupable ; l'ACCENT l'etait. Mesure de
   l'ecart entre le rouge et le bleu, qui est ce que l'oeil lit comme du
   jaune :
       fond   #F6F2EA  +12   ->  #F5F4F1  +4   ->  #F3F3F2  +1
       accent #7E5D24  +90   ->  #756143  +50  ->  #55585C  -7
   L'or a donc quitte l'interface. Il ne subsiste que la ou il est la marque
   et non la decoration : le logo, la ligne de vente du hero et la selection,
   toutes sur fond sombre, ou il se lit comme de l'or et non comme du jaune.
   Filets, chiffres de chapitre, pastilles du plan et anneau de focus passent
   au graphite.

   C'est aussi ce qui rapproche la page des references retenues, Archidomo et
   Vipp : un papier neutre, un quasi-noir, et la couleur laissee aux seules
   photographies.

   Contrastes verifies sur papier #F3F3F2 :
     texte courant #17181A   16,0:1
     corps         #2A2C2F   12,6:1
     texte attenue #66696C    5,0:1
     graphite      #55585C    6,4:1   <- anneau de focus
   ============================================================ */

:root{
  --creme:#F3F3F2;            /* papier neutre : le nom reste par habitude */
  --creme-2:#ECECEA;          /* aplats tres legers : formulaires, cartouche */
  --creme-3:#E1E1DE;          /* fonds d'attente */
  --encre:#17181A;
  --encre-2:#66696C;          /* texte attenue, libelles */
  --texte:#2A2C2F;            /* corps de texte */
  --accent:#55585C;           /* graphite : filets, chiffres, pastilles, focus */
  --or-clair:#C9A46A;         /* l'or du logo, sur fonds sombres UNIQUEMENT */
  /* OR ECLAIRCI LE 15/08, « accentuer la luminosite des elements ecrits ».
     De #E8D4B0 a #F2E2C4 : la mention de vente, le mot du monogramme et la
     ligne du film sont les trois seuls elements du hero a etre en or, et
     c'est sur eux que portait la remarque. Le contraste sur le battant
     passe de 7,8:1 a 9,4:1, mesure par outils-verif/contraste.py. */
  --or-doux:#F2E2C4;
  --nuit:#0B0B0B;             /* voile du hero, visionneuse */

  --filet:rgba(23,24,26,.12);
  --filet-accent:rgba(85,88,92,.28);

  --ff-display:'Cormorant Garamond','Palatino Linotype',Georgia,serif;
  --ff-sans:'Jost','Helvetica Neue',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;

  --maxw:1180px;
  --maxw-wide:1560px;
  --measure:62ch;             /* 60 a 70 signes, mesure de lecture */
  --ease:cubic-bezier(.22,.61,.36,1);
  --hdr-h:58px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* Toute ancre doit atterrir SOUS les barres fixes. Sans cela le titre vise se
   retrouve derriere elles : mesure le 03/08 sur la page dossier, le titre
   « Specifications » arrivait a 46 px du haut quand le bas des barres est a
   111, soit 65 px masques. Le lien d'evitement, dont c'est la seule raison
   d'etre, deposait le focus sous un en-tete opaque.
   La valeur vaut pour les deux pages : la landing n'a que l'en-tete, le
   dossier y ajoute sa barre d'ancres, et viser la plus haute des deux ne
   coute qu'un peu de blanc sur l'autre. */
html{scroll-padding-top:calc(var(--hdr-h) + 64px);}
body{
  margin:0; background:var(--creme); color:var(--encre);
  font-family:var(--ff-sans); font-weight:400; font-size:17px; line-height:1.75;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* clip et non hidden : hidden creerait un conteneur de defilement qui
     casserait le position:sticky du hero */
  overflow-x:clip;
}
/* height:auto est indispensable : les attributs width et height du HTML,
   poses pour eviter les sauts de mise en page, sont des indications de
   presentation qui fixent la hauteur en pixels et neutraliseraient tous les
   aspect-ratio declares plus bas. */
img{max-width:100%; display:block; height:auto;}
picture{display:block;}
a{color:inherit;}
h1,h2,h3,h4{margin:0; font-family:var(--ff-display); font-weight:300; line-height:1.14; text-wrap:balance;}
p{margin:0;}
figure{margin:0;}
ul{margin:0; padding:0; list-style:none;}
button{font:inherit; color:inherit;}
::selection{background:var(--or-clair); color:var(--nuit);}

:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
.hero :focus-visible,.vsn :focus-visible{outline-color:var(--or-clair);}

/* --- lien d'evitement --- */
.skip{
  position:absolute; left:16px; top:-100px; z-index:200;
  background:var(--encre); color:var(--creme); text-decoration:none;
  padding:14px 22px; border:1px solid var(--or-clair);
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  transition:top .2s var(--ease);
}
.skip:focus{top:16px;}

/* --- conteneurs --- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,64px);}
.wrap-wide{max-width:var(--maxw-wide); margin-inline:auto; padding-inline:clamp(20px,5vw,64px);}

/* --- libelles --- */
.label{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  font-weight:500; color:var(--encre-2);
}
.label-gold{color:var(--accent);}

/* ============================================================
   EN-TETE
   Pas de menu : un one pager se lit, il ne se navigue pas.
   L'en-tete n'apparait qu'une fois le hero passe.
   ============================================================ */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:90; height:var(--hdr-h);
  background:rgba(243,243,242,.94);
  -webkit-backdrop-filter:saturate(140%) blur(10px); backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--filet);
  transform:translateY(-100%); opacity:0;
  transition:transform .45s var(--ease), opacity .45s var(--ease);
}
.hdr.shown{transform:none; opacity:1;}
.hdr-in{height:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none;}
.brand img{width:26px; height:26px;}
.brand span{font-family:var(--ff-display); font-size:19px; letter-spacing:.02em;}
.hdr-right{display:flex; align-items:center; gap:clamp(12px,2.4vw,26px);}
/* Page dossier : le nom, un filet vertical, puis la mention de la page. */
.hdr-gauche{display:flex; align-items:center; gap:14px; min-width:0;}
.hdr-page{color:var(--encre-2); white-space:nowrap;}
@media (max-width:600px){ .hdr-gauche .hdr-page{display:none;} }

.lang{display:flex; align-items:center; gap:8px;}
.lang button{
  background:none; border:0; padding:4px 2px; cursor:pointer;
  font-size:11px; letter-spacing:.18em; color:var(--encre-2);
  transition:color .2s var(--ease);
}
.lang button[aria-pressed="true"]{color:var(--encre);}
.lang button:hover{color:var(--encre);}
.lang i{display:block; width:1px; height:11px; background:var(--filet);}

.btn-hdr{
  text-decoration:none; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  padding:11px 20px; border:1px solid var(--filet-accent); color:var(--accent);
  transition:background .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.btn-hdr:hover{background:var(--accent); color:var(--creme);}
@media (max-width:600px){ .btn-hdr{display:none;} }

/* ------------------------------------------------------------------
   LE FILM DANS L'EN-TETE, le 28/08, demande de Thomas.

   Le film ne s'ouvrait que depuis le hero : passe le premier ecran, il
   n'etait plus atteignable de nulle part, sur une page qui en compte
   vingt-cinq. Il reparait ici, a gauche du bouton dore.

   IL N'EN PREND PAS LE POIDS. Recevoir le dossier prive reste la seule
   action de la page ; le film est une invitation, pas une conversion. D'ou
   un lien nu, sans cadre, dans le gris de lecture, contre un bouton borde
   dans l'or de l'accent. La metrique, elle, est la meme que .btn-hdr : onze
   pixels et le meme interlettrage, sans quoi les deux libelles ne
   tiendraient pas sur une ligne commune.

   Les libelles sont ceux du hero, hero.film.voir et hero.film.attente : le
   meme film ne s'annonce pas de deux facons, et il n'y a pas de cle de
   plus a traduire.

   IL DISPARAIT PLUS TOT QUE LE BOUTON DORE, a 900 px et non a 600 : deux
   actions et le selecteur de langue ne tiennent pas dans une barre etroite,
   et c'est le film qui cede, pas le dossier. */
.hdr-film,.hdr-film-bouton{
  display:flex; align-items:center; gap:9px;
  background:none; border:0; padding:0; margin:0;
  font:inherit; color:var(--encre-2); text-decoration:none;
  white-space:nowrap;
  transition:color .25s var(--ease);
}
.hdr-film-bouton{cursor:pointer;}
.hdr-film-mot{color:inherit;}
.hdr-film-marque{
  display:inline-flex; align-items:center; justify-content:center;
  width:19px; height:19px; border-radius:50%;
  border:1px solid currentColor;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.hdr-film-marque svg{width:7px; fill:currentColor; margin-left:1px;}
.hdr-film-bouton:hover{color:var(--accent);}
.hdr-film-bouton:hover .hdr-film-marque{background:var(--accent); color:var(--creme);}
/* Sans JavaScript, l'emplacement reste mais ne promet rien : il s'efface
   comme celui du hero, meme regle, memes valeurs. */
.hdr-film:not(:has(.hdr-film-bouton)) .hdr-film-marque{opacity:.62;}
.hdr-film:not(:has(.hdr-film-bouton)) .hdr-film-mot{opacity:.75;}
@media (max-width:900px){ .hdr-film{display:none;} }

/* ============================================================
   HERO
   UN SEUL ÉCRAN, et rien qui s'efface.

   LE FONDU EST RETIRÉ, le 28/08, à la demande de Philippe : « que le texte
   ne disparaisse plus en fondu ». Le titre, la mention de vente et l'appel
   du film restent lisibles tant que la page n'a pas bougé, puis le chapitre
   premier vient les remplacer, simplement.

   CE QUI DISPARAÎT AVEC LUI : les 45svh de piste de défilement, qui étaient
   la DURÉE du fondu et rien d'autre. Sans fondu à cadencer, elles ne
   faisaient plus qu'un demi-écran immobile entre l'affiche et le premier
   chapitre. La section retombe donc à la hauteur de sa scène, et le
   position:sticky n'a plus rien à tenir.

   IL N'Y A PLUS DE RÉGIME PARTICULIER SOUS MOUVEMENT RÉDUIT : le hero était
   déjà ramené à 100svh dans ce cas, c'est maintenant le seul état.

   Seule l'invite de défilement s'efface encore, sur les cent vingt premiers
   pixels : elle a dit ce qu'elle avait à dire. Voir .hero-scroll.
   ============================================================ */
.hero{height:100svh; min-height:560px;}
.hero-stage{
  position:relative; height:100%; min-height:560px;
  overflow:hidden; background:var(--nuit);
}
.hero-media{position:absolute; inset:0;}
/* L'affiche est une figure ordinaire, produite par outils-build/figures.mjs
   comme les autres : c'est son conteneur qui la fait remplir l'ecran.

   PIEGE, trouve le 03/08 par l'audit : outils-build/figures.mjs pose le ratio
   natif en STYLE EN LIGNE sur chaque figure, et pour une boite absolue un
   aspect-ratio l'emporte sur inset:0. L'affiche prenait donc la hauteur
   deduite de sa largeur au lieu de celle de la scene. Invisible en 1440x900,
   ou 1440/1,5 = 960 depasse la fenetre ; DESASTREUX des que l'ecran est plus
   haut que large : 390x844 donnait une figure de 390x260, surmontant 584 px
   d'aplat noir. Le premier ecran de la landing, sur le terminal ou arrive le
   plus de monde.
   Le !important est ici necessaire et suffisant : il ne bat que le style en
   ligne d'un generateur, pas une decision de mise en forme. */
.hero-media figure,.hero-media picture{
  position:absolute; inset:0; height:100%; aspect-ratio:auto !important;
}
/* LE ZOOM DE L'AFFICHE, 11/08. « Si necessaire, zoomer legerement la
   photographie pour agrandir visuellement la porte », Philippe. C'etait
   necessaire : voir la mesure au-dessus de .hero-col.

   Les trois valeurs sont ici et nulle part ailleurs. Le decalage
   horizontal recentre l'ouverture ; le decalage vertical remonte le
   linteau, pour que la colonne de texte tienne SOUS lui et non par-dessus.

   L'AFFICHE A CHANGE LE 13/08 : Photo0, la « page 0 » de Philippe. Le meme
   mur d'entree, mais porte fermee, sans ciel et SANS LA VOITURE garee en
   bas a droite, qui etait ouverte depuis le 29/07 et que le zoom ne faisait
   que sortir du cadre. Le battant de teck sombre est en outre un bien
   meilleur fond pour du texte creme que l'ouverture qu'il remplace.

   LES TROIS VALEURS ONT ETE REMESUREES SUR ELLE, pas reprises. Le battant
   occupe de 37,5 a 58,6 % de la largeur du fichier, contre 38 a 61 % pour
   la vue precedente : il est un peu plus etroit, et surtout son axe tombe a
   48,05 % et non a 49,5. D'ou un decalage horizontal quatre fois plus grand
   qu'avant, et exprime en POURCENTAGE et non en pixels : 0,0195 de largeur
   d'image multiplie par le zoom, soit 3,6 %, ce qui suit la fenetre au lieu
   de n'etre juste qu'a 1440.

   Sous 1000 px, aucun zoom : la photographie y est deja rognee sur les
   cotes par le cadrage en cover, la porte occupe alors les trois quarts de
   l'ecran, et zoomer davantage ferait perdre les jambages. */
/* DEZOOM DU 15/08 : « dezoomer si possible la photographie ». Le zoom passe
   de 1,85 a 1,55, et les deux decalages le suivent, car ni l'un ni l'autre
   n'est une valeur libre :

     dx recentre l'axe du battant, qui tombe a 48,05 % du fichier, soit
        1,95 % a gauche du centre. Il vaut donc 1,95 % x zoom : 3,02 % ici,
        contre 3,6 a 1,85. Le laisser a 3,6 poussait la porte a droite de
        dix-huit pixels.
     dy remonte le linteau. Le meme raisonnement le donne : c'est un point
        de l'image a 80 px du centre, et il se deplace comme le zoom, donc
        -80 x 1,55 = -124 px, contre -148 a 1,85.

   LA COLONNE DE TEXTE SUIT TOUTE SEULE : --porte est calculee sur le zoom,
   elle passe de 493 a 413 px sur un ecran de 1440 et le texte reste dans les
   jambages. C'est tout l'interet de l'avoir ecrite en calcul et non en
   pourcentage fixe.

   Sous 1000 px, toujours aucun zoom : la photographie y est deja rognee sur
   les cotes par le cadrage en cover. */
:root{ --hero-zoom:1; --hero-dx:0px; --hero-dy:0px; }
@media (min-width:1000px){
  :root{ --hero-zoom:1.55; --hero-dx:3.02%; --hero-dy:-124px; }
}
.hero-media img{
  width:100%; height:100%; object-fit:cover;
  transform:translate(var(--hero-dx), var(--hero-dy)) scale(var(--hero-zoom));
  transform-origin:center;
}

/* LE VOILE EN DEUX COUCHES, le 28/08. « Que la premiere image soit moins
   sombre », Philippe. L'aplat uniforme qui tenait cette place assombrissait
   toute la photographie pour ne servir qu'une colonne de texte large de
   quatre cents pixels : de 0,52 en haut a 0,62 ensuite, mesures au pixel le
   29/07 pour tenir du creme au-dessus de 4,5:1.

   L'alleger tel quel aurait fait tomber le texte sous le seuil. Il se separe
   donc en deux :

     un HALO elliptique, centre sur la colonne de la porte, qui porte
       l'essentiel de l'ombre la ou il y a du texte a lire ;
     un VOILE general tres leger, qui unifie l'image et retient les hautes
       lumieres du haut du cadre. Il se ferme sur le dernier cinquieme, ou
       le sol est clair et ou tombe l'invite de defilement : hors du halo,
       elle n'avait plus que 4,81:1, mesure du 28/08.

   La pierre, le ciel et les jambages s'eclaircissent nettement ; le battant
   de teck, deja sombre, garde ce qu'il faut sous le titre. Les valeurs ne se
   reglent PAS a vue : outils-verif/verifier.mjs mesure le contraste des cinq
   libelles sur les pixels reellement rendus, et c'est lui qui arbitre.

   Le voile ne s'efface plus au defilement : il n'y a plus de fondu. */
.hero-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 62% 58% at 50% 48%,
      rgba(11,11,11,.44) 0%, rgba(11,11,11,.29) 46%, rgba(11,11,11,0) 82%),
    linear-gradient(180deg,
      rgba(11,11,11,.14) 0%, rgba(11,11,11,.18) 46%,
      rgba(11,11,11,.22) 78%, rgba(11,11,11,.36) 100%);
}
/* Le bloc est centre dans l'ecran, pas cale en bas : cale en bas, le logo,
   le titre et les deux lignes de mention finissaient par toucher l'invite
   de defilement des que la fenetre descendait sous 900 px. */
.hero-in{
  position:absolute; inset:0; z-index:2;
  padding:calc(var(--hdr-h) + 24px) clamp(20px,6vw,72px) clamp(96px,12vh,132px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:var(--creme);
}

/* ------------------------------------------------------------------
   LA COLONNE DE LA PORTE

   Mesure faite le 11/08 sur assets/photos/rdc-entree-1 : l'ouverture de la
   porte occupe de 38 a 61 % de la largeur de la photographie, soit 23 %.
   Cadree en object-fit cover sur un ecran plus large que 3:2, la
   photographie n'est PAS rognee horizontalement : ces 23 % sont donc aussi
   23 % de la largeur de l'ecran, 331 px sur 1440. Un bloc de texte n'y
   tient pas.

   D'ou le zoom, que Philippe envisageait « si necessaire » et qui ne l'est
   pas moins : a 1,5x la porte fait 497 px et la colonne s'y loge avec
   25 px de jeu de chaque cote. Effet de bord heureux, la voiture garee en
   bas a droite, signalee le 31/07 et impossible a rogner sans casser la
   symetrie, sort du cadre.

   --porte est plafonnee a 460 px : au-dela, la porte grandit encore mais
   une ligne de plus de soixante signes cesse de se lire.
   ------------------------------------------------------------------ */
.hero-col{
  /* LA LARGEUR DE LA PORTE, CALCULEE ET NON DEVINEE.
     En object-fit cover, la photographie est mise a l'echelle par
     max(W/2400, H/1600) : sa largeur affichee vaut donc max(100vw, 150vh).
     L'ouverture en occupe 23 %, le zoom la multiplie, et l'on garde un peu
     moins pour poser le texte a l'interieur des jambages.
     C'est ce calcul, et non un pourcentage fixe, qui fait tenir la colonne
     dans la porte aussi bien sur un ecran large que sur un telephone, ou la
     photographie est rognee sur les cotes et ou l'ouverture occupe alors
     les trois quarts de l'ecran.

     Le coefficient est passe de .2 a .185 le 13/08, avec l'affiche Photo0 :
     son battant occupe 21,1 % de la largeur au lieu des 23 % de
     l'ouverture precedente. Le rapport, lui, ne bouge pas : la colonne
     prend 88 % de la porte dans les deux cas, ce qui laisse les jambages
     visibles de part et d'autre du texte. */
  --porte:min(520px, calc(.185 * var(--hero-zoom) * max(100vw, 150vh)));
  width:var(--porte);
  display:flex; flex-direction:column; align-items:center;
}
.hero-marque{display:flex; flex-direction:column; align-items:center; gap:clamp(10px,1.4vh,16px);}
.hero-logo{width:clamp(110px,12vw,168px); height:auto;}

/* LE MONOGRAMME EST DECALE DE 5 % VERS LA GAUCHE, et c'est une correction
   optique, pas une correction de mise en page : sa boite EST centree.

   Le fichier est detoure au plus juste, l'encre touche les quatre bords.
   Mais la queue du V part loin a gauche en un trait tres fin, tandis que le
   D et le G massent l'encre a droite : le centre de masse du dessin tombe a
   81 px du centre de la boite, soit 12,1 % de sa largeur. L'oeil compare
   des masses, pas des boites, et voyait donc le monogramme pousse a droite
   au-dessus de « VILLA VASCO DE GAMA ». Philippe l'a releve le 14/08.

   LES 5 % SONT MESURES, PAS ESTIMES. On rend la page a plusieurs decalages,
   on calcule le barycentre horizontal de l'encre du monogramme et celui du
   mot sur la capture, et on garde celui qui les superpose : 0 %, +7,8 px
   d'ecart ; -3 %, +3,3 ; -5 %, +0,1 ; -7 %, -3,5 ; -9 %, -6,2. C'est bien
   moins que les 12,1 % du fichier, parce que le mot a lui aussi son propre
   barycentre, decale par l'interlettrage.

   En transform et non en marge : la marge changerait la largeur du bloc, et
   donc le centrage du mot avec elle. Le hero n'anime pas cette image, sa
   sequence d'ouverture porte sur .hero-in > *, donc sur la colonne entiere :
   rien n'ecrase ce transform.

   LE PIED DE PAGE PREND LA MEME VALEUR, sans etre regle a part. Son mot est
   compose autrement, « Villa Vasco de Gama » en Cormorant bas de casse et
   non en petites capitales interlettrees : son barycentre n'est donc pas au
   meme endroit, et il reste 8 px d'ecart contre 13 avant. Deux valeurs
   differentes pour le meme dessin seraient un reglage de trop. */
.hero-logo, .foot .mark{transform:translateX(-5%);}
/* Le mot, compose et non grave dans l'image. Le filet qui le souligne
   reprend celui du lettrage d'origine. */
.hero-mot{
  font-family:var(--ff-ui); font-size:clamp(10px,1vw,13px);
  letter-spacing:.34em; text-transform:uppercase; text-indent:.34em;
  color:var(--or-doux); padding-bottom:clamp(8px,1.2vh,12px);
  border-bottom:1px solid rgba(242,226,196,.6);
  /* LES TROIS DECLARATIONS QUI SUIVENT NE CHANGENT RIEN, ET C'EST TOUT
     LEUR OBJET. Depuis le 08/09 ce mot est le h1 de la landing : la regle
     globale h1,h2,h3,h4 lui apporte font-weight:300, line-height:1.14 et
     text-wrap:balance, qu'un span heritait autrement du body. Sans ces
     trois lignes, le nom du bien maigrissait et sa hauteur de ligne
     passait de 17,5 a 11,4 px, ce qui remontait le filet et, avec lui,
     tout le bloc de texte du hero.
     LES VALEURS SONT MESUREES SUR LA PAGE AVANT L'ECHANGE, et non
     recopiees du body au jugé : font-weight 400, line-height 1.75, soit
     17,5 px pour une police de 10, et text-wrap wrap.
     margin n'y figure pas : la regle globale la met a 0, ce qu'un span
     valait deja, et .hero-marque est une boite flexible ou aucune marge
     ne se declare.

     CE MOT RESTE UN span DANS dossier-prive.html, et c'est voulu : cette
     page-la a deja son propre h1, « Dossier de visite virtuelle », pose a
     l'audit du 03/08. Les trois declarations ci-dessus ne font que
     reproduire ce qu'il heritait : elles ne le changent pas non plus. */
  font-weight:400; line-height:1.75; text-wrap:wrap;
}
/* LE MANIFESTE, JUSTIFIE. « Rechercher un texte justifie et aussi
   rectangulaire/equilibre que possible », Philippe le 11/08.
   text-align-last:center rattrape la derniere ligne, qu'une justification
   laisserait courte et collee a gauche : le bloc redevient un rectangle
   pose sur un axe. */
/* LA CESURE SE RESSERRE AVEC LE DEZOOM DU 15/08. La colonne suit la porte :
   elle passe de 493 a 413 px, et la borne 5 2 2 y coupait « d'har-monie »,
   trois lettres avant la coupe sur un mot de huit. C'etait lisible a 33
   signes par ligne, c'est une faute d'oeil a 28. La borne passe donc a
   7 6 3 : les mots de moins de sept lettres ne se coupent plus du tout, et
   les autres gardent au moins six lettres devant. SIX ET NON QUATRE parce
   que l'elision compte : le moteur de cesure lit « d'harmonie » comme un
   mot de dix lettres, si bien que « d'har » lui en faisait deja cinq et que
   la coupe restait permise. A six, elle tombe sur « d'harmo-nie », qui est
   la bonne. La justification
   reprend le blanc que la cesure ne prend plus, ce qui est le bon partage
   sur une mesure courte. */
.hero-in .hero-manifeste{
  margin-top:clamp(22px,3.4vh,38px);
  /* DEUX DECLARATIONS REPRISES DE h1,h2,h3,h4, le 08/09. Ce bloc etait le
     h1 de la page ; il est devenu un <p> et le nom du bien a pris sa place.
     La regle qui suit fixait deja la graisse et l'interlignage, mais la
     famille et l'equilibre des lignes venaient de la regle globale des
     titres : sans elles, le manifeste repassait en Jost et ses lignes se
     repartissaient autrement. Mesurees sur la page avant l'echange. */
  font-family:var(--ff-display); text-wrap:balance;
  font-size:clamp(17px,1.65vw,24px); line-height:1.52; font-weight:300;
  letter-spacing:.005em; width:100%;
  text-align:justify; text-align-last:center; hyphens:auto; hyphenate-limit-chars:7 6 3;
}
/* PLUS DE LUMIERE SUR LES ELEMENTS ECRITS, 15/08 : « accentuer la luminosite
   des elements ecrits pour rendre l'ecriture plus visible ». Ces deux
   mentions etaient les seules du hero a etre posees en creme transparent,
   a 90 % et a 85 % : elles sont desormais pleines. Le voile qui les porte
   ne bouge pas, lui, sa valeur ayant ete mesuree au pixel le 29/07 pour
   tenir la ligne de vente au-dessus de 4,5:1. On eclaircit l'encre, on
   n'assombrit pas la photographie. */
.hero-place{margin-top:clamp(18px,2.6vh,26px); color:var(--creme);}
/* LA MENTION DE VENTE ET SES DEUX FILETS.
   « Reequilibrer egalement les tirets », Philippe le 11/08. Ils etaient en
   5vw, donc 48 px chacun sur un grand ecran : la ligne faisait alors 438 px
   quand l'ouverture de la porte en fait 331, et c'est elle, plus que le
   titre, qui debordait. Ils sont desormais poses en em, donc proportionnes
   au texte qu'ils encadrent, et la ligne entiere tient dans la colonne.
   Le text-indent compense le blanc que letter-spacing ajoute APRES la
   derniere lettre, et qui decalait le bloc d'un demi-caractere vers la
   gauche. */
.hero-sale{
  margin-top:12px; display:flex; align-items:center; justify-content:center;
  gap:.9em; width:100%;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  text-indent:.24em; color:var(--or-doux); white-space:nowrap;
}
/* Les filets CEDENT AVANT LE TEXTE. Ils sont en flex:1 1 0 borne a 2,6em :
   tant qu'il y a de la place ils la prennent a egalite, et quand la colonne
   se resserre ils se retirent au lieu de faire passer la mention sur deux
   lignes, ce qui la desequilibrerait bien plus que leur raccourcissement. */
.hero-sale::before,.hero-sale::after{
  content:""; display:block; flex:1 1 0; min-width:0; max-width:2.6em;
  height:1px; background:rgba(242,226,196,.65);
}
/* Sur un téléphone la mention passe sur deux lignes : les filets se
   retrouvent alors accrochés à mi-hauteur, de part et d'autre du bloc. On
   les retire, la ligne se suffit. */
@media (max-width:560px){
  .hero-sale{display:block; max-width:26ch; white-space:normal; text-indent:0;}
  .hero-sale::before,.hero-sale::after{display:none;}
}
/* Sous 700 px la contrainte de la porte se relache : la photographie y est
   rognee sur les cotes, l'ouverture occupe alors les trois quarts de
   l'ecran, et c'est la mesure de lecture qui reprend la main. */
@media (max-width:700px){
  .hero-in .hero-manifeste{text-align:center; text-align-last:auto; hyphens:manual;}
}
/* LA TABLETTE, ou l'ouverture est haute et le zoom desactive. La colonne y
   est centree dans l'ecran alors que la porte, elle, commence au tiers :
   le monogramme se posait sur le linteau sculpte, et les deux se
   brouillaient. Un supplement de marge haute descend le bloc sous le
   linteau ; le centrage reste, seul son axe se deplace. */
@media (min-width:701px) and (max-width:999px){
  .hero-in{padding-top:calc(var(--hdr-h) + 24px + 12vh);}
}
.hero-scroll{
  position:absolute; left:50%; bottom:clamp(26px,4vh,40px); z-index:2;
  transform:translateX(-50%); text-decoration:none;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  color:rgba(245,244,241,.96);
}
/* PIEGE DE CASCADE, trouve le 03/08 par l'audit : l'invite porte
   class="label", et .label pose color:var(--encre-2), le gris prevu pour le
   papier creme. A specificite egale et declare plus haut dans la feuille, il
   l'emportait, .hero-scroll ne visant que le parent. « Decouvrir » s'affichait
   donc en rgb(102,105,108), un gris sombre, sur un voile sombre : environ
   1,6:1, illisible. Toute couleur posee sur le hero doit etre reprise ICI,
   aucun libelle ne doit heriter du regime papier. */
.hero-scroll .label{color:inherit;}
/* UN CHEVRON, ET NON PLUS UN TRAIT. « Rendre Decouvrir plus clairement
   identifiable comme une action, notamment avec une petite fleche »,
   Philippe le 11/08. Le va-et-vient est de trois pixels : assez pour dire
   qu'on peut descendre, trop peu pour tirer l'oeil hors du titre. Il
   s'arrete sous prefers-reduced-motion, comme tout le reste. */
.hero-chevron{
  width:22px; height:13px; fill:none;
  stroke:rgba(245,244,241,.85); stroke-width:1.2;
  stroke-linecap:round; stroke-linejoin:round;
  animation:hero-appel 2.4s var(--ease) infinite;
}
.hero-scroll:hover .hero-chevron{stroke:var(--creme);}
@keyframes hero-appel{
  0%,58%,100%{transform:translateY(0); opacity:.85;}
  76%{transform:translateY(3px); opacity:1;}
}

/* ------------------------------------------------------------------
   DIRE LA DIRECTION, le 28/08.

   « Initier le defilement : l'utilisateur doit comprendre qu'il faut
   descendre », Thomas, « en restant discret, il faut garder l'elegance du
   site », et c'est la vraie contrainte. La demande arrive avec le retrait
   du fondu : la page ne bougeait plus du tout avant qu'on la pousse, et
   plus rien ne disait qu'elle allait quelque part.

   DEUX GESTES, ET AUCUN QUI S'AGITE.

   1. UN FILET, sous le chevron, dans lequel un court segment clair descend
      en boucle lente. C'est le seul element du hero qui dise une DIRECTION
      et non un simple mouvement : le chevron va et vient, le segment, lui,
      ne remonte jamais. Trois secondes et demie de course, presque tout en
      transparence : on ne le voit que si on le cherche, ce qui est
      exactement le point.

      IL EST HORS DU FLUX, en position absolue sous le groupe, et c'est
      necessaire et non un raffinement. .hero-scroll est cale par le BAS :
      un filet dans la colonne l'aurait fait grandir vers le HAUT, poussant
      « Decouvrir » de quarante-six pixels vers le bouton du film, qui n'est
      deja qu'a soixante-dix. Mesure faite sur la capture du 28/08 en
      1440x900. En absolu il ne coute rien a la mise en page et se loge dans
      la marge basse, dont les vingt-six pixels minimum le contiennent.

   2. UNE SEULE RELANCE, au bout de cinq secondes sans defilement : le
      groupe descend de huit pixels et revient. Une fois, jamais deux.
      assets/site.js pose la classe et la retire au premier defilement, si
      bien qu'elle ne joue pas pour qui a deja compris.

   Les deux s'arretent sous prefers-reduced-motion, et le filet disparait
   alors entierement : un trait immobile de plus sur une page qui en compte
   deja ne dirait rien. */
.hero-scroll{--fil-h:24px;}
.hero-scroll .hero-fil{
  position:absolute; top:100%; left:50%; margin-left:-1px; margin-top:4px;
  width:1px; height:var(--fil-h); overflow:hidden;
  background:linear-gradient(180deg,
    rgba(245,244,241,0) 0%, rgba(245,244,241,.30) 30%,
    rgba(245,244,241,.30) 70%, rgba(245,244,241,0) 100%);
}
.hero-scroll .hero-fil::after{
  content:""; position:absolute; left:0; width:1px; height:9px;
  background:var(--creme);
  animation:hero-fil 3.4s var(--ease) infinite;
}
@keyframes hero-fil{
  0%   {transform:translateY(-9px); opacity:0;}
  25%  {opacity:.95;}
  70%  {opacity:.95;}
  100% {transform:translateY(var(--fil-h)); opacity:0;}
}

/* La relance unique. L'amplitude est de huit pixels, le double du chevron :
   c'est un geste qu'on ne voit qu'une fois, il a le droit d'etre lu. */
.hero-scroll.relance{animation:hero-relance 1.1s var(--ease) 1;}
@keyframes hero-relance{
  0%,100%{transform:translate(-50%,0);}
  40%    {transform:translate(-50%,8px);}
}

@media (prefers-reduced-motion:reduce){
  .hero-chevron{animation:none;}
  .hero-scroll .hero-fil{display:none;}
  .hero-scroll.relance{animation:none;}
}
/* ============ L'EMPLACEMENT DU FILM ============
   Il se voit AVANT que le film existe : c'est la demande. Le bouton a la
   même place et la même taille dans les deux états, si bien que la mise en
   page ne bougera pas le jour où le MP4 arrivera. */
.hero-film{margin-top:clamp(26px,3.6vh,42px);}
.hero-film,.hero-film-bouton{
  display:flex; align-items:center; gap:14px;
  background:none; border:0; padding:0; color:var(--or-doux);
}
.hero-film-bouton{cursor:pointer;}
.hero-film-marque{
  width:46px; height:46px; flex:none; border-radius:50%;
  border:1px solid rgba(242,226,196,.7); display:grid; place-items:center;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.hero-film-marque svg{width:11px; fill:var(--or-doux); margin-left:2px;
  transition:fill .3s var(--ease);}
.hero-film-mot{color:var(--or-doux);}
.hero-film-bouton:hover .hero-film-marque{
  background:var(--or-doux); border-color:var(--or-doux); transform:scale(1.06);
}
.hero-film-bouton:hover .hero-film-marque svg{fill:var(--nuit);}

/* ------------------------------------------------------------------
   LE LOGO EN HAUT, LE TEXTE AU MILIEU, LE FILM EN BAS, 15/08.

   « Remonter le logo plus en haut de la page », « detacher davantage les
   blocs 2, 3 et 4 : logo plus en haut, texte au milieu », Philippe. Les
   quatre blocs etaient colles les uns aux autres au centre de l'ecran, et
   se lisaient comme un seul pave de six lignes.

   DEUX MARGES AUTOMATIQUES SUFFISENT, et c'est pour cela qu'on les emploie
   plutot que des valeurs : le blanc disponible se partage a egalite entre
   elles. Le monogramme remonte donc sous l'en-tete, le manifeste et les
   deux mentions tiennent le milieu, le film descend au bas de la colonne.
   Aucune valeur a rejuger le jour ou une ligne s'allonge.

   BORNE A 1000 x 700 px, ET LES DEUX BORNES ONT UNE RAISON.

   En hauteur : sous 700 px il n'y a plus de blanc a partager, les marges
   automatiques valent zero et les quatre blocs se toucheraient.

   En largeur : sous 1000 px la photographie n'est plus zoomee, elle est
   rognee sur les cotes par le cadrage en cover, et le battant n'occupe plus
   le meme etage de l'image. MESURE SUR UNE CAPTURE EN 390 x 844 : le
   monogramme remonte alors sur la pierre claire du mur, et le mot en
   petites capitales sous lui tombe a 4,05:1 quand il tient 9,4:1 sur le
   battant. C'est sous le seuil de 4,5:1 des petits textes, pour une ligne
   qui porte le nom de la villa.

   Le telephone garde donc le bloc centre, ou la colonne entiere se pose sur
   la porte. La demande du 15/08 porte sur « la premiere page » telle qu'il
   la relit, et elle est tenue la ou il la regarde. Toute couleur ou toute
   position posee sur le hero se verifie sur les pixels rendus, jamais sur la
   feuille de style : voir outils-verif/contraste.py.
   ------------------------------------------------------------------ */
@media (min-width:1000px) and (min-height:700px){
  .hero-col{height:100%; justify-content:flex-start;}
  .hero-in .hero-manifeste{margin-top:auto;}
  .hero-film{margin-top:auto; margin-bottom:0;}
  /* Le film descendant au bas de la colonne, il se rapprochait de l'invite
     de defilement : 35 px les separaient. Le fond de la scene se creuse donc
     d'autant, et les deux appels cessent de se disputer le meme coin. */
  .hero-in{padding-bottom:clamp(120px,15vh,168px);}
}
/* En attente, la place est marquée mais rien n'invite au clic. */
.hero-film:not(:has(.hero-film-bouton)) .hero-film-marque{opacity:.62;}
.hero-film:not(:has(.hero-film-bouton)) .hero-film-mot{opacity:.75;}

/* ============================================================
   CHAPITRES
   Regle de structure : le TEXTE vit dans .wrap, les PHOTOS sont enfants
   directs de la section pour aller d'un bord a l'autre. Ne pas remettre
   les figures dans .wrap, elles y perdraient leur pleine largeur, et ne
   pas revenir a width:100vw avec marges negatives, qui deborde de la
   largeur de la barre de defilement.
   ============================================================ */
.chap{position:relative; z-index:1; background:var(--creme); padding-block:clamp(60px,7.5vh,108px);}
.chap + .chap{padding-top:0;}

/* TOUT LE CHAPITRE EST SUR UN SEUL AXE, depuis le 12/08. Le texte a ete
   centre a la demande de Philippe, « reste aligne au centre et justifie » ;
   laisser le titre cale a gauche aurait alors desaxe la page, ce qu'il
   reproche justement au Perigord Noir, « il faut que tout soit equilibre ».
   Le chiffre, son filet, le titre et le filet dore se centrent donc avec le
   texte, comme le font deja le hero et les aphorismes. */
.chap-head{margin-bottom:clamp(28px,3.6vw,48px); text-align:center;}
/* Le chiffre romain est suivi d'un filet : seul, un « I » a 15 px passait
   pour une trace parasite plutot que pour un numero de chapitre. */
.chap-head .num{
  display:flex; align-items:center; justify-content:center; gap:14px;
  font-family:var(--ff-display); font-size:19px;
  letter-spacing:.26em; color:var(--accent); margin-bottom:20px;
}
/* UN FILET DE CHAQUE COTE, et non plus un seul a droite. Centre, le
   chiffre suivi d'un seul filet posait le groupe sur l'axe mais pas le
   chiffre lui-meme, qui restait a gauche du milieu. Deux filets le remettent
   au centre, comme la mention de vente du hero. */
.chap-head .num::before,.chap-head .num::after{
  content:""; display:block; width:40px; height:1px; background:var(--filet-accent);
}
.chap-head .num{text-indent:.26em;}
/* h1 comme h2 : la page dossier porte un h1, la landing des h2, et
   les deux doivent se voir pareil. */
.chap-head h1,.chap-head h2{font-size:clamp(34px,5.4vw,64px); letter-spacing:-.005em;}
.rule-gold{
  display:block; width:54px; height:1px; background:var(--filet-accent);
  margin:clamp(24px,3vw,36px) auto 0;
}

/* LE TEXTE COURANT EST JUSTIFIE depuis le 11/08 : « rechercher un texte
   justifié et aussi rectangulaire/équilibré que possible », Philippe.

   La cesure n'est pas un ornement, c'est ce qui rend la justification
   tenable. Sans elle, le francais sur 62 signes ouvre des lezardes blanches
   tres visibles en Cormorant, parce que la langue aligne des mots longs et
   des articles courts. La mesure descend donc a 56 signes et la cesure
   automatique prend le relais. Elle suit la langue de la page, que
   assets/site.js tient a jour sur <html> a chaque changement de FR a EN.

   hyphenate-limit-chars interdit de couper un mot de moins de six lettres
   et de laisser moins de trois lettres d'un cote : sans cette borne, on
   obtient des « l'ar-chitecture » qui se lisent plus mal que la lezarde
   qu'ils evitent. La propriete n'est pas soutenue partout ; la ou elle
   manque, la cesure reste correcte, seulement moins polie.

   Le chapeau et l'aphorisme restent en drapeau : justifier trois mots en
   corps 29 ne donne pas un rectangle, il donne des trous. */
/* LE BLOC DE TEXTE EST CENTRE DANS SON CHAPITRE depuis le 12/08. « Evite
   d'avoir du texte a gauche ou a droite et rien a cote. Reste aligne au
   centre et justifie », Philippe. Cale a gauche, une colonne de 56 signes
   laissait la moitie droite du chapitre vide, et le chapitre entier
   paraissait bancal. Centree, elle redevient le bloc pose sur l'axe que
   demande le reste de la page.
   Le duo et le triptyque font exception : la colonne y a une image en face,
   elle n'est donc pas seule et se cale sur son cote. */
.chap-text{max-width:56ch; margin-inline:auto; display:flex; flex-direction:column; gap:1.35em;}
.chap-duo .chap-text{margin-inline:0;}
.chap-text p{
  color:var(--texte);
  text-align:justify; hyphens:auto; hyphenate-limit-chars:6 3 3;
}
.chap-text .lede{
  font-family:var(--ff-display); font-size:clamp(21px,2.5vw,29px);
  line-height:1.42; color:var(--encre);
  text-align:left; hyphens:manual;
}
/* Sous 520 px la colonne tombe a une trentaine de signes : justifier y
   creuse plus qu'ailleurs, et la cesure hacherait un mot par ligne. */
@media (max-width:520px){
  .chap-text p{text-align:left; hyphens:manual;}
}
/* ------------------------------------------------------------------
   LE TITRE DE SOUS-PARTIE

   SUR L'AXE, comme tout le reste depuis le 12/08. Il etait le seul element
   de la page a rester cale a gauche, ce qui se voyait d'autant plus au
   chapitre IX, ou trois sous-titres se suivent entre des carrousels pleine
   largeur : le regard descendait au centre puis butait a gauche.

   ET IL APPARTIENT A CE QUI LE SUIT, pas a ce qui le precede. Mesure le
   14/08 : il tombait a ZERO pixel sous le dernier paragraphe et a 72 px
   au-dessus du carrousel, si bien qu'il se lisait comme la chute du texte.
   L'espace est desormais d'environ 100 px au-dessus et de 30 en dessous,
   soit un rapport de trois pour un, qui est ce qui fait groupe.

   UN SEUL RESERVOIR DE BLANC AU-DESSUS, et c'est l'effondrement des marges
   qui s'en charge : la marge haute du titre et la marge basse du carrousel
   qui le precede sont adjacentes, la plus grande l'emporte. Le titre mesure
   donc le meme blanc qu'il suive un bloc de texte, qui n'en pose aucun, ou
   un carrousel, qui en pose 76. Ne pas ajouter de padding sur .wrap-sub :
   il romprait l'effondrement et les deux blancs s'additionneraient.
   ------------------------------------------------------------------ */
.chap-sub{
  font-size:clamp(23px,2.6vw,32px); text-align:center;
  margin:clamp(60px,7vw,104px) auto 0;
}
.wrap-sub + .chap-carrousel,
.wrap-sub + .chap-figure{margin-top:clamp(18px,2.2vw,30px);}

/* L'aphorisme : italique, centre, beaucoup de blanc autour. C'est la
   respiration demandee entre deux chapitres. */
.aphorisme{
  font-family:var(--ff-display); font-style:italic; font-weight:300;
  font-size:clamp(23px,3.2vw,40px); line-height:1.3; text-align:center;
  max-width:24ch; margin:clamp(64px,9vw,124px) auto clamp(8px,2vw,20px);
  color:var(--encre); text-wrap:balance;
}
/* ------------------------------------------------------------------
   L'APHORISME TIENT SUR UNE SEULE LIGNE, 15/08.

   « Mettre la baseline sur une seule ligne » revient a six chapitres et au
   formulaire. Ce qui la coupait n'etait pas sa longueur mais la mesure de
   24 signes, heritee du temps ou elle etait un bloc de deux ou trois lignes
   centrees : sur un ecran de 1440, elle s'arretait a 380 px quand le
   chapitre en offre 1052.

   LA MESURE TOMBE DONC, ET C'EST LE CORPS QUI S'AJUSTE. La plus longue des
   vingt-deux, « Elles gardent la trace des lieux, du temps et des mains qui
   les ont faconnees », fait 77 signes ; mesuree en Cormorant italique elle
   demande 0,404 em par signe, soit 31,1 em. A 31 px elle occupe 966 px des
   1052 disponibles, et l'anglais, plus court de six signes, tient partout
   ou le francais tient. Les 2,35vw la reduisent avec la fenetre, si bien
   que la ligne unique tient jusqu'a 761 px.

   PAS DE white-space:nowrap : si une traduction future depassait, on veut
   qu'elle revienne a la ligne, pas qu'elle sorte de l'ecran. Le repli est
   une deuxieme ligne, jamais un debordement.

   SOUS 760 px LA REGLE NE S'APPLIQUE PAS : une ligne de 77 signes y
   demanderait un corps de 10 px. L'aphorisme y redevient le bloc centre de
   deux ou trois lignes, qui est sa forme d'origine.
   ------------------------------------------------------------------ */
@media (min-width:761px){
  .aphorisme{
    max-width:100%;
    font-size:clamp(19px,2.35vw,31px);
  }
}

/* ------------------------------------------------------------------
   LES MEDIAS NE COURENT PLUS D'UN BORD A L'AUTRE, 15/08.

   « L'affichage des photos doit etre moins grand pour tenir dans un ecran
   classique. Actuellement 100 %, a ramener a 75 ou 80 % », Philippe, et il
   le repete a huit chapitres : Inspirations, Matiere, Le seuil, La lumiere,
   L'eau, Le patio, Le paysage, Habiter, Sarlat en Perigord noir.

   UNE SEULE VALEUR POUR TOUS, --media-large, et un seul endroit ou la
   changer. 78 % est le milieu de sa fourchette : sur un ecran de 1440 le
   bloc fait 1123 px de large et, en 1,85:1, 607 px de haut. Avec les 100 px
   de blanc qui l'entourent il tient sous les 800 px utiles d'un 1440x900,
   ce qui est exactement la demande. A 80 % il en faisait 623, a 100 % 778 :
   la photographie remplissait alors l'ecran a elle seule et l'on ne voyait
   jamais le titre et l'image ensemble.

   LE RATIO NE BOUGE PAS, seule la largeur du cadre change : les quatre
   quarts de la grille restent des quarts, et le calcul de la regle 2 du
   13/08 tient toujours puisqu'il ne porte que sur des proportions.

   SOUS 760 px, RIEN NE SE REDUIT. La photographie y est deja la moitie de
   l'ecran en hauteur, et lui retirer un cinquieme de sa largeur la
   rendrait timbre-poste. La regle est donc bornee au-dessus de 760.

   L'OUVERTURE DU DOSSIER PRIVE EN EST EXCLUE : elle n'est pas un chapitre,
   elle est le premier ecran d'une page, et sa largeur pleine est ce qui la
   raccorde a la page 0 de la landing.
   ------------------------------------------------------------------ */
@media (min-width:761px){
  :root{ --media-large:78%; }
  .chap-quatre,
  .chap:not(#ouverture) > .chap-figure:not(.contenu),
  [data-carrousel]:not([data-vertical]){
    width:var(--media-large); margin-inline:auto;
  }
  /* LE DECOR EST LE SEUL A NE PAS SUIVRE CETTE VALEUR, parce que Philippe y
     demande l'inverse pour chacun de ses deux carrousels : « au carrousel
     de photos verticales, lui faire prendre PLUS de place dans la page ; au
     carrousel de photos horizontales, lui en faire prendre MOINS ».
     Le second descend donc a 58 % : ses cinq gros plans sont des details,
     ils ponctuent, ils ne racontent pas, et les six verticales qui ouvrent
     le chapitre gardent ainsi la vedette. */
  #decor [data-carrousel]:not([data-vertical]){ width:58%; }
}

/* --- figures --- */
.chap-figure{margin-block:clamp(38px,5vw,76px);}
.chap-figure.contenu{max-width:var(--maxw-wide); margin-inline:auto; padding-inline:clamp(20px,5vw,64px);}

/* Toute figure photographique est un CADRE : le ratio natif y est posé par
   outils-build/figures.mjs, elle réserve donc la place exacte, et l'image la
   remplit. C'est ce qui permet au parallaxe de faire déborder l'image sans
   décaler d'un pixel la mise en page. */
figure[data-photo]{display:block; overflow:hidden;}
/* Une photo 3:2 en pleine largeur fait 960 px de haut sur un écran de
   1440 : plus d'un écran pour une seule image, et une page de 27 000 px.
   On la plafonne à trois quarts d'écran. Le cadrage se resserre au centre,
   ce qui rapproche du format des livres d'architecture, et la page perd
   quatre mille pixels. */
/* PIEGE, rencontre le 29/07 : un max-height sur une figure qui porte un
   aspect-ratio ne recadre pas l'image, il RETRECIT LA FIGURE. Une photo
   pleine largeur plafonnee a 76svh cessait d'occuper toute la largeur et se
   retrouvait a 1026 px sur un ecran de 1400.
   On ne plafonne donc pas la hauteur : on impose un ratio d'affichage par
   cadre, et object-fit:cover recadre au centre. La largeur reste intacte,
   la hauteur est connue d'avance, et les sizes restent justes. */
.chap-figure:not(.contenu) figure[data-photo]{aspect-ratio:1.85/1 !important;}
/* LE BANDEAU D'OUVERTURE DU DOSSIER a quitte ce regime le 16/08 : il n'est
   plus une figure de chapitre mais un ecran d'accueil, avec son voile, son
   monogramme et son titre par-dessus. Ses regles vivent avec celles du hero,
   plus bas, sous « L'ECRAN D'ACCUEIL DU DOSSIER ». Il garde son 2,4:1 et le
   cadrage de la page 0 : la raison n'a pas change, le formulaire de visite
   doit rester a moins de quatre ecrans du haut. */
.chap-strip figure[data-photo]{aspect-ratio:3/2 !important;}
.chap-duo-media figure[data-photo]{aspect-ratio:4/5 !important;}
/* Un portrait centre garde son cadrage d'origine : c'est sa largeur qui est
   tenue, pas sa hauteur. */
.chap-figure.contenu figure[data-photo]{max-width:720px; margin-inline:auto;}
figure[data-photo] > picture{display:block; width:100%; height:100%;}
figure[data-photo] img{width:100%; height:100%; object-fit:cover;}

/* PIEGE, rencontre le 31/07 : la couverture du livre est arrivee recadree,
   titre coupe des deux cotes. Elle avait herite du regime des photographies,
   qui est fait pour recadrer : object-fit:cover, la vignette du parallaxe qui
   depasse de seize pour cent, et le zoom d'apparition a 1,07.
   Une couverture n'est pas une photographie : c'est un document, son titre
   fait partie de l'image et rien n'y est sacrifiable. Une figure marquee
   data-entier sort donc des trois regimes a la fois. Le selecteur porte les
   deux attributs, sinon la regle generique, plus specifique, l'emporte. */
figure[data-photo][data-entier] > picture{height:auto;}
figure[data-photo][data-entier] img{height:auto; object-fit:contain;}
.anim figure[data-photo][data-entier] img{transform:none;}
.anim figure[data-photo][data-entier].derive > picture{height:auto; margin-top:0;}

.chap-strip{display:grid; gap:clamp(6px,1vw,14px); margin-block:clamp(38px,5vw,76px);}
.chap-strip.deux{grid-template-columns:repeat(2,1fr);}
.chap-strip.trois{grid-template-columns:repeat(3,1fr);}
@media (max-width:760px){
  .chap-strip.deux,.chap-strip.trois{grid-template-columns:1fr;}
  .chap-strip figure[data-photo]{aspect-ratio:3/2 !important;}
  .chap-duo-media figure[data-photo]{aspect-ratio:3/4 !important;}
}

/* ------------------------------------------------------------------
   LA GRILLE DE QUATRE, regle 2 de Philippe le 13/08 : « quatre
   photographies dans le chapitre, chacune occupant un quart de la surface
   de la photographie pleine page », posees XA-XB / XC-XD.

   Le calcul tombe juste sans reglage. Une pleine page vaut 100vw sur
   100vw/1,85. Quatre quarts sur deux colonnes font chacun 50vw de large
   sur la moitie de cette hauteur, soit 50vw/1,85 : le MEME rapport 1,85:1.
   Le bloc entier retrouve donc exactement la surface d'une pleine page, et
   il n'y a qu'un seul ratio a declarer.

   Le filet de un pixel entre les quatre vues est celui des cartouches et
   des specifications : c'est le seul separateur de la page.
   ------------------------------------------------------------------ */
.chap-quatre{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1px; background:var(--filet);
  margin-block:clamp(38px,5vw,76px);
}
.chap-quatre figure[data-photo]{aspect-ratio:1.85/1 !important;}
/* Sur un telephone, quatre demi-largeurs feraient quatre timbres : elles
   s'empilent, et le cadre reprend le 3:2 des autres gabarits. */
@media (max-width:760px){
  .chap-quatre{grid-template-columns:1fr;}
  .chap-quatre figure[data-photo]{aspect-ratio:3/2 !important;}
}

/* duo : une photo pleine hauteur d'un cote, le texte de l'autre */
.chap-duo{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px);
  align-items:center; margin-block:clamp(38px,5vw,76px);
}
.chap-duo.rev .chap-duo-media{order:2;}
.chap-duo .chap-text{
  padding-inline:clamp(20px,5vw,64px); padding-block:clamp(8px,2vw,24px);
  max-width:56ch;
}
.chap-duo.rev .chap-text{justify-self:end;}
/* Un portrait de 3840 x 5760 affiché à 50 % de la largeur ferait 1050 px de
   haut, plus d'un écran : le ratio d'affichage le ramène à 4/5. */
@media (max-width:860px){
  .chap-duo{grid-template-columns:1fr; gap:clamp(24px,5vw,40px);}
  .chap-duo.rev .chap-duo-media{order:0;}
}

/* ------------------------------------------------------------------
   TRIPTYQUE : une photo, le texte, une photo. Demande par Philippe le
   11/08 pour le chapitre Habiter, « deux photographies de la chambre
   Colonnes d'Inde, l'une a gauche et l'autre a droite, avec le texte au
   centre ».

   Les deux photos sont a la meme largeur et le texte tient le milieu :
   c'est la seule composition symetrique de la page, et elle ne vaut que
   parce que les deux vues sont celles d'une meme piece. Sous 860 px elle
   s'empile dans l'ordre photo, texte, photo, qui reste lisible.
   ------------------------------------------------------------------ */
.chap-triptyque{
  display:grid; grid-template-columns:1fr minmax(0,1.15fr) 1fr;
  gap:clamp(20px,3vw,44px); align-items:center;
  margin-block:clamp(38px,5vw,76px);
}
.chap-triptyque .chap-text{
  max-width:46ch; margin-inline:auto; padding-inline:clamp(4px,1.5vw,20px);
}
.chap-triptyque figure[data-photo]{aspect-ratio:4/5 !important;}
@media (max-width:1100px){
  .chap-triptyque{grid-template-columns:1fr minmax(0,1fr) 1fr; gap:clamp(14px,2vw,24px);}
  .chap-triptyque .chap-text{max-width:40ch;}
}
@media (max-width:860px){
  .chap-triptyque{grid-template-columns:1fr; gap:clamp(24px,5vw,40px);}
  .chap-triptyque .chap-text{max-width:56ch; padding-inline:clamp(20px,5vw,64px);}
  .chap-triptyque figure[data-photo]{aspect-ratio:3/2 !important;}
}

/* ------------------------------------------------------------------
   TEXTE EN TROIS COLONNES, demande pour Le Perigord Noir.

   Les colonnes CSS coulent le texte de l'une a l'autre : c'est ce qui
   permet de les equilibrer, ce qu'une grille de trois blocs ne ferait pas.
   La regle d'or tient : on ne descend jamais sous une trentaine de signes
   par colonne, sinon la justification devient impraticable. D'ou trois
   colonnes au-dessus de 1100 px, deux ensuite, une sous 760.
   ------------------------------------------------------------------ */
.chap-colonnes{
  columns:3; column-gap:clamp(28px,3.4vw,52px);
  margin-top:clamp(18px,2vw,28px);
}
.chap-colonnes p{
  color:var(--texte); text-align:justify; hyphens:auto; hyphenate-limit-chars:6 3 3;
  margin-bottom:1.35em;
  /* Une colonne ne doit pas commencer par la derniere ligne du paragraphe
     precedent : sans cela l'oeil recommence sa lecture sur un orphelin. */
  break-inside:avoid-column;
}
.chap-colonnes p:last-child{margin-bottom:0;}
/* ------------------------------------------------------------------
   TROIS COLONNES DE MEME PROPORTION, 15/08.

   « Faire 3 colonnes de texte de meme proportion », « au lieu des formats
   croissants actuels », Philippe, sur le bloc unique ne de la fusion des
   deux sous-parties du Perigord.

   CE QUI LES RENDAIT CROISSANTES : break-inside:avoid-column. Sept
   paragraphes de longueurs tres inegales, chacun insecable, ne se
   repartissent pas a egalite ; l'algorithme d'equilibrage n'a que sept
   blocs a poser et la derniere colonne prenait le reste. En rendant la
   coupe aux colonnes, il repartit des LIGNES et non des paragraphes, et les
   trois hauteurs deviennent egales a la ligne pres.

   Ce que l'avoid-column protegeait, l'orpheline d'une ligne en tete de
   colonne, est repris par orphans et widows, qui le font mieux : ils
   interdisent la ligne seule sans interdire la coupe.
   ------------------------------------------------------------------ */
.chap-colonnes.egales p{
  break-inside:auto;
  orphans:2; widows:2;
  /* ET LES SIGLES CESSENT DE SE COUPER. Sur une colonne de trente signes, la
     borne 6 3 3 autorisait « UNES-CO », qui se lit comme une faute. A 7 4 3,
     un mot de six lettres ne se coupe plus du tout, et les mots plus longs
     gardent quatre lettres devant la coupe. */
  hyphenate-limit-chars:7 4 3;
}
@media (max-width:1100px){ .chap-colonnes{columns:2;} }
@media (max-width:760px){
  .chap-colonnes{columns:1; max-width:56ch;}
  .chap-colonnes p{text-align:left; hyphens:manual;}
}

/* la photo s'ouvre en grand : un signe discret, jamais une loupe posee
   par-dessus l'image */
figure.zoomable{cursor:zoom-in;}
figure.zoomable img{transition:opacity .35s var(--ease);}
figure.zoomable:hover img{opacity:.9;}
figure.zoomable:focus-visible{outline:2px solid var(--accent); outline-offset:-4px;}

/* --- reperes et distances --- */
.reperes{display:grid; gap:0; margin-top:22px; border-top:1px solid var(--filet);}
.repere{padding:16px 0; border-bottom:1px solid var(--filet); color:var(--texte);}

.route{display:grid; gap:0; margin-top:22px; border-top:1px solid var(--filet);}
.route > div{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px;
  padding:15px 0; border-bottom:1px solid var(--filet);
}
.route .bar{height:1px; background:var(--filet);}
.route .v{font-variant-numeric:tabular-nums; color:var(--encre-2);}
/* L'appel de note ne doit pas pousser la ligne : il est plus petit et
   n'occupe pas sa place dans l'interligne. */
.route .k sup{font-size:.7em; vertical-align:super; line-height:0;}
/* Les deux notes des aeroports, sur le modele de .specs-note. Elles
   detaillent, elles ne se lisent pas d'abord : d'ou le corps reduit et la
   couleur secondaire, comme les valeurs du tableau. */
.route-note{
  margin-top:14px; max-width:64ch;
  font-size:13.5px; line-height:1.6; color:var(--encre-2);
}
.route-note + .route-note{margin-top:8px;}
.route-note b{font-weight:500; color:var(--texte);}

/* ============================================================
   FORMULAIRES
   ============================================================ */
.conv-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px);
  align-items:start;
}
@media (max-width:900px){ .conv-grid{grid-template-columns:1fr;} }

/* La couverture du livre, visuel d'appel du chapitre « Poursuivre la
   découverte ». Une ombre portée serait hors charte : c'est un filet qui la
   détache du fond. */
.conv-livre{
  max-width:330px; margin-bottom:clamp(26px,3.4vw,42px);
  border:1px solid var(--filet);
}
.conv-livre img{width:100%;}
@media (max-width:900px){ .conv-livre{max-width:min(62vw,330px);} }
/* LA COUVERTURE TELECHARGE LE LIVRE, 15/08 : « mettre un lien de
   telechargement sur l'image du livre ». Le lien enveloppe la figure ; le
   bloc doit donc rester au format de la figure et non prendre toute la
   colonne, sans quoi le curseur de main s'etendrait sur du vide a droite de
   la couverture. */
.conv-livre-lien{display:block; width:fit-content; max-width:100%;}
.conv-livre-lien:focus-visible{outline:2px solid var(--or); outline-offset:4px;}

.form-box{background:var(--creme-2); border:1px solid var(--filet); padding:clamp(24px,3.4vw,42px);}
/* LE TITRE SUR L'AXE, 15/08 : « centrer le titre Recevoir le dossier prive ».
   La ligne qui le suit le suit aussi : un titre centre au-dessus d'un
   sous-titre cale a gauche donnerait deux axes dans un cartouche de 500 px.
   Les champs, eux, restent cales a gauche, ou commence la lecture d'un
   formulaire. */
.form-box h3{font-size:clamp(24px,2.6vw,31px); text-align:center;}
.form-box .sub{
  margin-top:10px; color:var(--encre-2); font-size:15px; margin-bottom:26px;
  text-align:center; max-width:46ch; margin-inline:auto;
}

.field{display:flex; flex-direction:column; gap:7px; margin-bottom:18px;}
.field label{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--encre-2);}
.field .opt{text-transform:none; letter-spacing:.04em; opacity:.7;}
.field input,.field textarea{
  font:inherit; font-size:16px; color:var(--encre);
  background:var(--creme); border:1px solid var(--filet); border-radius:0;
  padding:12px 14px; width:100%;
  transition:border-color .2s var(--ease);
}
.field input:focus,.field textarea:focus{border-color:var(--accent);}
.field textarea{resize:vertical; min-height:90px;}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#8C2F1F;}
.two{display:grid; grid-template-columns:1fr 1fr; gap:0 16px;}
@media (max-width:560px){ .two{grid-template-columns:1fr;} }

.err{color:#8C2F1F; font-size:13.5px; line-height:1.45;}

.check{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; margin-bottom:14px; cursor:pointer;}
.check input{margin-top:5px; accent-color:var(--accent); width:15px; height:15px;}
.check span{font-size:14.5px; line-height:1.6; color:var(--texte);}

.choix{border:0; padding:0; margin:0 0 18px;}
.choix legend{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--encre-2); margin-bottom:10px;}
.choix-lot{display:flex; flex-wrap:wrap; gap:8px;}
.choix-un{cursor:pointer; position:relative;}
.choix-un input{position:absolute; opacity:0; width:1px; height:1px;}
.choix-un span{
  display:block; padding:9px 16px; border:1px solid var(--filet);
  font-size:14px; color:var(--encre-2); transition:all .2s var(--ease);
}
.choix-un.on span{border-color:var(--accent); color:var(--accent); background:rgba(85,88,92,.06);}
.choix-un input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px;}

.btn{
  display:inline-block; text-align:center; text-decoration:none; cursor:pointer;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  padding:16px 30px; border:1px solid transparent; border-radius:0;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
/* Un bouton d'encre plutot que d'or : l'or garde ainsi sa valeur de filet,
   et la page cesse de compter deux aplats colores par ecran. */
.btn-gold{background:var(--encre); color:var(--creme); border-color:var(--encre);}
.btn-gold:hover{background:var(--accent); border-color:var(--accent);}
.btn-gold[disabled]{opacity:.6; cursor:default;}
.btn-line{background:none; color:var(--accent); border-color:var(--filet-accent);}
.btn-line:hover{background:var(--accent); color:var(--creme);}
.btn-block{display:block; width:100%;}
.form-note{margin-top:16px; font-size:13px; line-height:1.6; color:var(--encre-2);}

/* L'envoi a echoue. Le message se pose AU-DESSUS du bouton, la ou le
   regard revient apres le clic, et non sous lui ou il passerait sous la
   ligne de flottaison sur un telephone. Meme rouge que les erreurs de
   champ : c'est la meme famille de message. */
.form-panne{margin-top:22px; padding:12px 14px;
            border:1px solid rgba(140,47,31,.28); background:rgba(140,47,31,.05);}

/* Le piege a robots. Il doit rester DANS le formulaire et focalisable par
   un programme, donc pas de display:none ni de visibility:hidden, que les
   remplisseurs automatiques savent lire et sauter. Hors de l'ecran, sans
   hauteur, ignore du clavier et des lecteurs d'ecran par ses attributs.
   Voir src/envoi.js. */
.piege{position:absolute; left:-9999px; top:auto; width:1px; height:1px;
       overflow:hidden; opacity:0; pointer-events:none;}

.form-ok h3{font-size:clamp(23px,2.5vw,30px);}
.form-ok p{margin-top:14px; color:var(--texte);}
.form-ok:focus{outline:none;}
.ok-links{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px;}

/* Repli sans JavaScript : le formulaire n'existe pas, on donne l'adresse. */
/* Le repli sans JavaScript. Depuis le 17/08 il ne contient plus de lien : il
   donnait une adresse de courriel, il enonce maintenant ce qui manque. Le
   corps reduit et la couleur secondaire le disent : c'est une note technique,
   pas une invitation. */
.form-repli{font-size:14.5px; color:var(--encre-2); line-height:1.7;}

/* ============================================================
   DONNEES TECHNIQUES
   Cartouches distincts en bas de page, comme demande.
   Subgrid pour que les trois lignes s'alignent d'un cartouche a l'autre :
   ne pas revenir a des separateurs en ::before poses a top:50%.
   ============================================================ */
.data{background:var(--creme); padding-block:clamp(72px,10vh,132px); border-top:1px solid var(--filet);}
.data-head{margin-bottom:clamp(32px,4vw,52px);}
.data-head .num{display:block; font-family:var(--ff-display); font-size:15px; letter-spacing:.3em; color:var(--accent); margin-bottom:16px;}
.data-head h2{font-size:clamp(28px,3.6vw,44px);}

.cartouches{display:grid; grid-template-columns:repeat(auto-fit,minmax(228px,1fr)); gap:1px; background:var(--filet);}
.cartouche{
  background:var(--creme); padding:clamp(22px,2.6vw,32px);
  display:grid; grid-template-rows:subgrid; grid-row:span 3; gap:12px; align-content:start;
}
.cartouche .v{font-family:var(--ff-display); font-size:clamp(21px,2.2vw,27px); line-height:1.2;}
.cartouche .s{font-size:14px; line-height:1.65; color:var(--encre-2);}
/* La liste du premier cartouche, depuis le 13/08 : toiture, eau,
   assainissement. Elle vit DANS la troisieme cellule du subgrid, sans quoi
   les cinq cartouches ne s'alignent plus. La puce est un filet et non un
   point : c'est le seul signe de liste de la page, et il reprend le filet
   des separateurs. */
.cartouche .s ul{list-style:none; margin-top:14px; display:grid; gap:9px;}
.cartouche .s li{position:relative; padding-left:16px;}
.cartouche .s li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:8px; height:1px; background:var(--filet-accent);
}
.cartouche .s b{font-weight:500; color:var(--texte);}
/* L'APPEL A L'ACTION DU CARTOUCHE « DISPONIBILITE », 15/08 : « faire un lien
   vers un appel a l'action pointant vers le formulaire ». C'est le dernier
   endroit de la page ou le bien est dit a vendre, et il n'offrait aucun
   chemin pour le demander : le visiteur devait remonter de deux ecrans.

   PAS UN BOUTON. Un aplat de plus dans une grille de cinq cartouches en
   ferait le point le plus lourd de la page, et la mention de vente doit
   rester une mention. C'est donc le libelle des liens du site, souligne
   d'un filet qui se ferme au survol. */
.lien-appel{
  display:inline-block; margin-top:14px;
  font-family:var(--ff-ui); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); text-decoration:none;
  border-bottom:1px solid var(--filet-accent); padding-bottom:3px;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.lien-appel:hover{color:var(--encre); border-color:var(--encre);}
@supports not (grid-template-rows:subgrid){
  .cartouche{display:flex; flex-direction:column; gap:12px;}
}

/* ============================================================
   PIED DE PAGE
   ============================================================ */
.foot{background:var(--creme); border-top:1px solid var(--filet); padding-block:clamp(52px,7vw,84px);}
/* UNE SEULE COLONNE, CENTREE, depuis le 11/08. Le pied etait en deux
   colonnes inegales, le logo cale a gauche ; Philippe demande le logo au
   centre, le nom de la villa inscrit dessous, et les paragraphes
   « restructures en une ou deux colonnes, selon la solution donnant le
   resultat le plus equilibre ». Les quatre lignes de texte tiennent mieux
   en un bloc unique qu'en deux colonnes de deux lignes. */
.foot-top{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  max-width:62ch; margin-inline:auto;
}
.foot .mark{width:96px; margin-bottom:18px;}
.foot-nom{
  font-family:var(--ff-display); font-size:22px; color:var(--encre) !important;
  margin-bottom:18px;
}
.foot p{font-size:14.5px; line-height:1.7; color:var(--encre-2); margin-bottom:10px;}
.foot-joindre{margin-top:14px;}
.foot a{color:var(--accent);}
/* .foot-credits a disparu le 15/08 avec la ligne de credits photographiques :
   plus aucune vue de tiers ne parait dans les deux pages. Voir foot.photos
   dans assets/site.js. */
.foot-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px;
  margin-top:clamp(34px,5vw,56px); padding-top:22px; border-top:1px solid var(--filet);
  font-size:12.5px; color:var(--encre-2);
}

/* ============================================================
   L'ECRAN D'ACCUEIL DU DOSSIER, 16/08

   « Reprendre la meme structure d'ecran d'accueil que sur la landing page :
   logo puis texte. Mettre le logo en haut de page », Philippe.

   IL REPREND LES CLASSES DU HERO, .hero-marque, .hero-logo, .hero-mot, et
   ses variables de cadrage : ce n'est pas une ressemblance, c'est le meme
   objet. Ce qu'il n'a pas, ce sont les 145svh et la sequence de defilement,
   parce qu'un dossier doit montrer son plan avant quatre ecrans, exigence du
   30/07 qu'un controle mesure. Le bandeau garde donc son 2,4:1.

   UNE HAUTEUR MINIMALE, ET ELLE N'EST PAS DECORATIVE. En 2,4:1, un telephone
   de 390 px donnerait un bandeau de 162 px : le monogramme seul en fait 110.
   Le cadre ne descend donc jamais sous 420 px, et sous 760 px il repasse en
   16:9 comme avant.
   ============================================================ */
.ouv{position:relative; isolation:isolate; background:var(--nuit);}
.ouv-media{position:relative;}
/* 2,8:1 DEPUIS LE 17/08, ET C'EST LE BUDGET DE DEFILEMENT QUI LE DECIDE.
   Le bandeau etait en 2,4:1, soit 600 px sur un ecran de 1440. L'article de
   presse ajoute une cinquieme section devant le formulaire de visite, et
   celui-ci doit rester a moins de 4,25 ecrans du haut de page : exigence du
   30/07, mesuree par un controle. En 2,4:1 il tombait a 4,29 ecrans.
   En 2,8:1 le bandeau fait 514 px et rend 86 px, ce qui remet le formulaire
   a 4,16 ecrans avec de la marge.

   IL Y TIENT SANS SE SERRER : sous l'en-tete, il faut 96 px de marge haute,
   160 pour le monogramme et son mot, une centaine pour le titre sur deux
   lignes et 47 en bas, soit environ 400 px. Et un bandeau plus large se lit
   MIEUX comme ce qu'il est, un ecran d'annonce et non une photographie de
   chapitre : « il annonce, il ne raconte pas ».

   La hauteur minimale reste : sur un telephone, en 16:9, 390 px de large ne
   donneraient que 219 px de haut quand le monogramme seul en fait 110. */
/* ------------------------------------------------------------------
   PIEGE TROUVE LE 17/08, ET C'EST LE MIROIR DE CELUI DU 29/07.

   Le README le dit dans un sens : « un max-height sur une figure qui porte
   un aspect-ratio ne recadre pas, il RETRECIT la figure ». Dans l'autre sens
   il est pire : un MIN-HEIGHT sur une figure qui porte un aspect-ratio ne
   grandit pas le cadre, il l'ELARGIT. Chrome garde le rapport et deduit la
   largeur de la hauteur imposee.

   Mesure : sur un telephone de 390 px, min-height 460 en 16:9 donnait une
   figure de 460 x 1,78 = 818 px, et TOUTE LA PAGE se retrouvait large de
   818 px pour une fenetre de 390. Le debordement ne se voyait pas, le body
   etant en overflow-x:clip, exactement comme les pastilles du carrousel le
   13/08. Sur une tablette de 768, la figure faisait 1 176 px.

   LA HAUTEUR EST DONC POSEE DIRECTEMENT, sans aspect-ratio : c'est la plus
   grande des deux, le plancher de 420 px et la largeur divisee par le
   rapport. Une seule variable porte le rapport, et le ratio en ligne pose
   par outils-build/figures.mjs est neutralise. La largeur reste 100 %, elle
   ne se deduit plus de rien.

   LE PLANCHER N'EST PAS DECORATIF : sous l'en-tete il faut 96 px de marge,
   160 pour le monogramme et son mot, une centaine pour le titre et 47 en
   bas. En 16:9, 390 px de large ne donneraient que 219 px de haut.
   ------------------------------------------------------------------ */
/* EN vw ET NON EN POURCENTAGE, et c'est la seconde moitie du piege. Un
   pourcentage de hauteur se resout contre le parent, or .ouv-media n'a pas de
   hauteur propre : la valeur devenait indefinie, la declaration tombait, et
   la figure reprenait le rapport natif de la photographie, 3:2. Mesure : le
   bandeau faisait 960 px au lieu de 514, et le formulaire de visite repartait
   a 4,62 ecrans. La section court d'un bord a l'autre, 100vw est donc sa
   largeur exacte.

   UN SEUL RAPPORT SUFFIT : sous 748 px de large, 100vw / 2,8 tombe sous le
   plancher de 420 px, qui prend alors le relais tout seul. Un second rapport
   pour le telephone serait du code mort. */
.ouv-media figure[data-photo]{
  aspect-ratio:auto !important;
  width:100%; height:max(420px, calc(100vw / 2.8));
  display:block; overflow:hidden;
}
/* LE MEME CADRAGE QUE LA PAGE 0, aux memes variables : c'est la continuite
   graphique demandee le 11/08 pour l'envoi par courriel. */
.ouv-media img{
  width:100%; height:100%; object-fit:cover;
  transform:translateX(var(--hero-dx)) scale(var(--hero-zoom));
  transform-origin:center;
}
/* ALLEGE COMME CELUI DU HERO, le 28/08. « Pour le dossier prive aussi il
   faut enlever le voile sombre, comme pour la landing », Thomas. Les deux
   voiles avaient diverge quelques heures, la premiere demande de Philippe ne
   visant que la page d'accueil ; ils se retrouvent ici.

   MEME PARTI, PAS LES MEMES NOMBRES, et c'est voulu. La landing pose un halo
   centre sur une colonne de texte centree, dans un ecran entier. Ici le
   bandeau fait 514 px de haut a 1440, le monogramme est cale EN HAUT et le
   titre EN BAS, une marge automatique les separant : un halo centre comme
   celui de la landing ne couvrirait ni l'un ni l'autre. Il est donc presque
   aussi haut que le bandeau.

   ET SURTOUT, CET ECRAN SE MESURE MAINTENANT. Il n'avait aucun controle de
   contraste : il portait le voile du hero A L'IDENTIQUE, et ce partage lui
   tenait lieu de garantie, la mesure ayant ete faite une fois pour les deux
   le 29/07. Le partage ayant cesse, la garantie empruntee tombait avec lui.
   Deux controles ont ete poses avant d'y toucher, sur les pixels rendus, et
   ce sont eux qui arbitrent ces valeurs : voir outils-verif/verifier.mjs,
   « dossier : contraste du nom » et « du titre ». */
.ouv-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 96% at 50% 50%,
      rgba(11,11,11,.30) 0%, rgba(11,11,11,.19) 50%, rgba(11,11,11,0) 84%),
    linear-gradient(180deg,
      rgba(11,11,11,.10) 0%, rgba(11,11,11,.13) 50%, rgba(11,11,11,.16) 100%);
}
.ouv-in{
  position:absolute; inset:0; z-index:2;
  padding:calc(var(--hdr-h) + clamp(20px,4vh,40px)) clamp(20px,6vw,72px) clamp(28px,5vh,52px);
  display:flex; flex-direction:column; align-items:center;
  text-align:center; color:var(--creme);
}
/* LE LOGO EN HAUT, LE TEXTE DESSOUS, comme sur la landing depuis le 15/08 :
   une marge automatique sous le monogramme pousse le titre au bas du cadre,
   et le blanc se partage tout seul. */
.ouv-col{
  width:var(--porte, min(520px, calc(.185 * var(--hero-zoom) * max(100vw, 150vh))));
  max-width:100%;
  height:100%; display:flex; flex-direction:column; align-items:center;
}
.ouv-col .hero-marque{margin-bottom:auto;}
.ouv-in h1{
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(24px,3.4vw,42px); line-height:1.2; letter-spacing:.01em;
  text-wrap:balance;
}
/* La signature de fin de dossier : elle ferme, elle n'annonce pas.
   TOUT Y EST SUR L'AXE, citation comprise. Le chapeau est en drapeau partout
   ailleurs parce qu'il ouvre un texte courant qui le suit ; ici il n'y a rien
   apres lui, et une citation calee a gauche sous un titre centre aurait donne
   deux axes pour trois lignes. */
.signature{padding-top:clamp(48px,6vw,84px);}
.signature .chap-head{text-align:center;}
.signature .chap-text .lede{text-align:center; max-width:44ch; margin-inline:auto;}

/* ============================================================
   LES DEUX PAGES DE TEXTE, mentions-legales.html et confidentialite.html

   Ouvertes le 15/08 sur la question de Philippe, « mentions legales et
   confidentialite : pas de liens ? ». Elles n'ont ni hero, ni photographie,
   ni ilot : une definition par rubrique, sur la mesure de lecture du reste
   du site. L'en-tete y est visible d'emblee, comme sur le dossier.
   ============================================================ */
.legal{padding-top:calc(var(--hdr-h) + clamp(40px,6vw,80px));}
.legal .chap-head{text-align:center;}
.legal-maj{
  text-align:center; color:var(--encre-2); font-size:13px;
  margin-top:clamp(18px,2.4vw,28px);
}
.legal-intro{
  max-width:56ch; margin:clamp(34px,4vw,52px) auto 0;
  color:var(--texte); text-align:justify; hyphens:auto; hyphenate-limit-chars:7 4 3;
}
.legal-liste{
  max-width:56ch; margin:clamp(40px,5vw,64px) auto 0;
  border-top:1px solid var(--filet);
}
.legal-liste dt{
  margin-top:clamp(26px,3vw,38px);
  font-family:var(--ff-ui); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--encre-2);
}
.legal-liste dd{
  margin:12px 0 clamp(26px,3vw,38px);
  color:var(--texte); text-align:justify; hyphens:auto; hyphenate-limit-chars:7 4 3;
  padding-bottom:clamp(26px,3vw,38px); border-bottom:1px solid var(--filet);
}
.legal-liste dd:last-child{border-bottom:0;}
/* LE BOUTON DE RETRAIT DU CONSENTEMENT, 08/09. Il occupe une seconde
   definition de la rubrique « Cookies et traceurs » : le texte ne pouvait
   pas le contenir, son innerHTML etant reecrit a chaque bascule de langue.
   La premiere definition perd donc son filet et sa marge basse, la seconde
   les reprend, pour que la rubrique en dessine un seul et garde la meme
   hauteur qu'avant. Le bouton reprend .btn .btn-line de la page, aucun
   style ne lui est invente. */
.legal-liste dd.legal-suite{padding-bottom:0; border-bottom:0; margin-bottom:18px;}
.legal-liste dd.legal-action{
  margin-top:0; text-align:left;
  padding-bottom:clamp(26px,3vw,38px); border-bottom:1px solid var(--filet);
}
.legal-liste a{color:var(--accent);}
/* Ce qui reste a completer se voit : c'est une page de mentions legales,
   une ligne manquante n'y est pas un detail de mise en page. */
.legal-liste dd b{font-weight:500; color:var(--encre);}
@media (max-width:520px){
  .legal-intro,.legal-liste dd{text-align:left; hyphens:manual;}
}

/* ============================================================
   BARRE D'ANCRES DU DOSSIER
   Quatre jalons sous l'en-tête : le plan cesse d'être le seul chemin, et le
   formulaire de visite reste toujours à un clic. C'était le reproche du
   30/07, « il faut scroller toutes les pièces pour arriver au formulaire ».
   ============================================================ */
.jalons{
  position:sticky; top:var(--hdr-h); z-index:80;
  background:rgba(243,243,242,.94);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--filet);
}
.jalons-in{display:flex; gap:clamp(18px,3.4vw,44px); overflow-x:auto; scrollbar-width:none;}
.jalons-in::-webkit-scrollbar{display:none;}
.jalons a{
  flex:none; text-decoration:none; padding:16px 0;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--encre-2); border-bottom:1px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.jalons a:hover{color:var(--encre); border-color:var(--accent);}
@media print{ .jalons{display:none;} }

/* ============================================================
   ANNEXE REPLIEE
   Les quarante et une notices tiennent quarante écrans. <details> les garde
   dans le DOM, donc lisibles par les moteurs et sans JavaScript, sans
   allonger la page pour autant.
   ============================================================ */
.annexe{border-top:1px solid var(--filet); border-bottom:1px solid var(--filet);}
.annexe > summary{
  display:flex; align-items:center; gap:clamp(14px,2.4vw,28px);
  padding-block:clamp(26px,3.4vw,42px); cursor:pointer; list-style:none;
}
.annexe > summary::-webkit-details-marker{display:none;}
.annexe-titre{
  font-family:var(--ff-display); font-size:clamp(22px,2.8vw,34px);
  line-height:1.15; flex:1; margin:0; font-weight:inherit;
}
/* Le chiffre romain de l'annexe. Il est dans le summary, donc hors de
   .chap-head : il lui faut sa propre regle, calee sur celle des trois
   autres sections. */
.annexe > summary .num{
  flex:none; font-family:var(--ff-display); font-size:19px;
  letter-spacing:.26em; color:var(--accent);
}
.annexe > summary i{
  flex:none; width:34px; height:34px; position:relative;
  border:1px solid var(--filet-accent); transition:background .25s var(--ease);
}
.annexe > summary i::before,.annexe > summary i::after{
  content:""; position:absolute; inset:50% 9px auto 9px; height:1px;
  background:var(--accent); transition:transform .3s var(--ease);
}
.annexe > summary i::after{transform:rotate(90deg);}
.annexe[open] > summary i::after{transform:rotate(0deg);}
.annexe > summary:hover i{background:rgba(85,88,92,.08);}
.annexe > summary:focus-visible{outline:2px solid var(--accent); outline-offset:4px;}
.annexe[open] > summary{border-bottom:1px solid var(--filet);}

/* ============================================================
   PLAN INTERACTIF (page dossier)
   ============================================================ */
.plan-app{margin-top:clamp(24px,3vw,40px);}
.plan-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:clamp(18px,2.4vw,28px);
}
.levels{display:flex; border:1px solid var(--filet);}
.levels button{
  background:none; border:0; cursor:pointer; padding:12px 22px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--encre-2);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.levels button + button{border-left:1px solid var(--filet);}
.levels button[aria-pressed="true"]{background:var(--encre); color:var(--creme);}
.plan-hint{font-size:12.5px; color:var(--encre-2);}

/* Panne d'ilot rendue visible : voir le script en pied de page. Une page qui
   parait normale mais ne repond pas coute bien plus cher a diagnostiquer
   qu'un message franc. */
.ilot-absent{display:none;}
html.ilots-absents .ilot-absent{
  display:block; max-width:var(--measure); margin-bottom:clamp(18px,2.4vw,28px);
  padding:16px 20px; border:1px solid var(--filet-accent);
  background:var(--creme-2); font-size:15px; line-height:1.65; color:var(--texte);
}

/* Le raccourci de sortie du plan ne se voit plus : il ne servait à rien à la
   souris, la barre d'ancres du haut de page menant déjà aux spécifications.
   Au clavier il reste indispensable, le SVG comptant quarante arrêts de
   tabulation. Même traitement que le lien d'évitement du haut de page :
   retiré de l'écran, ramené par le focus.
   PAS de display:none ni de visibility:hidden : l'un comme l'autre le
   sortiraient de l'ordre de tabulation et il ne pourrait plus jamais
   recevoir le focus qui doit le révéler. */
.plan-skip{
  position:absolute; left:-9999px; top:auto;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); text-decoration:none;
  border:1px solid var(--filet-accent); background:var(--creme);
  padding:10px 18px;
}
.plan-skip:focus{position:static; display:inline-block; margin-bottom:20px;}

.plan-grid{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr);
  gap:clamp(24px,3.4vw,48px); align-items:start;
}
@media (max-width:1000px){ .plan-grid{grid-template-columns:1fr;} }

.plan-stage{background:var(--creme-2); border:1px solid var(--filet); padding:clamp(10px,1.6vw,22px);}
.plan-svg{width:100%; height:auto; display:block;}

/* --- le dessin : le trait du livre, rien d'autre --- */
.pl-line{fill:var(--encre-2); opacity:.5;}
.pl-wall{fill:var(--encre); opacity:.85;}
/* Les zones hachurées du rez-de-jardin, le vide sur le patio et la terrasse.
   Elles n'avaient AUCUNE règle : un <rect> sans fill est noir par défaut, et
   le plan portait donc deux grands aplats d'encre au milieu. Le motif était
   pourtant défini dans le SVG depuis le début, il n'était simplement jamais
   appelé. */
.pl-void{fill:url(#vdg-hatch); opacity:.9;}
.floor{display:none;}
.floor.on{display:block;}

/* --- les zones cliquables, de deux natures ---
   Celles qui portent data-boite viennent des exports du client : leur
   rectangle a été posé à la main sur le dessin et suit donc les murs. On peut
   les PEINDRE au survol, la pièce s'éclaire vraiment.
   Les autres sont des cellules de Voronoi, un repli géométrique qui ne suit
   pas les cloisons : celles-là ne sont jamais peintes, elles traverseraient
   les murs. Le retour visuel s'y limite à la pastille et au nom.
   Voir outils-plan/zones.py et outils-plan/boites.py. */
.rm .hit{fill:transparent; stroke:none; cursor:pointer;}
.rm[data-boite] .hit{transition:fill .2s var(--ease);}
.rm[data-boite]:hover .hit{fill:rgba(85,88,92,.07);}
.rm[data-boite].active .hit{fill:rgba(85,88,92,.10);}
.rm[data-boite].locked .hit{fill:rgba(85,88,92,.16);}
.rm[data-boite]:focus-visible .hit{fill:rgba(85,88,92,.14);}
.rm:focus{outline:none;}

/* --- les pastilles, comme dans le livre : la lettre et la surface ---
   Le nom, lui, n'apparaît que pour la pièce désignée : quarante et un noms
   affichés en permanence, c'était ce qui rendait le plan illisible. */
/* Le RAYON est pose en attribut par PlanInteractif.jsx, jamais ici : les
   proprietes geometriques en CSS ne sont soutenues qu'a partir de Firefox 130
   et de Safari 16, et ailleurs un rayon declare en CSS vaut zero. Les
   pastilles disparaissaient. Les etats passent donc par transform, fill et
   stroke, soutenus partout. */
.pin{
  fill:var(--creme); stroke:var(--accent); stroke-width:1;
  transform-box:fill-box; transform-origin:center;
  transition:fill .18s var(--ease), stroke-width .18s var(--ease),
             transform .18s var(--ease);
}
.pinl{
  font-family:var(--ff-display); font-size:14px; fill:var(--accent);
  text-anchor:middle; dominant-baseline:central; pointer-events:none;
  transition:fill .18s var(--ease);
}
.parea{
  font-family:var(--ff-sans); font-size:11px; fill:var(--encre-2); opacity:.8;
  text-anchor:middle; dominant-baseline:middle; pointer-events:none;
  transition:opacity .18s var(--ease), fill .18s var(--ease);
}
.rm:hover .pin{stroke-width:1.6;}
.rm.active .pin{fill:var(--accent); stroke:var(--accent); transform:scale(1.16);}
.rm.active .pinl{fill:var(--creme);}
.rm.active .parea{fill:var(--accent); opacity:1;}
/* La pièce VERROUILLÉE garde sa marque même quand la souris est ailleurs :
   depuis le 03/08 le plan continue de répondre au curseur pendant un
   verrouillage, il faut donc pouvoir retrouver d'un coup d'œil celle que le
   cartouche tient à l'écran. Un anneau plutôt qu'un aplat, pour ne pas la
   confondre avec la pièce survolée. */
.rm.locked .pin{stroke:var(--encre); stroke-width:2.4;}
.rm.locked:not(.active) .pinl{fill:var(--encre);}
/* L'anneau de focus d'une pièce se pose sur sa pastille : un <g> SVG ne rend
   pas outline, et la cellule cliquable n'est jamais peinte. Le nom de la pièce
   apparaît en même temps, ce qui rend la position au clavier sans ambiguïté. */
.rm:focus-visible .pin{stroke:var(--encre); stroke-width:3; transform:scale(1.24);}

/* --- le nom de la pièce désignée, posé à côté de sa pastille --- */
.rnom{
  font-family:var(--ff-display); font-size:19px; fill:var(--encre);
  dominant-baseline:middle; pointer-events:none;
  paint-order:stroke; stroke:var(--creme-2); stroke-width:4px; stroke-linejoin:round;
}
.rtrait{stroke:var(--accent); stroke-width:1; pointer-events:none;}

/* --- le cartouche --- */
.plan-card{
  position:sticky; top:calc(var(--hdr-h) + 62px);
  background:var(--creme-2); border:1px solid var(--filet);
  max-height:calc(100svh - var(--hdr-h) - 80px); overflow-y:auto;
}
@media (max-width:1000px){ .plan-card{position:static; max-height:none;} }
.plan-card.verrouille{border-color:var(--filet-accent); box-shadow:inset 0 0 0 1px rgba(85,88,92,.14);}

.pc-x{
  position:absolute; right:12px; top:12px; z-index:3;
  width:34px; height:34px; display:grid; place-items:center; cursor:pointer;
  background:rgba(243,243,242,.94); border:1px solid var(--filet);
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.pc-x:hover{background:var(--encre); border-color:var(--encre);}
.pc-x svg{width:11px; fill:none; stroke:var(--encre); stroke-width:1.6;}
.pc-x:hover svg{stroke:var(--creme);}

/* La photographie du cartouche. Le conteneur n'est plus un bouton : les
   fleches en sont, et un bouton dans un bouton n'est pas du HTML valide. */
.pc-media{
  width:100%; background:var(--creme-3);
  aspect-ratio:4/3; overflow:hidden; position:relative;
}
.pc-voir{
  display:block; width:100%; height:100%; padding:0; border:0; background:none;
  cursor:zoom-in;
}
.pc-media img{width:100%; height:100%; object-fit:cover; transition:opacity .3s var(--ease);}
.pc-voir:hover img{opacity:.9;}

/* Les fleches de parcours. Elles sont visibles en permanence, et non
   revelees au survol : le visiteur doit voir SANS CHERCHER qu'une piece a
   plusieurs vues. Discretes au repos, franches au survol du cartouche. */
.pc-fleche{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:52px; display:grid; place-items:center;
  padding:0; border:0; cursor:pointer;
  background:rgba(11,11,11,.42); color:var(--creme);
  opacity:.72; transition:opacity .25s var(--ease), background-color .2s var(--ease);
}
.pc-fleche.prec{left:0;}
.pc-fleche.suiv{right:0;}
.pc-fleche svg{width:11px; fill:none; stroke:currentColor; stroke-width:1.4;}
.plan-card:hover .pc-fleche,
.pc-fleche:focus-visible{opacity:1;}
.pc-fleche:hover{background:rgba(11,11,11,.78); opacity:1;}
/* Au doigt, 38 px de large sont trop justes : la cible passe à 46 sur 60. */
@media (hover:none){ .pc-fleche{width:46px; height:60px; opacity:.82;} }

.pc-compte{
  position:absolute; left:12px; bottom:12px;
  background:rgba(11,11,11,.62); color:var(--creme); padding:6px 11px;
}
.pc-compte i{font-style:normal; opacity:.55; margin:0 2px;}

.pc-body{padding:clamp(20px,2.4vw,30px);}
.pc-top{display:flex; align-items:center; gap:12px; margin-bottom:14px; min-height:30px;}
.pc-letter{
  width:30px; height:30px; flex:none; display:grid; place-items:center;
  border:1px solid var(--filet-accent); color:var(--accent);
  font-family:var(--ff-display); font-size:14px;
}
.pc-body h3{font-size:clamp(22px,2.3vw,29px);}
.pc-area{margin-top:8px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent);}
.pc-sub{margin-top:14px; font-family:var(--ff-display); font-size:19px; font-style:italic; color:var(--encre-2);}
.pc-desc{margin-top:16px; display:flex; flex-direction:column; gap:1.1em; font-size:15.5px; line-height:1.72; color:var(--texte);}
.pc-aph{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--filet);
  font-family:var(--ff-display); font-style:italic; font-size:19px; line-height:1.35; color:var(--encre);
}
.pc-galerie{display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:6px; margin-top:22px;}
.pc-galerie button{
  padding:0; border:1px solid transparent; background:var(--creme-3); cursor:pointer;
  aspect-ratio:1; overflow:hidden;
  transition:border-color .2s var(--ease), opacity .2s var(--ease);
  opacity:.62;
}
.pc-galerie button:hover{border-color:var(--filet-accent); opacity:1;}
/* La vignette designee : c'est elle qu'on voit en grand au-dessus. */
.pc-galerie button.on{border-color:var(--accent); opacity:1;}
.pc-galerie img{width:100%; height:100%; object-fit:cover;}

/* ============================================================
   LE CARROUSEL
   Une seule implementation, src/composants/Carrousel.jsx, pour le cartouche
   du plan et les trois carrousels de la landing. Les classes sont doublees :
   « car- » porte le squelette, « pc- » ci-dessus porte la peau du cartouche,
   « car-plein » ci-dessous celle de la landing.

   Le composant enveloppe desormais l'image dans un element picture, la ou le
   cartouche la posait nue : sans ces deux lignes, cet element intermediaire,
   qui est en ligne par defaut, casserait le remplissage du cadre.
   ============================================================ */
.car-media picture{display:block; width:100%; height:100%;}
.car-media picture img{width:100%; height:100%; object-fit:cover;}

/* La bande sans JavaScript. Le conteneur porte des figures ordinaires tant
   que l'ilot n'a pas demarre : on les met simplement cote a cote. Une fois
   monte, l'ilot pose data-carrousel="ok" et la grille se retire. */
[data-carrousel]{
  display:grid; gap:clamp(6px,1vw,14px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-block:clamp(38px,5vw,76px);
}
[data-carrousel="ok"]{display:block;}

/* DEUX FORMES, ET C'EST LE RECADRAGE QUI LES SEPARE.

   « car-plein » court d'un bord a l'autre, en 1,85:1 et en cover, comme les
   autres pleines largeurs de la page : c'est le « carrousel plein ecran »
   demande pour Le Perigord Noir, et il ne tient que parce que ses cinq vues
   sont toutes horizontales.

   « car-contenu » tient dans la largeur de contenu, en 3:2 et en CONTAIN :
   il montre chaque image ENTIERE. Des qu'un carrousel melange les
   orientations, et Le decor en melange deux sur quatre, c'est la seule
   forme honnete. Recadree en 1,85:1, la rosace doree du seuil, verticale et
   dont le sujet est au plafond, ne montrait plus qu'un fragment de son
   centre. Meme erreur que le 10/08 en bande de deux, meme remede.

   TROISIEME FORME, LE 13/08 : « car-vertical », pour le premier groupe du
   Decor. Ses six vues sont toutes en 2:3, au pixel pres : leur donner un
   cadre en 2:3 ne recadre rien du tout et leur laisse a toutes la meme
   taille, ce que Philippe demandait le 12/08. En 1,85:1 elles perdaient les
   deux tiers de leur hauteur, et la planche de simulation le montrait sur
   les six. C'est le cadre qui suit les images, et non l'inverse : elles
   partagent un rapport, c'est ce rapport qui fait le cadre.
   C'est la HAUTEUR D'ECRAN qui le regle, pas la largeur de la page : un
   portrait cale sur la largeur deborderait toujours en hauteur. */
.car-plein .car-media,
.car-vertical .car-media,
.car-contenu .car-media{
  position:relative; width:100%; overflow:hidden; background:var(--creme-3);
}
.car-plein .car-media{aspect-ratio:1.85/1;}
.car-contenu{max-width:var(--maxw-wide); margin-inline:auto; padding-inline:clamp(20px,5vw,64px);}
.car-contenu .car-media{aspect-ratio:3/2;}
.car-contenu .car-media picture img{object-fit:contain;}
/* PLUS DE PLACE DEPUIS LE 15/08, ENCORE PLUS DEPUIS LE 18/08. « Au carrousel
   de photos verticales, lui faire prendre plus de place dans la page »,
   Philippe le 15 ; « carrousel vertical a agrandir », le 18. La hauteur est
   passee de 74 a 86, puis de 86 a 94 svh. Le cadre etant regle par la HAUTEUR
   et non par la largeur, c'est bien cette valeur-la qu'il faut toucher, et
   une seule : un portrait cale sur la largeur deborderait toujours en
   hauteur. Au-dela de 94 le pied de l'image sort de la fenetre, mesure aux
   quatre largeurs de controle. */
.car-vertical .car-media{
  aspect-ratio:2/3;
  width:min(92vw, calc(94svh * 2 / 3));
  margin-inline:auto;
}

/* L'EAU, DEUXIEME CHAPITRE A CADRE VERTICAL, 18/08. « Les photographies des
   nenuphars, du poisson fontaine sont zoomees et tronquees, les remettre a la
   bonne dimension », Philippe. Ses six vues sont TOUTES en 3:4 : elles etaient
   posees dans le cadre 1,85:1 de « car-plein », en cover et centre, et il
   n'en restait que deux cinquiemes de la hauteur. La fontaine au poisson et
   les trois nenuphars perdaient leur jet et leur corolle.

   Meme remede qu'au Decor le 13/08, et meme raison : c'est le cadre qui suit
   les images, non l'inverse. Rapport different parce que leur rapport l'est,
   3:4 et non 2:3. La regle est portee par #eau, donc insensible a la hauteur
   du Decor. */
#eau .car-vertical .car-media{
  aspect-ratio:3/4;
  width:min(92vw, calc(94svh * 3 / 4));
}
/* Sur un telephone, une image de cinema devient une fente : le cadre
   respire. */
@media (max-width:760px){ .car-plein .car-media{aspect-ratio:3/2;} }

.car-plein .car-voir,
.car-vertical .car-voir,
.car-contenu .car-voir{
  display:block; width:100%; height:100%; padding:0; border:0; background:none;
  cursor:zoom-in;
}
/* La region est focalisable pour que les fleches du clavier y tournent :
   il faut donc qu'on voie ou l'on est. */
.car .car-media:focus-visible{outline:2px solid var(--or); outline-offset:-4px;}

.car .car-fleche{
  position:absolute; top:50%; transform:translateY(-50%);
  width:clamp(44px,4vw,58px); height:clamp(62px,7vw,82px);
  display:grid; place-items:center; padding:0; border:0; cursor:pointer;
  background:rgba(11,11,11,.38); color:var(--creme);
  opacity:.8; transition:opacity .25s var(--ease), background-color .2s var(--ease);
}
.car .car-fleche.prec{left:0;}
.car .car-fleche.suiv{right:0;}
.car .car-fleche svg{width:13px; fill:none; stroke:currentColor; stroke-width:1.4;}
.car .car-media:hover .car-fleche,
.car .car-fleche:focus-visible{opacity:1;}
.car .car-fleche:hover{background:rgba(11,11,11,.76); opacity:1;}

.car .car-compte{
  position:absolute; left:clamp(12px,1.6vw,22px); bottom:clamp(12px,1.6vw,22px);
  background:rgba(11,11,11,.58); color:var(--creme); padding:7px 12px;
}
.car .car-compte i{font-style:normal; opacity:.55; margin:0 2px;}

/* Les pastilles de position. Elles SITUENT, elles ne comparent pas : c'est
   la bande de vignettes du cartouche du plan qui compare. Voir le commentaire
   de src/composants/Carrousel.jsx, qui explique pourquoi la landing n'a pas
   de vignettes. */
/* LES PASTILLES REVIENNENT A LA LIGNE. Le 13/08, « La Maison » en compte
   quatorze : a 25 px de zone tactile et 10 px d'ecart, la rangee mesurait
   480 px et debordait un telephone de 390. Le debordement ne se voyait
   pas, la page etant en overflow-x:clip, mais la fenetre de mise en page
   passait a 435 px et TOUTE la page se retrouvait plus large que l'ecran.
   Un carrousel ne doit pas avoir de nombre maximal de vues. */
.car-points{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:16px;}
.car-points button{
  padding:9px; border:0; background:none; cursor:pointer; line-height:0;
}
.car-points i{
  display:block; width:7px; height:7px; border-radius:50%;
  background:var(--filet-accent);
  transition:background-color .2s var(--ease), transform .2s var(--ease);
}
.car-points button:hover i{background:var(--accent);}
.car-points button.on i{background:var(--accent); transform:scale(1.35);}

/* ============================================================
   NOTICES EN TEXTE SUIVI (page dossier)
   Generees par outils-build/notices.mjs depuis assets/plan.js, dans les
   deux langues. Le choix se fait ICI, en CSS, et non en JavaScript :
   sans script la page doit garder son texte.
   ============================================================ */
.notices{display:none;}
html[data-lang="fr"] .notices[data-notices="fr"],
html[data-lang="en"] .notices[data-notices="en"]{display:block;}
/* aucun data-lang encore pose, par exemple sans JavaScript : le francais
   s'affiche, il est la langue de reference du dossier */
html:not([data-lang]) .notices[data-notices="fr"]{display:block;}

.notices-niveau{
  margin:clamp(48px,6vw,84px) 0 clamp(22px,3vw,34px);
  padding-bottom:14px; border-bottom:1px solid var(--filet); color:var(--accent);
}
.notices-niveau:first-child{margin-top:0;}
.notice{
  max-width:var(--measure); display:flex; flex-direction:column; gap:1.15em;
  padding-block:clamp(28px,3.6vw,46px); border-bottom:1px solid var(--filet);
}
.notice p{color:var(--texte);}
.notice-tete{display:flex; align-items:center; flex-wrap:wrap; gap:14px;}
.notice-l{
  font-family:var(--ff-display); font-size:15px; color:var(--accent);
  border:1px solid var(--filet-accent); width:30px; height:30px;
  display:grid; place-items:center; flex:none;
}
.notice-tete h3{font-size:clamp(22px,2.5vw,31px);}
.notice-a{margin-left:auto; color:var(--accent);}
/* La première vue de la pièce accompagne sa notice : sans JavaScript, c'est
   la seule photographie que le dossier montre, le cartouche du plan étant
   monté par React. */
.notice-photo{margin-block:.35em;}
.notice-photo img{width:100%;}
.notice-s{font-family:var(--ff-display); font-style:italic; font-size:21px; color:var(--encre-2); margin-top:-.5em;}
.notice-aph{font-family:var(--ff-display); font-style:italic; font-size:20px; color:var(--encre);}

/* ============================================================
   SPECIFICATIONS ET BLOCS DU DOSSIER
   ============================================================ */
/* SIX COLONNES DEPUIS LE 14/08, et non plus cinq. Sa reecriture porte le
   tableau a onze lignes : a 255 px de colonne minimale la grille en faisait
   cinq, donc TROIS rangees de subgrid, et une rangee coute trois cents
   pixels quelle que soit la longueur des textes. A 215 px elle en fait six,
   et onze lignes tiennent en deux rangees. Mesure le 14/08 : 811 px de
   grille au lieu de 925, et le formulaire de visite remonte d'autant. */
.specs{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:1px; background:var(--creme); margin-top:clamp(26px,3.4vw,44px);
}
/* LE FILET EST SUR LA CARTE, PLUS SUR LE FOND. Dix lignes sur cinq colonnes
   faisaient un rectangle plein, et il suffisait de peindre le fond de la
   grille pour que les separateurs apparaissent dans les gouttieres de un
   pixel. Onze lignes sur six colonnes laissent une cellule vide, et ce fond
   s'y voyait en aplat gris. Un contour sur chaque carte ne peint que les
   cartes : les separateurs restent a un pixel, les deux contours voisins se
   recouvrant dans la gouttiere, et la rangee incomplete s'arrete
   proprement. Le contour ne prend pas de place, la hauteur ne bouge pas. */
.spec{outline:1px solid var(--filet);}
.spec{
  background:var(--creme); padding:clamp(18px,2.1vw,26px);
  display:grid; grid-template-rows:subgrid; grid-row:span 3; gap:10px; align-content:start;
}
.spec .v{font-family:var(--ff-display); font-size:clamp(19px,2vw,24px); line-height:1.25;}
.spec .s{font-size:14px; line-height:1.65; color:var(--encre-2);}
@supports not (grid-template-rows:subgrid){
  .spec{display:flex; flex-direction:column; gap:10px;}
}
.specs-note{margin-top:16px; font-size:13.5px; line-height:1.6; color:var(--encre-2); max-width:82ch;}
.specs-note + .specs-note{margin-top:6px;}
.specs-note b{font-weight:500; color:var(--texte);}
/* L'appel de note ne pousse pas la ligne du tableau. */
.spec .s sup{font-size:.72em; vertical-align:super; line-height:0;}

.livre{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(20px,3vw,40px); padding:clamp(24px,3vw,38px);
  border:1px solid var(--filet); background:var(--creme-2);
  margin-top:clamp(26px,3.4vw,44px);
}
@media (max-width:760px){ .livre{grid-template-columns:1fr;} }
.livre h3{font-size:clamp(22px,2.4vw,29px);}
.livre p{margin-top:10px; color:var(--encre-2); font-size:15px; max-width:48ch;}
.livre .meta{margin-top:8px;}
/* Largeur fixe, et non fluide : c'est elle que reprend le cadre livre-mini
   pour choisir sa variante. Les faire diverger, c'est servir une image deux
   fois trop large ou trop petite. */
.livre-couv{width:210px; border:1px solid var(--filet);}
/* DEUX BOUTONS DEPUIS LE 18/08 : lire l'article dans la page, ou emporter le
   PDF. Ils occupent la troisieme colonne de la grille du cartouche, celle qui
   ne portait qu'un bouton : le conteneur la remplit, les deux boutons s'y
   empilent et gardent la meme largeur, sans quoi le second paraitrait cadet
   du premier alors qu'il ne l'est pas. Sur telephone la grille passe a une
   colonne et ils s'alignent a gauche avec le reste. */
.presse-actions{display:grid; gap:10px; justify-items:stretch;}
.presse-actions .btn{text-align:center;}
@media (max-width:760px){ .presse-actions{justify-items:start;} }
/* ------------------------------------------------------------------
   LA PRESSE EN PARLE, 17/08

   La page d'ouverture de l'article prend trente pixels de plus que la
   couverture du livre : c'est une page A4 et non un carre, et son titre doit
   se reconnaitre. La valeur est la meme que le sizes du cadre « presse »
   dans outils-build/picture.mjs. LES FAIRE DIVERGER, C'EST SERVIR UNE IMAGE
   DEUX FOIS TROP LARGE OU TROP PETITE.

   Le chapeau est cite du magazine : il est en italique, sur la mesure de
   lecture, et un filet le tient a gauche. C'est le seul endroit des deux
   pages ou du texte n'est pas sur l'axe, et c'est ce que fait une citation :
   elle se detache de la voix de la page.
   ------------------------------------------------------------------ */
.presse-couv{width:210px;}
@media (max-width:760px){ .presse-couv{margin-inline:auto;} }
/* Le chapeau vit DANS le cartouche : c'est sa hauteur qui decidait de la
   profondeur du formulaire de visite. Voir le commentaire du HTML. */
.presse-chapeau{
  margin-top:14px; padding-left:clamp(14px,1.6vw,20px);
  border-left:1px solid var(--filet-accent);
}
.presse-chapeau p{
  font-family:var(--ff-display); font-style:italic; font-weight:300;
  font-size:clamp(17px,1.7vw,21px); line-height:1.42; color:var(--encre);
}
/* La reference du numero : elle date et signe, elle ne se lit pas d'abord. */
/* 64 signes et non 48 : .livre p est reglee pour du texte a 15 px, celle-ci
   est a 14 et se retrouvait coupee au tiers de la colonne. La mesure suit le
   corps, elle ne se herite pas. */
/* LE SELECTEUR PORTE DEUX CLASSES, et c'est necessaire : « .livre p » regle
   deja une mesure de 48 signes pour du texte a 15 px, et il est plus
   specifique qu'une classe seule. Ecrite « .presse-ref », la regle etait
   ignoree et la reference se coupait au tiers de la colonne. */
.presse-bloc .presse-ref{font-size:14px; margin-top:12px; max-width:64ch;}
/* LE CARTOUCHE DE PRESSE EST PLUS SERRE QUE CELUI DU LIVRE, et ce n'est pas
   un choix graphique : c'est le budget de defilement. Le formulaire de visite
   doit rester a moins de 4,25 ecrans du haut de page, exigence du 30/07 qu'un
   controle mesure, et cette section est la cinquieme a passer devant lui.
   Chaque valeur ci-dessous a ete prise sur une mesure, pas devinee. */
.presse-bloc{padding:clamp(20px,2.2vw,28px); margin-top:clamp(20px,2.4vw,32px);}
#presse{padding-bottom:clamp(34px,4vw,52px);}
/* La couverture telecharge le livre, comme le bouton. Le lien est un bloc
   pour que la grille du bloc livre le traite comme la figure qu'il enveloppe. */
.livre-lien{display:block; text-decoration:none; cursor:pointer;}
.livre-lien .livre-couv{transition:border-color .25s var(--ease), opacity .25s var(--ease);}
.livre-lien:hover .livre-couv{border-color:var(--accent); opacity:.92;}
@media (max-width:760px){ .livre-couv{margin-inline:auto;} }

/* ------------------------------------------------------------------
   .contact A DISPARU LE 17/08 avec le bloc « Nous joindre » du dossier :
   « le seul moyen de contacter doit etre le formulaire », Thomas. Il portait
   un courriel et un numero de telephone, chacun sur sa ligne, plus la
   situation du bien. Seule celle-ci reste, et elle n'a plus besoin d'un
   cartouche : c'est une phrase de plus sous le texte, en corps secondaire,
   comme les notes des specifications. Elle dit ou se trouve la maison, pas
   comment joindre quelqu'un.
   ------------------------------------------------------------------ */
.visit-lieu{
  margin-top:clamp(20px,2.4vw,30px);
  font-size:14px; line-height:1.6; color:var(--encre-2); max-width:52ch;
}

/* ============================================================
   VISIONNEUSE
   ============================================================ */
.vsn{
  position:fixed; inset:0; z-index:300; background:rgba(11,11,11,.96);
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  gap:clamp(6px,2vw,20px); padding:clamp(12px,3vw,40px);
  animation:vsn-in .25s var(--ease);
}
@keyframes vsn-in{from{opacity:0} to{opacity:1}}
.vsn-fig{
  grid-column:2; display:flex; flex-direction:column; align-items:center; gap:16px;
  max-height:100%; min-width:0;
}
.vsn-fig picture{display:flex; min-height:0;}
.vsn-fig img{max-width:100%; max-height:calc(100svh - 160px); width:auto; object-fit:contain;}
.vsn-fig figcaption{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px;
  text-align:center; color:rgba(245,244,241,.72); font-size:13.5px;
}
.vsn-rang{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--or-clair); font-variant-numeric:tabular-nums;
}
.vsn-x{
  position:absolute; right:clamp(12px,3vw,30px); top:clamp(12px,3vw,30px); z-index:2;
  width:42px; height:42px; display:grid; place-items:center; cursor:pointer;
  background:none; border:1px solid rgba(245,244,241,.28);
  transition:background .2s var(--ease);
}
.vsn-x:hover{background:rgba(245,244,241,.14);}
.vsn-x svg{width:13px; fill:none; stroke:var(--creme); stroke-width:1.6;}
.vsn-nav{
  width:clamp(38px,5vw,54px); height:clamp(38px,5vw,54px);
  display:grid; place-items:center; cursor:pointer;
  background:none; border:1px solid rgba(245,244,241,.2);
  transition:background .2s var(--ease);
}
.vsn-nav:hover{background:rgba(245,244,241,.14);}
.vsn-nav svg{width:11px; fill:none; stroke:var(--creme); stroke-width:1.5;}
.vsn-nav.prec{grid-column:1;}
.vsn-nav.suiv{grid-column:3;}

/* ============================================================
   LE LECTEUR DU FILM
   Une fenêtre presque pleine, ouverte par le bouton du hero. Même fond et
   même croix que la visionneuse : ce sont deux façons de regarder en grand,
   elles doivent se ressembler.

   Le cadre suit le format du film, 16:9, et se plafonne à la fois en
   largeur et en hauteur : sans le second plafond, un écran large et bas
   donnerait une image dont la barre de lecture passerait sous le pli.
   ============================================================ */
/* Fond OPAQUE, et non presque : la visionneuse laisse volontairement
   deviner la page derrière une photographie, mais derrière un film cette
   transparence fait paraître le hero au travers des bandes noires, ce qui
   se lit comme une superposition ratée. Mesuré sur téléphone, où les bandes
   sont hautes. */
.lct{
  position:fixed; inset:0; z-index:300; background:var(--nuit);
  display:grid; place-items:center; padding:clamp(12px,3vw,40px);
  animation:vsn-in .25s var(--ease);
}
.lct-cadre{
  position:relative; width:min(94vw, calc((94svh - 64px) * 16 / 9));
  max-width:1720px; background:#000;
}
.lct-video{display:block; width:100%; aspect-ratio:16/9; cursor:pointer;}

.lct-x{
  position:absolute; right:clamp(12px,3vw,30px); top:clamp(12px,3vw,30px); z-index:2;
  width:42px; height:42px; display:grid; place-items:center; cursor:pointer;
  background:rgba(11,11,11,.5); border:1px solid rgba(245,244,241,.28);
  transition:background .2s var(--ease);
}
.lct-x:hover{background:rgba(245,244,241,.18);}
.lct-x svg{width:13px; fill:none; stroke:var(--creme); stroke-width:1.6;}

/* La barre reste visible en permanence : elle porte la durée, qui est une
   information, et non seulement des commandes. */
.lct-barre{
  display:flex; align-items:center; gap:clamp(10px,1.6vw,18px);
  padding:14px clamp(14px,2vw,22px);
  background:var(--nuit); border-top:1px solid rgba(245,244,241,.12);
}
.lct-cmd{
  flex:none; width:38px; height:38px; display:grid; place-items:center;
  padding:0; cursor:pointer;
  background:none; border:1px solid rgba(245,244,241,.22);
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.lct-cmd:hover{background:rgba(245,244,241,.14);}
.lct-cmd svg{width:13px; fill:var(--creme);}
/* Les traits du haut-parleur sont des tracés, pas des aplats. */
.lct-cmd svg .trait{fill:none; stroke:var(--creme); stroke-width:1.5;}
.lct-cmd.actif{border-color:var(--or-clair);}
.lct-cmd.actif svg{fill:var(--or-clair);}
.lct-cmd.actif svg .trait{stroke:var(--or-clair);}

.lct-temps{
  flex:none; font-size:12px; letter-spacing:.1em; color:rgba(245,244,241,.72);
  font-variant-numeric:tabular-nums;
}

/* La piste est un <input type="range"> : atteignable au clavier et annoncée
   comme un curseur sans une ligne de script. Son remplissage est peint par
   un dégradé piloté par la variable --part, posée en style en ligne.
   Les deux familles de sélecteurs, WebKit et Firefox, ne peuvent PAS être
   groupées : un navigateur qui n'en connaît qu'une rejette la règle entière
   et la piste redevient un curseur système. */
.lct-piste{
  flex:1 1 auto; min-width:60px; height:22px; margin:0; padding:0;
  -webkit-appearance:none; appearance:none; background:none; cursor:pointer;
}
.lct-piste::-webkit-slider-runnable-track{
  height:3px;
  background:linear-gradient(to right,
    var(--or-clair) 0 var(--part,0%), rgba(245,244,241,.24) var(--part,0%) 100%);
}
.lct-piste::-moz-range-track{height:3px; background:rgba(245,244,241,.24);}
.lct-piste::-moz-range-progress{height:3px; background:var(--or-clair);}
.lct-piste::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:11px; height:11px; border-radius:50%; border:0;
  background:var(--or-clair); margin-top:-4px;
}
.lct-piste::-moz-range-thumb{
  width:11px; height:11px; border-radius:50%; border:0; background:var(--or-clair);
}

@media (max-width:560px){
  .lct-cadre{width:100vw;}
  .lct-barre{gap:8px; padding:12px 10px;}
  .lct-cmd{width:34px; height:34px;}
  .lct-temps{font-size:11px; letter-spacing:.04em;}
}

/* ============================================================
   MOUVEMENT
   Philippe demande des animations discrètes : fondu, apparition
   progressive, léger parallaxe. Rien de démonstratif. Trois gestes, et
   trois seulement, tous coupés sous prefers-reduced-motion.

   1. Le VOLET : une photographie se découvre du bas vers le haut, et son
      cadrage se pose en même temps. C'est le geste d'un livre que l'on
      ouvre, pas d'une diapositive qui glisse.
   2. Le PARALLAXE : l'image dérive de quelques pour cent dans son cadre au
      fil du défilement. L'image déborde du cadre, jamais la mise en page :
      le ratio est porté par la figure.
   3. La CASCADE : dans un bloc de texte, les lignes montent l'une après
      l'autre, à 70 ms d'intervalle.

   La classe .anim n'est posée que si l'observateur d'intersection
   fonctionne : sans elle, tout reste visible et immobile.
   ============================================================ */

/* --- 3. cascade du texte --- */
.anim .reveal{
  opacity:0; transform:translateY(16px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:calc(var(--rang, 0) * 70ms);
}
.anim .reveal.in{opacity:1; transform:none;}

/* --- 1. volet des photographies --- */
.anim figure[data-photo]{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.15s cubic-bezier(.16,.84,.44,1);
  transition-delay:calc(var(--rang, 0) * 90ms);
}
.anim figure[data-photo].vu{clip-path:inset(0 0 0 0);}
.anim figure[data-photo] img{
  transform:scale(1.07);
  transition:transform 1.9s cubic-bezier(.16,.84,.44,1);
  transition-delay:calc(var(--rang, 0) * 90ms);
}
.anim figure[data-photo].vu img{transform:scale(1);}

/* L'affiche du hero échappe au volet : elle porte le premier écran, elle
   doit être là d'emblée. Elle est aussi exclue de l'observateur, dans
   assets/site.js, donc rien ne viendrait jamais lever son volet. */
.anim .hero-media figure[data-photo],
.anim .ouv-media figure[data-photo]{clip-path:none;}
/* Le zoom de l'affiche survit au regime d'animation : celui-ci coupait
   tout transform sur cette image pour lui epargner le volet et le
   parallaxe, et il aurait emporte le cadrage avec. */
.anim .hero-media figure[data-photo] img{
  transform:translate(var(--hero-dx), var(--hero-dy)) scale(var(--hero-zoom));
}
/* Meme chose pour l'ecran d'accueil du dossier, au decalage vertical pres :
   son cadre est en 2,4:1 et non plein ecran, il n'a pas de linteau a
   remonter. */
.anim .ouv-media figure[data-photo] img{
  transform:translateX(var(--hero-dx)) scale(var(--hero-zoom));
}

/* --- 2. parallaxe ---
   La vignette dépasse du cadre de huit pour cent, en haut comme en bas :
   la dérive appliquée en JavaScript ne peut donc jamais laisser voir de
   bord. Réservé aux figures assez hautes pour que le mouvement se voie. */
.anim figure[data-photo].derive > picture{
  height:116%; margin-top:-8%; will-change:transform;
}

/* --- le hero à l'ouverture --- */
.anim .hero-in > *{
  opacity:0; transform:translateY(14px);
  animation:hero-entree 1.1s var(--ease) forwards;
}
.anim .hero-logo{animation-delay:.15s;}
.anim .hero-in .hero-manifeste{animation-delay:.35s;}
.anim .hero-place{animation-delay:.6s;}
.anim .hero-sale{animation-delay:.72s;}
.anim .hero-film{animation-delay:.86s;}
@keyframes hero-entree{to{opacity:1; transform:none;}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal,.anim .reveal{opacity:1 !important; transform:none !important; transition:none !important;}
  .anim figure[data-photo]{clip-path:none !important; transition:none !important;}
  .anim figure[data-photo] img{transform:none !important; transition:none !important;}
  .anim figure[data-photo].derive > picture{height:100%; margin-top:0; transform:none !important;}
  .anim .hero-in > *{opacity:1 !important; transform:none !important; animation:none !important;}
  .vsn{animation:none;}
}

/* --- impression : le dossier doit pouvoir etre imprime --- */
@media print{
  .hdr,.hero,.plan-toolbar,.plan-skip,.plan-card,.form-box,.vsn,.plan-stage,
  .consentement{display:none !important;}
  html.a-consentir body{padding-bottom:0;}
  body{background:#fff; font-size:11pt;}
  .chap,.data,.foot{padding-block:14pt;}
  .notice{break-inside:avoid;}
}

/* ============================================================
   LE BANDEAU DE CONSENTEMENT
   ------------------------------------------------------------
   Pose par assets/mesure.js, jamais present dans le HTML : il
   n'apparait qu'a qui n'a pas encore repondu, et disparait pour
   six mois des qu'il a repondu.

   DEUX BOUTONS DE MEME POIDS. La CNIL demande que refuser soit
   aussi simple qu'accepter : meme taille, meme typographie, meme
   nombre de clics. L'un est plein, l'autre cerne du meme trait
   d'encre, ce qui les distingue sans en effacer un.

   IL EST A LA CHARTE, ET NON AU MODELE DU BRIEF : papier neutre
   plutot que blanc pur, angles vifs plutot qu'arrondis, capitales
   espacees des .btn de la page. Un bandeau blanc a coins ronds se
   serait lu comme une piece rapportee sur une page qui n'en a pas
   un seul.
   ============================================================ */
.consentement{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:9999;
  max-width:544px; margin-inline:auto;
  padding:22px 24px;
  background:var(--creme); color:var(--encre);
  border:1px solid var(--filet-accent);
  box-shadow:0 2px 40px rgba(11,11,11,.18);
  font-size:15px; line-height:1.6;
}
.consentement p{margin:0 0 18px;}
.consentement a{color:var(--accent); text-underline-offset:3px;}
.consentement-boutons{display:flex; gap:10px; justify-content:flex-end;}
.consentement button{
  font-family:var(--ff-sans); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; padding:14px 26px; cursor:pointer;
  border:1px solid var(--encre); border-radius:0;
  background:transparent; color:var(--encre);
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.consentement button:hover{background:var(--accent); border-color:var(--accent); color:var(--creme);}
.consentement button.primaire{background:var(--encre); color:var(--creme);}

/* LE PIED DE PAGE SE POUSSE TANT QUE LA QUESTION EST POSEE.
   Le bandeau est flottant : sur un telephone il occupe le bas de
   l'ecran, et la derniere ligne du pied de page passait dessous
   sans pouvoir etre atteinte. La hauteur reelle est mesuree par
   assets/mesure.js, qui la pose en --consentement-h ; les 200 px
   ne servent que le temps d'une trame, avant la mesure. */
html.a-consentir body{padding-bottom:calc(var(--consentement-h, 200px) + 32px);}

/* AU COIN, ET NON AU CENTRE, DES QUE LA PLACE LE PERMET. Mesure du
   31/08 : centre en bas, le bandeau recouvrait « Voir le film » du hero
   sur un portable de 1280 x 800, la seule commande du premier ecran. Le
   hero compose au centre ; le bandeau se pousse donc a gauche, ou il ne
   croise plus rien, ni le film, ni la mention de vente, ni le bouton
   d'en-tete. Verifie aux quatre largeurs de reference, plus 1024 et
   1152, ou le film descend le plus bas. */
@media (min-width:768px){
  .consentement{left:24px; right:auto; bottom:24px; max-width:400px; margin-inline:0;}
}

/* CE QUI RESTE, ET QUI A ETE MESURE PLUTOT QU'IGNORE : sur un ecran de
   360 x 640, le plus petit du parc, le bandeau couvre encore « Voir le
   film » et la mention de vente. Le hero y tient tout juste, et une
   boite de trois lignes en bas d'ecran ne peut pas ne rien croiser.
   L'appel a l'action qui compte, lui, n'est jamais couvert a aucune
   largeur : le bouton du dossier vit dans l'en-tete (au-dessus de
   600 px seulement) et dans le formulaire, et le bandeau part au
   premier geste. Le rappel du bas d'ecran, 30/09, se retire tant
   que le bandeau est la : voir « le rappel du dossier prive ». */
@media (max-width:480px){
  .consentement{left:12px; right:12px; bottom:12px; padding:18px 18px; font-size:14px;}
  .consentement-boutons{justify-content:stretch;}
  .consentement button{flex:1; padding:14px 10px;}
}

/* ============================================================
   LE RAPPEL DU DOSSIER PRIVE, 30/09
   ------------------------------------------------------------
   Pose en dur dans index.html avec hidden, decouvert et cadence
   par assets/site.js, bloc du meme nom : c'est la qu'est dit
   quand il se montre et quand il se retire.

   AU POIDS DE .btn-gold, le bouton plein du formulaire, depuis le
   30/09 : « il ne ressort pas assez », Thomas. La premiere version
   reprenait le bouton borde de l'en-tete, graphite sur papier, et se
   perdait dans la page. Il prend maintenant l'encre pleine, le texte
   papier et la metrique de .btn, douze pixels et .2em, avec l'ombre du
   bandeau de consentement pour se detacher aussi d'une photographie
   sombre, le hero compris, ou il peut desormais paraitre.

   EN BAS A DROITE, parce que le bandeau de consentement occupe
   la gauche des 768 px, et que le texte suivi est centre : la
   pastille ne mord que sur la marge, et sur un telephone que sur
   le coin de la derniere ligne.

   visibility PART APRES LE FONDU, et non avec lui : cachee,
   la pastille sort du parcours au clavier et des lecteurs
   d'ecran, et aucun des deux ne tombe sur un lien invisible.
   Au-dessus de l'en-tete (90), sous la visionneuse et le film
   (300), qui la couvrent quand ils s'ouvrent.
   ============================================================ */
.rappel{
  position:fixed; right:24px; bottom:24px; z-index:95;
  display:flex; align-items:stretch;
  background:var(--encre); border:1px solid var(--encre);
  box-shadow:0 2px 40px rgba(11,11,11,.18);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility 0s linear .45s;
}
.rappel.montre{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility 0s;
}
.rappel[hidden]{display:none;}
.rappel-lien{
  display:flex; align-items:center; min-height:48px;
  padding:15px 22px 15px 26px;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase; line-height:1.5;
  color:var(--creme); text-decoration:none; white-space:nowrap;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.rappel-lien:hover{background:var(--accent);}
/* Au moins 44 px sur 44 : la cible tactile minimale, sans grossir la
   croix elle-meme. Le filet graphite la separe du libelle. */
.rappel-fermer{
  display:flex; align-items:center; justify-content:center;
  width:48px; padding:0; margin:0; cursor:pointer;
  background:none; border:0; border-left:1px solid var(--accent);
  color:var(--creme-3);
  transition:color .25s var(--ease), background .25s var(--ease);
}
.rappel-fermer:hover{color:var(--creme); background:var(--accent);}
/* L'anneau graphite de la page disparaitrait sur l'encre : papier ici. */
.rappel :focus-visible{outline-color:var(--creme); outline-offset:-5px;}

/* Sur telephone, la metrique de .btn-hdr : le libelle en douze pixels
   ne tiendrait pas sur une ligne a 360 px, croix comprise. */
@media (max-width:600px){
  .rappel{right:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px));}
  .rappel-lien{min-height:44px; padding:12px 14px 12px 16px; font-size:11px; letter-spacing:.18em;}
  .rappel-fermer{width:45px;}
}
/* Le fondu reste, le glissement part : une opacite ne deplace rien. */
@media (prefers-reduced-motion: reduce){
  .rappel,.rappel.montre{transform:none;}
}
@media print{ .rappel{display:none !important;} }