/* ============================================================================
   Poinçon & Papier — feuille de style partagée
   ============================================================================

   ⚠️ DUPLICATION TEMPORAIRE — à résorber.
   La partie « BASE » ci-dessous est, à la virgule près, le bloc <style> encore
   inline dans index.html. Elle a été recopiée ici parce que les pages d'article
   en ont besoin et que l'extraction depuis index.html n'a pas pu être faite
   automatiquement. Tant que les deux coexistent, **toute modification de l'un
   doit être reportée dans l'autre**. La première tâche du prochain passage est
   de remplacer le bloc <style> de index.html par :

       <link rel="stylesheet" href="styles.css">

   Chemins : ce fichier est à la racine, au même niveau que fonts/ et images/.
   Les url() relatives se résolvent donc correctement depuis ici.
   ============================================================================ */


/* ==========================================================================
   BASE — commune à toutes les pages
   ========================================================================== */

/* Polices auto-hébergées : aucune requête vers Google, donc aucune transmission
   d'adresse IP à un tiers, donc pas de bandeau cookies à prévoir (CNIL). */
@font-face{
  font-family:"Cormorant Garamond"; font-style:normal; font-weight:300 400;
  font-display:swap; src:url("fonts/cormorant-garamond-light.woff2") format("woff2");
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:300 400;
  font-display:swap; src:url("fonts/inter-regular.woff2") format("woff2");
}
:root{
  --ground:#14120F;
  --panel:#211D17;
  --ink:#EDE7DC;
  --muted:#EDE7DCA6;
  --faint:#EDE7DC59;
  --rule:#EDE7DC1F;
  --brass:#C0A06A;
  --serif:"Cormorant Garamond", ui-serif, Georgia, serif;
  --sans:"Inter", ui-sans-serif, system-ui, sans-serif;
  --pad:24px;
  --gap-section:64px;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{display:block; max-width:100%;}
p{margin:0;}
a{color:inherit;}

/* ---------- GRAIN ----------
   Une seule tuile de 15 Ko, posée en voile fixe au-dessus du fond et sous
   tout le reste. Volontairement à la limite du perceptible. */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("images/grain.png"); background-size:180px 180px;
  opacity:.5;
}
body > *{position:relative; z-index:1;}

/* ---------- APPARITIONS ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0; transform:translateY(14px);
          transition:opacity .7s cubic-bezier(.22,.61,.36,1),
                     transform .7s cubic-bezier(.22,.61,.36,1);}
  .reveal.vu{opacity:1; transform:none;}
}
@media (prefers-reduced-motion: no-preference){
  .stamp path{stroke-dasharray:120; stroke-dashoffset:120;
              animation:frapper 1.5s .25s cubic-bezier(.22,.61,.36,1) forwards;}
  .stamp path:last-child{stroke-dashoffset:0; opacity:0;
              animation:apparaitre .7s 1.25s ease forwards;}
  @keyframes frapper{to{stroke-dashoffset:0;}}
  @keyframes apparaitre{to{opacity:1;}}
}

/* ⚠ padding latéral uniquement : un `padding` raccourci ici écraserait le
   padding vertical des <section> (même élément, classe plus spécifique). */
.bleed{width:100%; padding-left:var(--pad); padding-right:var(--pad);}
.inner{max-width:1360px; margin:0 auto;}
section{padding:var(--gap-section) 0; position:relative; overflow:hidden;}
section.alt{background:var(--panel);}
section > .inner{position:relative; z-index:1;}

h2{font-family:var(--serif); font-weight:300; font-size:clamp(38px,6.6vw,76px); line-height:1.02; margin:0; letter-spacing:-.015em;}
.h2-suite{display:block; font-family:var(--sans); font-weight:300;
          font-size:clamp(13px,1.15vw,15px); letter-spacing:.18em;
          text-transform:uppercase; color:var(--brass); line-height:1.5;
          margin-top:clamp(10px,1.1vw,16px);}
/* chiffres en sans : Cormorant a des chiffres elzéviriens (« 01 » y ressemble à « oi ») */
.num{font-family:var(--sans); font-size:12px; color:var(--brass); letter-spacing:.24em; display:block; margin-bottom:20px;}
.label{font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--brass); font-weight:400;}
.muted{color:var(--muted);} .faint{color:var(--faint);}
.s{font-size:15px; line-height:1.7;}
.lnk{text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--brass);}
/* tout lien isolé dans un flux offre une zone tactile de 44px */
a.tap{display:inline-flex; align-items:center; min-height:44px;}
.at::before{content:"@";}

.shead{display:grid; gap:22px; margin-bottom:48px;}
.shead p.intro{font-size:18px; line-height:1.6; color:var(--muted); max-width:44ch;}
@media(min-width:900px){
  .shead{grid-template-columns:1.05fr 1fr; align-items:start; gap:72px; margin-bottom:84px;}
  .shead p.intro{padding-top:45px;}
}

.topbar{display:flex; justify-content:space-between; align-items:center; padding:14px var(--pad); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint);}
.topbar a, .topbar span{text-decoration:none; display:inline-flex; align-items:center; min-height:44px;}
.topbar a:hover{color:var(--brass);}

/* ---------- NAVIGATION DE SITE ----------
   Au-dessus de 1100px : barre horizontale, sous-menu au survol.
   En dessous : un bouton à droite ouvre un panneau qui entre par la droite.
   La barre défilante d'avant était illisible dès qu'on descendait sous 700px. */
.sitenav{border-bottom:1px solid var(--rule); background:#14120FF2;
         position:sticky; top:0; z-index:8;
         position:-webkit-sticky; position:sticky;}
.sitenav .inner{position:relative;}
.sitenav .inner{display:flex; align-items:center; gap:clamp(18px,2.4vw,40px);
                min-height:58px;}
.sitenav .marque{font-family:var(--serif); font-size:19px; letter-spacing:-.01em;
                 /* cible tactile : 44px de haut minimum (WCAG 2.5.5) */
                 display:inline-flex; align-items:center; min-height:44px;
                 text-decoration:none; white-space:nowrap; flex:none;}
.sitenav .marque:hover{color:var(--brass);}
.sitenav .ecran, .sitenav .tiroir{display:contents;}
.burger, .voile{display:none;}
.sitenav ul{list-style:none; margin:0; padding:0; display:flex;
            gap:clamp(14px,1.8vw,28px); overflow-x:auto; scrollbar-width:none;
            -webkit-overflow-scrolling:touch;
            /* sans min-width:0, un élément flex refuse de rétrécir sous la
               taille de son contenu : overflow-x ne s'enclenche pas et c'est
               la page entière qui déborde. */
            flex:1 1 auto; min-width:0;
            /* centré entre la marque et le contact */
            justify-content:center;}
/* au-dessus, la barre tient sans défiler : on rend le débordement visible,
   sinon overflow-x:auto rognerait le sous-menu déroulant */
@media(min-width:1100px){ .sitenav ul{overflow:visible;} }
.sitenav ul::-webkit-scrollbar{display:none;}
.sitenav li{flex:none; position:relative;}
/* ---------- SOUS-MENU DÉROULANT ----------
   Au survol et au clavier. L'entrée parente reste un lien vers la page
   d'ensemble : sur écran tactile, où le survol n'existe pas, c'est elle qui
   répond, et elle mène au sommaire des trois cas. */
/* le chevron doit se voir : c'est le seul indice qu'il y a trois pages dessous */
.sitenav .a-sous > a::after{content:""; display:inline-block; margin-left:8px;
                            width:5px; height:5px; vertical-align:2px;
                            border-right:1.5px solid var(--brass);
                            border-bottom:1.5px solid var(--brass);
                            transform:rotate(45deg) translateY(-1px);
                            transition:transform .18s, opacity .18s; opacity:.9;}
.sitenav .a-sous:hover > a::after,
.sitenav .a-sous:focus-within > a::after{transform:rotate(225deg) translateY(-3px); opacity:1;}
.sitenav .a-sous:hover > a{color:var(--brass);}
.sitenav .sous{position:absolute; left:50%; transform:translateX(-50%) translateY(6px);
               top:100%; min-width:230px; margin:0; padding:8px 0; list-style:none;
               background:#1B1813FA; border:1px solid var(--rule); border-top:2px solid var(--brass);
               backdrop-filter:blur(8px); display:flex; flex-direction:column; gap:0;
               opacity:0; visibility:hidden; pointer-events:none;
               transition:opacity .18s, transform .18s, visibility .18s; z-index:9;}
.sitenav .a-sous:hover .sous,
.sitenav .a-sous:focus-within .sous{opacity:1; visibility:visible; pointer-events:auto;
                                    transform:translateX(-50%) translateY(0);}
.sitenav .sous li{width:100%;}
.sitenav .sous a{display:block; width:100%; padding:11px 22px; min-height:0;
                 font-size:13px; line-height:1.4; color:var(--muted); white-space:nowrap;}
.sitenav .sous a:hover{color:var(--brass); background:#EDE7DC0A;}
.sitenav ul a{display:inline-flex; align-items:center; min-height:44px;
              text-decoration:none; font-size:13px; line-height:1.3;
              color:var(--muted); white-space:nowrap; transition:color .2s;
              border-bottom:1px solid transparent;}
.sitenav ul a:hover{color:var(--ink);}
.sitenav ul a[aria-current="page"]{color:var(--brass);}
/* Le contact se décroche à droite quand la barre tient sans défiler. Il n'est
   jamais masqué : c'est le seul lien de la barre qui convertit. */
.sitenav .fin{flex:none;}
.sitenav .fin a{display:inline-flex; align-items:center; min-height:44px;
                text-decoration:none; font-size:13px; color:var(--brass);
                white-space:nowrap; transition:color .2s;}
.sitenav .fin a:hover{color:var(--ink);}
/* ---------- REPÈRES DE LECTURE ----------
   La navigation de section, reprise telle quelle de l'accueil. Colonne fixe à
   droite, chiffres seuls, le nom se déplie au survol, la section courante est
   en laiton. Masquée sous 1200px. */
.reperes{position:fixed; right:28px; top:50%; transform:translateY(-50%);
         z-index:3; display:none; flex-direction:column; gap:14px;}
@media(min-width:1200px){
  .reperes{display:flex;}
  .bleed{padding-right:calc(var(--pad) + 48px);}
}
.reperes a{display:flex; align-items:center; justify-content:flex-end; gap:12px;
           text-decoration:none; min-height:26px; padding-left:20px;}
.reperes i{font-style:normal; font-size:11px; letter-spacing:.16em;
           color:var(--faint); transition:color .3s;}
.reperes b{font-weight:400; font-size:12px; letter-spacing:.06em; white-space:nowrap;
           color:var(--faint); max-width:0; opacity:0; overflow:hidden;
           transition:max-width .4s cubic-bezier(.22,.61,.36,1), opacity .25s, color .3s;}
.reperes:hover b, .reperes:focus-within b{max-width:22rem; opacity:1;}
.reperes a:hover i, .reperes a:hover b{color:var(--muted);}
.reperes a[aria-current] i, .reperes a[aria-current] b{color:var(--brass);}
@media (prefers-reduced-motion: reduce){ .reperes, .reperes b{transition:none;} }

.stamp{width:36px; margin-bottom:26px;}
.surtitre{font-family:var(--sans); font-size:clamp(11px,1vw,12px);
          letter-spacing:.4em; text-transform:uppercase; color:var(--brass);
          margin:0 0 clamp(20px,2.4vw,32px);}

/* white-space:nowrap garde le libellé sur une ligne, mais sur un écran de
   320px un libellé long — « Parler de votre candidature » — débordait de 10px
   et faisait défiler la page entière. Le bouton peut rétrécir ses marges
   intérieures et, en dernier recours, passer sur deux lignes. */
.cta{display:inline-block; text-align:center; background:var(--ink); color:var(--ground); padding:17px clamp(20px,5vw,36px); text-decoration:none; font-size:12px; letter-spacing:.12em; text-transform:uppercase; transition:background .2s; white-space:nowrap; max-width:100%; box-sizing:border-box;}
@media(max-width:400px){ .cta{white-space:normal; line-height:1.4;} }
.cta:hover{background:var(--brass);}

footer{padding:60px 0 80px; font-size:14px; color:var(--muted); line-height:1.9; border-top:1px solid var(--rule);}
footer a{text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--rule);
         display:inline-flex; align-items:center; min-height:44px;}
footer .frow{display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 14px; align-items:center;}

@media(min-width:1100px){
  :root{--pad:56px; --gap-section:100px;}
  .shead{margin-bottom:96px;}
}


/* ==========================================================================
   PAGES D'OFFRE
   ==========================================================================
   Trois versions ratées avant celle-ci. Ce qui n'allait pas :
     · le titre de section à gauche et le texte à droite — grille de liste
       appliquée à de la lecture suivie, colonne gauche vide aux trois quarts ;
     · un aplat de fond unique du haut en bas, quand l'accueil alterne ;
     · des titres tronqués à 18ch, donc cassés en trois lignes ;
     · une ligne « mis à jour le… » qui fait documentation et qui vieillit seule.

   Le parti retenu : **la grammaire de l'accueil**. Sections alternées, en-tête
   de section `.shead` déjà en place, colonne de lecture centrée, blocs larges
   qui débordent de la colonne, et la bande photo comme respiration. */

/* ---------- OUVERTURE ---------- */
/* ⚠ padding vertical uniquement. Un `padding` raccourci ici écrase le padding
   latéral de .bleed — même piège que celui documenté plus haut, et il a encore
   servi : le titre et le bouton touchaient le bord de l'écran sur téléphone. */
/* Le bloc d'ouverture occupe le premier écran, comme le hero de l'accueil :
   on ne doit pas voir la section suivante avant d'avoir fait défiler.
   58px = hauteur de la barre de navigation, qui est au-dessus.
   svh et non vh : sur mobile, vh compte la barre d'adresse escamotable et
   déborde d'autant à l'ouverture de la page. */
.ouv{min-height:calc(100svh - 58px); display:flex; flex-direction:column;
     justify-content:center;
     /* au-dessus de 900px de haut, le contenu s'étale au lieu de flotter au
        milieu d'un grand vide : le fil en haut, le bouton en bas. */
     padding-top:clamp(56px,8vw,110px); padding-bottom:clamp(44px,6vw,80px);}
.ouv > .inner{width:100%;}
/* Comme .hero-body de l'accueil : centré, pas étalé. L'étalement
   (space-between) creusait un trou de 280px entre le titre et le chapô. */
/* Exception : sur la page de contact et la 404, le premier écran doit montrer
   ce qu'on vient y chercher — le formulaire, la liste des offres. Les y
   repousser sous la ligne de flottaison coûterait des demandes. */
.ouv.compacte{min-height:0; display:block;}
/* Écran court — téléphone couché, petit portable. On comprime les
   respirations plutôt que de pousser le bouton sous la ligne de flottaison. */
@media(max-height:700px){
  .ouv{padding-top:clamp(32px,5vw,56px); padding-bottom:clamp(28px,4vw,44px);}
  .ouv .fil{margin-bottom:clamp(16px,2vw,24px);}
}
.ouv .fil{font-size:12px; letter-spacing:.2em; text-transform:uppercase;
          color:var(--faint); margin-bottom:clamp(26px,3vw,40px);}
.ouv .fil a{text-decoration:none;}
.ouv .fil a:hover{color:var(--brass);}
/* Même échelle que le titre de l'accueil (.claim-h1, calibré par mesure dans
   index.html) : deux tailles différentes pour deux titres de même rang
   donnaient l'impression que les pages venaient de deux sites. */
.ouv h1{font-family:var(--serif); font-weight:300; margin:0;
        font-size:clamp(32px, calc(7.2vw - 4px), 76px);
        line-height:1.08; letter-spacing:-.015em;}
/* Titre sur deux lignes, comme à l'accueil : la seconde complète la première
   et se pose une nuance en dessous. */
.ouv h1 span{display:block;}
.ouv h1 span:last-child:not(:only-child){color:var(--muted);}
.ouv .chapo{font-size:clamp(17px,1.6vw,21px); line-height:1.6; color:var(--muted);
            max-width:54ch; margin-top:clamp(22px,2.6vw,34px);}
.ouv .ouv-pied{display:grid; gap:24px; align-items:center;
               margin-top:clamp(30px,4vw,48px); padding-top:clamp(26px,3vw,34px);
               border-top:1px solid var(--rule);}
@media(min-width:760px){ .ouv .ouv-pied{grid-template-columns:auto minmax(0,1fr); column-gap:44px;} }
@media(min-width:480px) and (max-width:759px){ .ouv .ouv-pied .cta{justify-self:start;} }
.ouv .tarif{font-size:14px; line-height:1.7; color:var(--brass); margin:0; max-width:52ch;}

/* ---------- COLONNE DE LECTURE ----------
   Calée à gauche, en lignes longues. Le centrage donnait une page de revue là
   où il faut une page de travail, et il désalignait tout ce qui n'avait pas
   exactement la même largeur. */
.lire{max-width:none; margin:0;}
.lire > * + *{margin-top:22px;}
/* Le texte courant garde sa largeur de lecture et se centre dans la colonne ;
   encadrés, tableaux, FAQ et calculateur occupent les 980px. C'est ce
   contraste qui donne le rythme, sans jamais allonger une ligne. */
/* Aucune borne de largeur sur les enfants : c'est .lire qui tient la mesure,
   et tout part du même bord gauche. */
.lire > p, .lire > ul, .lire > ol, .lire > h3{max-width:none;}
/* ⚠ Ne pas borner la longueur de ligne. Essayé le 23/09 (820px pour les
   paragraphes, 700px pour les encarts) : la médiane passait de 148 à 77
   signes, mais le rendu a été refusé — la colonne étroite dans un bloc large
   fait un trou à droite, et sur téléphone ça ne change rien puisque la
   fenêtre borne déjà. Arbitrage de Florent, deux fois : le 16/09 et le 23/09. */
.lire p{font-size:17px; line-height:1.8; color:var(--muted);}
.lire p.leve{font-size:19px; line-height:1.65; color:var(--ink);}
.lire strong{color:var(--ink); font-weight:400;}
.lire a{text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--brass);}
.lire h3{font-family:var(--sans); font-weight:400; font-size:17px; color:var(--brass);
         line-height:1.35; margin-top:clamp(34px,3.6vw,48px);}
.lire ul, .lire ol{margin:0; padding:0; list-style:none;}
.lire li{position:relative; padding-left:24px; font-size:17px; line-height:1.75;
         color:var(--muted);}
.lire li + li{margin-top:14px;}
.lire ul > li::before{content:""; position:absolute; left:2px; top:13px;
                      width:5px; height:5px; background:var(--brass); transform:rotate(45deg);}
.lire ol{counter-reset:pl;}
.lire ol > li{counter-increment:pl; padding-left:38px;}
.lire ol > li::before{content:counter(pl,decimal-leading-zero); position:absolute;
                      left:0; top:3px; font-size:11px; letter-spacing:.14em; color:var(--brass);}

/* ---------- BLOCS QUI DÉBORDENT ----------
   Plus larges que la colonne de lecture, centrés sur elle. C'est ce qui fait
   respirer la page sans allonger une seule ligne de texte. */
.large{max-width:none;}
/* dans les encadrés, les phrases vont jusqu'au bout */
.fait p, .reserve p, .faq .rep p, .calc-note{max-width:none;}

/* Fait sourcé : la signature de ces pages. */
.fait{margin-top:clamp(34px,3.6vw,48px); padding:clamp(24px,2.6vw,34px);
      background:#0000002E; border-left:2px solid var(--brass);}
.fait .f-tag{display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
             color:var(--brass); margin-bottom:14px;}
.fait p{font-size:16px; line-height:1.75; color:var(--muted);}
.fait p + p{margin-top:14px;}
.fait .f-src{font-size:13px; line-height:1.6; color:var(--faint); margin-top:16px;}

/* Réserve : un fait daté, ou une incertitude assumée. */
.reserve{margin-top:clamp(34px,3.6vw,48px); padding:clamp(24px,2.6vw,34px);
         border:1px solid var(--rule);}
.reserve .r-tag{display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
                color:#D08A72; margin-bottom:14px;}
.reserve p{font-size:16px; line-height:1.75; color:var(--muted);}
.reserve p + p{margin-top:14px;}
.reserve .f-src{font-size:13px; line-height:1.6; color:var(--faint); margin-top:16px;}

/* Deux blocs côte à côte. */
.duo{display:grid; grid-template-columns:1fr; gap:22px; margin-top:clamp(34px,3.6vw,48px);}
@media(min-width:860px){ .duo{grid-template-columns:1fr 1fr; gap:32px;} }
.duo > *{margin-top:0;}

/* Tableau. */
.tbl{margin-top:clamp(34px,3.6vw,48px); overflow-x:auto; -webkit-overflow-scrolling:touch;}
/* Le conteneur défile : il lui faut un nom, le focus clavier et une indication
   visible, sinon la seconde colonne est inatteignable sans le savoir. */
.tbl:focus-visible{outline:2px solid var(--brass); outline-offset:4px;}
.tbl-note{display:none; font-size:13px; line-height:1.5; color:var(--faint); margin:0 0 12px;}
@media(max-width:760px){ .tbl-note{display:block;} }
table{border-collapse:collapse; width:100%; min-width:480px; font-size:16px;}
th, td{text-align:left; padding:16px 22px 16px 0; border-bottom:1px solid var(--rule);
       line-height:1.6; vertical-align:top;}
th{font-weight:400; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
   color:var(--brass); border-bottom-color:var(--brass); padding-bottom:12px;}
td{color:var(--muted);}
td.n{font-family:var(--serif); font-size:21px; color:var(--brass); white-space:nowrap;}

/* FAQ : <details> natif, aucun script. */
.faq{margin-top:clamp(34px,3.6vw,48px);}
.faq details{border-top:1px solid var(--rule);}
.faq details:last-of-type{border-bottom:1px solid var(--rule);}
.faq summary{cursor:pointer; list-style:none; padding:22px 48px 22px 0; position:relative;
             font-size:17px; line-height:1.5; color:var(--ink); min-height:44px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; position:absolute; right:10px; top:21px; font-size:20px;
                    line-height:1; color:var(--brass);}
.faq details[open] summary::after{content:"\2013";}
.faq summary:hover{color:var(--brass);}
.faq .rep{padding:0 0 24px;}
.faq .rep p{font-size:16px; line-height:1.75; color:var(--muted);}
.faq .rep p + p{margin-top:14px;}

/* ---------- BLOC DE VENTE ----------
   Même gabarit que les autres sections : chiffre et titre à gauche, chapeau à
   droite, contenu en dessous. Le centrage intégral ne ressemblait à rien du
   reste du site. */
/* Un montant ne se coupe jamais : « 1 500 € » se scindait entre « 1 » et
   « 500 € » à 320px, l'espace des milliers servant de point de rupture. */
.nb{white-space:nowrap;}
.vend .prix{font-family:var(--serif); font-size:clamp(40px,5vw,68px); color:var(--brass);
            line-height:1.05; margin-top:clamp(30px,3.4vw,44px);}
.vend .cond-lien{font-size:15px; line-height:1.7; color:var(--muted);
                  margin:18px 0 0; max-width:none;}
.vend .cond{font-size:15px; line-height:1.65; color:var(--muted); margin-top:16px;}
.vend .cta{margin-top:clamp(28px,3.2vw,40px);}

/* ---------- PAGES VOISINES ---------- */
.voisines{display:grid; grid-template-columns:1fr; gap:0;}
@media(min-width:800px){ .voisines{grid-template-columns:1fr 1fr; gap:0 64px;} }
.voisines a{display:block; text-decoration:none; padding:32px 0;
            border-top:1px solid var(--rule); transition:border-top-color .3s;}
.voisines a:hover{border-top-color:var(--brass);}
.voisines .v-tag{display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
                 color:var(--brass); margin-bottom:12px;}
.voisines .v-titre{display:block; font-family:var(--serif); font-size:clamp(23px,2.5vw,30px);
                   line-height:1.15; transition:color .2s;}
.voisines a:hover .v-titre{color:var(--brass);}
.voisines .v-det{display:block; font-size:15px; line-height:1.65; color:var(--muted);
                 margin-top:10px; max-width:42ch;}

/* ---------- CALCULATEUR ---------- */
.calc{margin-top:clamp(34px,3.6vw,48px); padding:clamp(24px,2.6vw,34px);
      border:1px solid var(--rule); background:#0000002E;}
.calc-champs{display:grid; grid-template-columns:1fr; gap:26px;}
@media(min-width:640px){ .calc-champs{grid-template-columns:1fr 1fr; gap:40px;} }
.calc label{display:block; font-size:13px; letter-spacing:.1em; text-transform:uppercase;
            color:var(--muted); margin-bottom:10px;}
.calc .aide{display:block; text-transform:none; letter-spacing:0; font-size:13px;
            color:var(--faint); margin-top:6px; line-height:1.5;}
.calc input{width:100%; font-family:var(--sans); font-weight:300; font-size:16px;
            color:var(--ink); background:transparent; border:0;
            border-bottom:1px solid var(--rule); padding:12px 2px; min-height:48px;
            border-radius:0; -webkit-appearance:none; transition:border-color .2s;}
.calc input:focus{outline:none; border-bottom-color:var(--brass);}
.calc-res{margin-top:clamp(26px,3vw,34px); padding-top:24px; border-top:1px solid var(--brass);}
.calc-ligne{display:flex; justify-content:space-between; align-items:baseline; gap:24px;
            padding:14px 0; border-bottom:1px solid var(--rule);}
.calc-ligne:last-child{border-bottom:0;}
.calc-ligne .cl-nom{font-size:15px; line-height:1.5; color:var(--muted);}
.calc-ligne .cl-val{font-family:var(--serif); font-size:24px; color:var(--brass); white-space:nowrap;}
.calc-ligne.total .cl-nom{color:var(--ink);}
.calc-ligne.total .cl-val{font-size:30px;}
/* message d'erreur rattache au champ, annonce par role=alert */
.calc-err{display:block; margin-top:7px; font-size:13px; line-height:1.45; color:#E8A87C;}
.calc-err:empty{margin-top:0;}
.calc-champs input[aria-invalid="true"]{border-bottom-color:#E8A87C;}
.calc-note{margin-top:22px; font-size:13px; line-height:1.65; color:var(--faint); max-width:66ch;}

/* ---------- NIVEAUX DE PRESTATION ----------
   Même grammaire que les offres de l'accueil : la situation du client en
   laiton, le nom de la prestation en dessous, le prix à droite. */
.niveau{display:grid; grid-template-columns:minmax(0,1fr); gap:10px;
        padding:26px 0; border-top:1px solid var(--rule); align-items:start;
        transition:border-top-color .3s;}
.niveau:hover{border-top-color:var(--brass);}
.niveau:last-of-type{border-bottom:1px solid var(--rule);}
.niveau .cas{font-size:12px; letter-spacing:.16em; text-transform:uppercase;
             color:var(--brass); display:block; margin-bottom:10px;}
.niveau h3{font-family:var(--serif); font-weight:400; color:var(--ink);
           font-size:clamp(25px,2.9vw,34px); line-height:1.08; margin:0;}
.niveau .desc{color:var(--muted); font-size:15px; line-height:1.7; max-width:50ch; margin:0;}
/* white-space:nowrap : le symbole ne doit jamais passer seul à la ligne */
.niveau .prix-n{font-family:var(--serif); font-size:24px; color:var(--brass);
                white-space:nowrap; line-height:1.25; margin:0;
                transition:color .3s;}
.niveau:hover .prix-n{color:var(--ink);}
.niveau .col-prix{text-align:right;}

/* Un prix qui n'est pas un montant unique mais une échelle : le « à partir de »
   passe en étiquette au-dessus, comme les surtitres du reste du site, et les
   trois paliers gardent le corps du prix. */
.prix-label{display:block; font-family:var(--sans); font-size:12px;
            letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
            margin-bottom:9px;}
@media(min-width:900px){
  .niveau{grid-template-columns:minmax(240px,.95fr) minmax(0,1.45fr) minmax(180px,.62fr);
          column-gap:64px; row-gap:0; padding:34px 0; align-items:center;}
}

/* ---------- CONTEXTE VENU DE L'AGENDA ----------
   Affiché seulement si l'URL porte le nom d'une opportunité. Le visiteur voit
   ce qui sera transmis avant d'envoyer : rien ne part en douce. */
.f-contexte{display:block; margin:0 0 clamp(20px,2.4vw,28px); padding:16px 20px;
            border-left:2px solid var(--brass); background:#EDE7DC08;}
.f-contexte[hidden]{display:none;}
.f-contexte .fc-tag{display:block; font-size:11px; letter-spacing:.2em;
                    text-transform:uppercase; color:var(--brass); margin-bottom:7px;}
.f-contexte .fc-texte{display:block; font-size:15px; line-height:1.55; color:var(--ink);}

/* listes déroulantes : mêmes règles que les champs texte, et 16px de corps
   pour qu'iOS ne zoome pas à la mise au point */
.form select{width:100%; box-sizing:border-box; font-family:var(--sans);
             font-size:16px; line-height:1.5; color:var(--ink);
             background-color:#EDE7DC08; border:0; border-bottom:1px solid var(--rule);
             border-radius:0; padding:11px 30px 11px 12px; min-height:48px;
             appearance:none; -webkit-appearance:none; cursor:pointer;
             background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),
                              linear-gradient(135deg,var(--faint) 50%,transparent 50%);
             background-position:calc(100% - 16px) 22px, calc(100% - 11px) 22px;
             background-size:5px 5px, 5px 5px; background-repeat:no-repeat;}
.form select:focus{outline:none; border-bottom-color:var(--brass); background-color:#EDE7DC12;}
.form select option{background:#1B1813; color:var(--ink);}

/* ---------- PAGE CONTACT ----------
   Le formulaire à gauche, les autres façons de joindre à droite. L'ancienne
   version empilait trois blocs numérotés autour d'un formulaire : une page de
   contact n'a pas besoin d'un sommaire. */
.contact-grille{display:grid; grid-template-columns:1fr; gap:clamp(44px,5vw,72px);}
@media(min-width:960px){
  .contact-grille{grid-template-columns:minmax(0,1.6fr) minmax(260px,.9fr);
                  column-gap:clamp(60px,6vw,110px);}
}
.contact-aside{display:grid; gap:clamp(30px,3.4vw,44px); align-content:start;}
@media(min-width:960px){
  .contact-aside{padding-left:clamp(36px,4vw,60px); border-left:1px solid var(--rule);}
}
.contact-aside .label{display:block; margin-bottom:12px;}
.contact-aside p{margin-top:12px;}
.contact-tel{display:inline-flex; align-items:center; min-height:44px;
             font-family:var(--serif); font-size:clamp(28px,3vw,38px); line-height:1.1;
             color:var(--brass); text-decoration:none; transition:color .2s;}
.contact-tel:hover{color:var(--ink);}

/* ---------- FORMULAIRE ----------
   Partagé entre la section contact de l'accueil et la page contact.
   ⚠ Ce bloc avait déjà été perdu une fois, effacé par une réécriture de
   la partie « pages d'offre » qui tronquait tout ce qui suivait. */
.form{margin:0;}
.f-grid{display:grid; grid-template-columns:1fr; gap:26px 40px;}
@media(min-width:760px){ .f-grid{grid-template-columns:1fr 1fr;} .f-large{grid-column:1 / -1;} }
.f-champ{display:flex; flex-direction:column; gap:10px; margin:0;}
.f-champ label{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.req{color:var(--brass);}
.opt{text-transform:none; letter-spacing:0; color:var(--faint);}
.f-champ input, .f-champ textarea{
  font-family:var(--sans); font-weight:300; font-size:16px; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--rule);
  padding:12px 2px; min-height:48px; border-radius:0; -webkit-appearance:none;
  transition:border-color .2s;
}
.f-champ textarea{resize:vertical; line-height:1.6; min-height:132px;}
.f-champ input:focus, .f-champ textarea:focus{outline:none; border-bottom-color:var(--brass);}
.f-champ input:user-invalid, .f-champ textarea:user-invalid{border-bottom-color:#B4553F;}
.f-piege{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.f-pied{display:grid; grid-template-columns:1fr; gap:22px; align-items:center; margin-top:40px;}
@media(min-width:760px){ .f-pied{grid-template-columns:auto 1fr; gap:40px;} }
.f-pied .cta{border:0; cursor:pointer; font-family:var(--sans); justify-self:start;}
.f-pied .cta[disabled]{opacity:.5; cursor:default;}
.f-note{font-size:13px; line-height:1.6; color:var(--faint); max-width:56ch;}
.f-etat{margin-top:24px; font-size:15px; line-height:1.6; color:var(--brass); min-height:1.6em;}
.f-etat.erreur{color:#D08A72;}
.f-repli{margin-top:44px; padding-top:26px; border-top:1px solid var(--rule);
         font-size:14px; color:var(--faint);}

/* ---------- COLONNES ----------
   Reprises de l'accueil : trois colonnes numérotées, chiffre et titre sur la
   même ligne de base. Elles servent aussi au bas de la page contact. */
.cols{display:grid; grid-template-columns:1fr; gap:0;}
@media(min-width:900px){ .cols{grid-template-columns:repeat(3,1fr); gap:64px;} }
.col{padding:32px 0; border-top:1px solid var(--rule);}
.col .n{font-family:var(--sans); font-weight:300; font-size:15px; color:var(--brass);
        letter-spacing:.2em; display:block; margin-bottom:16px;}
.chead{display:flex; align-items:baseline; gap:14px; margin:0 0 12px;}
.chead .n{display:inline; margin:0; flex:none;}
.chead h2, .chead h3{margin:0;}
.col h2, .col h3{font-family:var(--sans); font-weight:400; font-size:17px; margin:0 0 12px;
        line-height:1.35; color:var(--brass);}
.col p{color:var(--muted); font-size:15px; line-height:1.7; max-width:56ch;}


/* ---------- MENU DE TÉLÉPHONE ----------
   Bouton à droite, panneau qui entre par la droite. Le sous-menu de « Montage
   de dossier » y est déplié : le survol n'existe pas au doigt. */
@media(max-width:1099px){
  .burger{display:flex; flex-direction:column; justify-content:center; gap:5px;
          margin-left:auto; flex:none; width:44px; height:44px; position:relative;
          padding:0; border:0; background:none; cursor:pointer; z-index:22;
          -webkit-tap-highlight-color:transparent;}
  .burger span{display:block; width:22px; height:1.5px; margin:0 auto;
               background:var(--ink); transition:transform .3s, opacity .2s;}
  .sitenav.ouvert .burger span:first-child{transform:translateY(3.25px) rotate(45deg);}
  .sitenav.ouvert .burger span:last-child{transform:translateY(-3.25px) rotate(-45deg);}

  /* overflow:hidden sur l'écran : sans lui, le panneau rangé à droite de la
     vue compte dans la largeur du document et la page défile latéralement.
     visibility, et pas seulement transform : un panneau fermé doit sortir du
     parcours de tabulation et de l'arbre d'accessibilité. */
  .sitenav .ecran{display:block; position:fixed; inset:0; z-index:19;
                  overflow:hidden; visibility:hidden; transition:visibility .34s;}
  .sitenav.ouvert .ecran{visibility:visible;}

  .voile{display:block; position:absolute; inset:0; background:#0B0A08;
         opacity:0; transition:opacity .3s;}
  .sitenav.ouvert .voile{opacity:.72;}

  .sitenav .tiroir{display:flex; flex-direction:column; gap:0;
                   position:absolute; top:0; right:0; height:100%;
                   width:min(84vw,340px);
                   padding:78px 0 40px; overflow-y:auto; overscroll-behavior:contain;
                   background:#14120F; border-left:1px solid var(--rule);
                   transform:translateX(101%);
                   transition:transform .34s cubic-bezier(.4,0,.2,1);}
  .sitenav.ouvert .tiroir{transform:none;}

  .sitenav .tiroir ul{flex:none; display:flex; flex-direction:column; gap:0;
                      overflow:visible; justify-content:flex-start;}
  .sitenav .tiroir li{width:100%;}
  .sitenav .tiroir ul > li > a{display:flex; align-items:center; width:100%;
      min-height:52px; padding:14px 26px; font-size:15px; color:var(--ink);
      border-top:0; border-bottom:1px solid var(--rule);}
  .sitenav .tiroir ul > li > a[aria-current="page"]{color:var(--brass);}
  .sitenav .tiroir .a-sous > a::after{display:none;}
  /* ⚠ visibility:inherit, JAMAIS visible. Le tiroir fermé est masqué par
     visibility:hidden sur .ecran ; un « visible » ici rétablissait les quatre
     sous-liens dans le parcours clavier alors que le menu était fermé.
     Défaut trouvé le 24/09 par un audit externe : je vérifiais la visibilité
     du tiroir, pas l'ordre de tabulation de ses descendants. */
  .sitenav .tiroir .sous{position:static; transform:none; opacity:1; visibility:inherit;
      pointer-events:auto; display:flex; min-width:0; z-index:auto;
      margin:0; padding:2px 0 6px; background:#1B1813;
      border:0; border-bottom:1px solid var(--rule); backdrop-filter:none;}
  .sitenav .tiroir .sous a{padding:11px 26px 11px 46px; min-height:44px;
      font-size:14px; white-space:normal;}
  .sitenav .tiroir .fin{flex:none; margin:0;}
  .sitenav .tiroir .fin a{display:flex; align-items:center; width:100%;
      min-height:52px; padding:14px 26px; font-size:15px; color:var(--brass);
      text-decoration:none; border-bottom:1px solid var(--rule);}
  html.menu-ouvert, html.menu-ouvert body{overflow:hidden;}
}
@media(prefers-reduced-motion:reduce){
  .voile, .sitenav .ecran, .sitenav .tiroir, .burger span{transition:none;}
}

/* ---------- SOUS-MENU DE PAGE ----------
   Pour une page qui porte plusieurs cas : les trois sous-parties accessibles
   d'un clic, sous la barre principale et collantes avec elle. */
.sousmenu{border-bottom:1px solid var(--rule); background:#211D17E6;
          position:sticky; top:58px; z-index:7; backdrop-filter:blur(6px);}
.sousmenu .inner{display:flex; align-items:center; gap:clamp(16px,2vw,34px);
                 min-height:50px; overflow-x:auto; scrollbar-width:none;}
.sousmenu .inner::-webkit-scrollbar{display:none;}
.sousmenu .sm-tag{font-size:11px; letter-spacing:.2em; text-transform:uppercase;
                  color:var(--faint); white-space:nowrap; flex:none;}
.sousmenu a{display:inline-flex; align-items:center; min-height:44px; flex:none;
            text-decoration:none; font-size:13px; color:var(--muted);
            white-space:nowrap; transition:color .2s;}
.sousmenu a:hover{color:var(--ink);}
.sousmenu a[aria-current]{color:var(--brass);}

/* ---------- CARTES D'UNE RUBRIQUE ----------
   Sommaire d'une page qui chapeaute plusieurs cas. Pas d'image : ces pages
   n'en portent pas, et une carte typographique tient très bien. */
.cartes{display:grid; grid-template-columns:1fr; gap:0;}
@media(min-width:900px){ .cartes{grid-template-columns:repeat(3,1fr); gap:0 clamp(40px,4vw,72px);} }
/* Une page de tête à quatre cas : deux par deux entre 700 et 1200px, puis les
   quatre sur une ligne. En dessous de 1200px, quatre colonnes donneraient des
   titres coupés en trois lignes — mesuré, pas supposé. */
.cartes.quatre{grid-template-columns:1fr;}
@media(min-width:700px){ .cartes.quatre{grid-template-columns:repeat(2,1fr); gap:0 clamp(40px,4vw,72px);} }
@media(min-width:1200px){ .cartes.quatre{grid-template-columns:repeat(4,1fr); gap:0 clamp(28px,2.6vw,44px);} }
@media(min-width:1200px){ .cartes.quatre .c-titre{font-size:clamp(24px,2vw,30px);} }
.carte{display:flex; flex-direction:column; text-decoration:none;
       padding:clamp(30px,3.2vw,42px) 0; border-top:1px solid var(--rule);
       transition:border-top-color .3s;}
.carte:hover{border-top-color:var(--brass);}
.carte .c-num{font-size:12px; letter-spacing:.24em; color:var(--brass); margin-bottom:18px;}
.carte h2.c-titre, .carte .c-titre{margin:0; font-weight:300; letter-spacing:-.015em; font-family:var(--serif); font-size:clamp(28px,3vw,38px); line-height:1.08;
                transition:color .2s;}
.carte:hover .c-titre{color:var(--brass);}
.carte .c-det{font-size:15px; line-height:1.7; color:var(--muted); margin-top:14px; flex:1;}
.carte .c-prix{font-family:var(--serif); font-size:24px; color:var(--brass);
               margin-top:clamp(22px,2.4vw,30px); padding-top:18px;
               border-top:1px solid var(--rule);}
/* --faint (35 %) donnait 2,79:1 sur le panneau — sous le seuil de 4,5:1 et
   illisible. --muted (65 %) monte à 7,6:1. Corps porté de 12 à 13px.
   ⚠ Pour mesurer un contraste sur une couleur translucide, compositer les
   canaux sRGB AVANT de calculer la luminance ; compositer les luminances
   donne un résultat trop favorable (5,4 au lieu de 2,8 dans ce cas). */
.carte .c-lire{font-size:13px; letter-spacing:.14em; text-transform:uppercase;
               color:var(--muted); margin-top:14px; transition:color .2s;}
.carte:hover .c-lire{color:var(--brass);}