/* Feuille écrite à la main pour ce site, HORS SOCLE.
   Source : artisans/morice-erquy/design.css
   Ne pas éditer ce fichier : il est régénéré par build-site.py.
   Empreinte du contenu : f85d34a7fc */
/* =====================================================================
   HERVÉ MORICE, ERQUY — fenêtres de toit VELUX
   Système visuel sur mesure, 24 août 2026. HORS SOCLE.

   Parti pris : le produit vendu n'est pas une fenêtre, c'est de la
   lumière. Le site est donc clair, très aéré, et la matière sombre
   n'intervient que par blocs, comme l'ardoise sur un mur de pierre.

   Trois matières et rien d'autre :
     le papier   sable chaud, presque tout le site ;
     l'ardoise   bleu-gris profond, les respirations sombres ;
     la lumière  ambre, jamais en aplat, seulement en trait et en mot.

   Typographie : Instrument Serif pour le display (haut contraste,
   éditorial, un peu de tenue) et Inter pour tout le reste. Les deux
   sont auto-hébergées : aucune requête vers un serveur tiers.
   ===================================================================== */

@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('polices/instrument-serif/instrument-serif-400-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:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('polices/instrument-serif/instrument-serif-400-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:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('polices/inter/inter-400-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:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('polices/inter/inter-400-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:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('polices/inter/inter-500-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:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('polices/inter/inter-500-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:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('polices/inter/inter-700-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:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('polices/inter/inter-700-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;}

/* ------------------------------------------------------------- matières */
:root{
  --papier:#F4F1EB;
  --papier-2:#EAE5DC;
  --papier-3:#DFD8CC;
  --encre:#14120F;
  --encre-2:#5F574E;
  --encre-3:#8C8378;
  --ardoise:#20272C;
  --ardoise-2:#2C353B;
  --ardoise-3:#465158;
  --lumiere:#B9682B;
  --lumiere-2:#D9A25E;
  --lumiere-pale:#F0DCC2;
  --trait:#D6CEC1;
  --trait-sombre:rgba(244,241,235,.18);

  --page:min(1440px,100%);
  --marge:clamp(1.25rem,5vw,5.5rem);
  --mesure:64ch;

  --pas-section:clamp(4.5rem,10vw,10rem);
  --pas-bloc:clamp(2.5rem,5vw,4.5rem);

  --lent:.7s cubic-bezier(.16,1,.3,1);
  --vif:.28s cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--papier);
  color:var(--encre);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:1.0625rem;
  line-height:1.72;
  font-feature-settings:"kern","liga","calt";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--lumiere);outline-offset:3px}

.saut{position:absolute;left:-9999px;top:0;background:var(--ardoise);color:#fff;padding:.75rem 1.25rem;z-index:100}
.saut:focus{left:0}

/* ------------------------------------------------------------ ossature */
.page{width:var(--page);margin-inline:auto;padding-inline:var(--marge)}
.mesure{max-width:var(--mesure)}

/* La grille éditoriale : une colonne de marge étroite qui porte les
   numéros et les labels, une colonne large qui porte le propos. C'est
   ce décalage qui fait tenir la page, pas les encadrés. */
.duo-edito{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(1.5rem,4vw,4rem)}
@media (max-width:56rem){.duo-edito{grid-template-columns:1fr;gap:1.25rem}}

/* ------------------------------------------------------- typographie */
h1,h2,h3,.display{
  font-family:'Instrument Serif',Georgia,'Times New Roman',serif;
  font-weight:400;
  letter-spacing:-.015em;
  line-height:1.04;
  margin:0;
  text-wrap:balance;
}
h1,.d1{font-size:clamp(2.75rem,7.2vw,6.25rem);line-height:.98;letter-spacing:-.025em}
h2,.d2{font-size:clamp(2rem,4.4vw,3.75rem)}
h3,.d3{font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.15}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

/* Le label en petites capitales espacées : la signature discrète du
   site, elle revient partout et ne dit jamais rien d'inutile. */
.label{
  font-family:'Inter',sans-serif;
  font-size:.6875rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--encre-3);
  margin:0 0 1.5rem;
}
.label--clair{color:rgba(244,241,235,.55)}
.label--lumiere{color:var(--lumiere)}

/* Le numéro de section, en chiffres serif, dans la marge */
.num{
  font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(2.5rem,4vw,3.5rem);
  line-height:1;color:var(--trait);
  display:block;margin-bottom:.75rem;
}

.chapo{font-size:clamp(1.125rem,1.6vw,1.375rem);line-height:1.55;color:var(--encre-2);max-width:52ch}
.menu-fin{color:var(--encre-2)}

/* liens de texte : soulignement fin, décalé, qui s'épaissit au survol */
.prose a,.lien{
  color:inherit;text-decoration:none;
  background-image:linear-gradient(var(--lumiere),var(--lumiere));
  background-size:100% 1px;background-position:0 1.15em;background-repeat:no-repeat;
  transition:background-size var(--vif);
  padding-bottom:.05em;
}
.prose a:hover,.lien:hover{background-size:100% 2px}

/* ---------------------------------------------------------- en-tête */
.entete{
  /* sticky, et JAMAIS static : c'est ce qui rend le z-index opérant et ce
     qui donne au menu déroulant un ancêtre positionné auquel s'accrocher.
     Passé en static sur mobile, le menu ouvert se retrouvait peint SOUS
     la section d'ouverture, donc invisible et intappable. */
  position:sticky;top:0;z-index:50;
  background:var(--papier);
  border-bottom:1px solid var(--trait);
}
/* Le flou n'est qu'un agrément : il ne porte ni le fond ni la mise en page. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .entete{
    background:rgba(244,241,235,.88);
    backdrop-filter:saturate(1.4) blur(14px);
    -webkit-backdrop-filter:saturate(1.4) blur(14px);
  }
}
.entete__barre{
  width:var(--page);margin-inline:auto;padding:0 var(--marge);
  min-height:4.5rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.marque{display:flex;flex-direction:column;text-decoration:none;line-height:1.15}
.marque__nom{font-family:'Instrument Serif',Georgia,serif;font-size:1.4rem;letter-spacing:-.01em}
.marque__metier{font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--encre-3);margin-top:.2rem}
.entete__droite{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2.5rem)}
.menu ul{display:flex;gap:clamp(.8rem,1.5vw,1.6rem);list-style:none;margin:0;padding:0}
.menu a{
  text-decoration:none;font-size:.875rem;color:var(--encre-2);
  padding:.35rem 0;position:relative;transition:color var(--vif);
  /* neuf entrées depuis l'ouverture de la page Volet roulant : sans ce
     nowrap, « Pose neuve » et « À distance » se coupaient en deux lignes
     entre le repli du menu et le grand écran. */
  white-space:nowrap;
}
.menu a::after{
  content:"";position:absolute;left:0;right:100%;bottom:.1rem;height:1px;
  background:var(--lumiere);transition:right var(--vif);
}
.menu a:hover{color:var(--encre)}
.menu a:hover::after,.menu a[aria-current="page"]::after{right:0}
.menu a[aria-current="page"]{color:var(--encre)}
.entete__tel{
  font-size:.9375rem;font-weight:500;text-decoration:none;white-space:nowrap;
  font-variant-numeric:tabular-nums;
  border:1px solid var(--trait);border-radius:999px;padding:.55rem 1.15rem;
  transition:border-color var(--vif),background var(--vif),color var(--vif);
}
.entete__tel:hover{background:var(--ardoise);border-color:var(--ardoise);color:var(--papier)}
.entete__bascule{display:none;background:none;border:1px solid var(--trait);border-radius:999px;font:inherit;font-size:.8125rem;padding:.5rem 1rem;cursor:pointer}
/* Le menu se replie à 80rem et non plus à 60rem : neuf entrées ne tiennent
   plus sur une ligne en dessous de 1280 px. */
@media (max-width:80rem){
  .entete__bascule{display:block}
  .menu{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:var(--papier);border-bottom:1px solid var(--trait);
    z-index:60;                       /* au-dessus du contenu de la page */
    /* Écrans courts et paysage : il faut retrancher l'en-tête AU-DESSUS
       et la barre d'appel fixe EN DESSOUS, sinon les derniers liens
       passent sous la barre. vh d'abord, dvh pour les navigateurs qui
       le connaissent. */
    max-height:calc(100vh - 4.5rem);
    max-height:calc(100dvh - 4.5rem);
    overflow-y:auto;overscroll-behavior:contain;
    box-shadow:0 18px 30px -18px rgba(20,18,15,.35);
  }
  .menu.menu--ouvert{display:block}
  .menu ul{flex-direction:column;gap:0;padding:.5rem var(--marge) 1.25rem}
  .menu li+li{border-top:1px solid var(--trait)}
  /* Téléphone couché : huit liens en une colonne demandent de défiler dans
     le menu. Deux colonnes les font tenir d'un coup. */
  @media (max-height:32rem){
    .menu ul{display:grid;grid-template-columns:1fr 1fr;column-gap:1.5rem}
    .menu li{border-top:1px solid var(--trait)}
    .menu li+li{border-top:1px solid var(--trait)}
    .menu li:nth-child(-n+2){border-top:none}
    .menu a{padding:.7rem 0}
  }
  .menu a{display:block;padding:.85rem 0;font-size:1rem}
  .menu a::after{display:none}
  .entete__tel{display:none}
}

/* --------------------------------------------------------- ouverture
   Toujours pas d'image plein cadre derrière le texte : la déclaration
   typographique tient la colonne de gauche, et la photo occupe une
   colonne à elle, comme une planche posée à côté. La lumière monte du
   bas de page comme elle monte dans un comble. */
.ouverture{position:relative;overflow:hidden;padding:clamp(3.5rem,9vw,7.5rem) 0 clamp(3rem,6vw,5rem)}
.ouverture::before{
  content:"";position:absolute;inset:auto 0 0 0;height:70%;
  background:radial-gradient(120% 100% at 78% 100%,rgba(217,162,94,.28) 0%,rgba(217,162,94,.10) 38%,transparent 68%);
  pointer-events:none;
}
.ouverture__grille{
  position:relative;display:grid;align-items:center;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2.5rem,5vw,5rem);
}
.ouverture__contenu{position:relative;min-width:0}
.ouverture h1{max-width:22ch}
.ouverture h1 em{font-style:italic;color:var(--lumiere)}
.ouverture__chapo{margin-top:clamp(1.5rem,3vw,2.5rem);max-width:46ch;font-size:clamp(1.0625rem,1.4vw,1.25rem);color:var(--encre-2)}
.ouverture__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.25rem}

/* la marque du produit posé, sous les boutons : un logo et une phrase,
   pas un badge. Le logo garde ses proportions et ne dépasse pas la
   hauteur d'une ligne de texte courant. */
.ouverture__marque{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  margin-top:clamp(2rem,3.5vw,2.75rem);padding-top:1.35rem;
  border-top:1px solid var(--trait);max-width:36rem;
}
.ouverture__marque img{width:clamp(120px,11vw,164px);height:auto;flex:0 0 auto}
.ouverture__marque span{flex:1 1 15rem;min-width:0;font-size:.9375rem;color:var(--encre-2);line-height:1.5}

/* la photo d'ouverture : cadrage debout, pas de cadre ni d'ombre */
.ouverture__vue{min-width:0}
.ouverture__vue img{width:100%;aspect-ratio:4/5;object-fit:cover}

@media (max-width:60rem){
  .ouverture__grille{grid-template-columns:1fr;gap:clamp(2rem,5vw,3rem)}
  .ouverture__vue img{aspect-ratio:4/5}
  .ouverture__marque{max-width:none}
}

/* la bande d'accroche sous l'ouverture : trois faits, filets fins */
.faits{border-top:1px solid var(--trait);margin-top:clamp(3rem,6vw,5rem)}
.faits ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
.faits li{padding:1.75rem clamp(1rem,2vw,2rem) 1.75rem 0}
.faits li+li{border-left:1px solid var(--trait);padding-left:clamp(1rem,2vw,2rem)}
.faits dt{font-size:.9375rem;font-weight:500;margin-bottom:.35rem}
.faits dd{margin:0;font-size:.9375rem;color:var(--encre-2);line-height:1.6}
@media (max-width:56rem){
  .faits ul{grid-template-columns:1fr}
  .faits li{padding:1.25rem 0}
  .faits li+li{border-left:none;border-top:1px solid var(--trait);padding-left:0}
}

/* ---------------------------------------------------------- boutons */
.bouton{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.9375rem;font-weight:500;text-decoration:none;
  padding:.95rem 1.6rem;border-radius:999px;border:1px solid transparent;
  transition:background var(--vif),color var(--vif),border-color var(--vif),transform var(--vif);
}
.bouton:hover{transform:translateY(-1px)}
.bouton--sombre{background:var(--ardoise);color:var(--papier)}
.bouton--sombre:hover{background:var(--encre)}
.bouton--ligne{border-color:var(--trait);color:var(--encre)}
.bouton--ligne:hover{border-color:var(--encre);background:transparent}
.bouton--clair{background:var(--papier);color:var(--encre)}
.bouton--clair:hover{background:#fff}
.bouton--fantome{border-color:var(--trait-sombre);color:var(--papier)}
.bouton--fantome:hover{border-color:var(--papier)}
.bouton--tel{font-variant-numeric:tabular-nums}

/* --------------------------------------------------------- sections */
.section{padding:var(--pas-section) 0}
.section--papier2{background:var(--papier-2)}
.section--ardoise{background:var(--ardoise);color:var(--papier)}
.section--ardoise .chapo,.section--ardoise p{color:rgba(244,241,235,.72)}
.section--ardoise h1,.section--ardoise h2,.section--ardoise h3{color:var(--papier)}
.section--filet{border-top:1px solid var(--trait)}
.section__titre{max-width:22ch}

/* --------------------------------------------- les trois services
   Aucune carte, aucune bordure : des lignes de registre, un grand
   numéro, et une flèche qui avance au survol. */
.registre{list-style:none;margin:0;padding:0;border-top:1px solid var(--trait)}
.registre>li{border-bottom:1px solid var(--trait)}
.registre a{
  display:grid;grid-template-columns:5.5rem minmax(0,1fr) auto;
  gap:clamp(1rem,3vw,3rem);align-items:start;
  padding:clamp(1.75rem,3.5vw,2.75rem) 0;
  text-decoration:none;position:relative;
  transition:padding-left var(--lent),color var(--vif);
}
.registre a::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:0;
  background:var(--papier-2);z-index:-1;transition:width var(--lent);
}
.registre a:hover{padding-left:1.25rem}
.registre__num{font-family:'Instrument Serif',Georgia,serif;font-size:1.5rem;color:var(--encre-3);line-height:1.3}
.registre__titre{display:block;font-family:'Instrument Serif',Georgia,serif;font-size:clamp(1.5rem,2.6vw,2.25rem);line-height:1.1;margin:0 0 .6rem}
.registre__texte{display:block;color:var(--encre-2);font-size:1rem;max-width:56ch;margin:0}
.registre__fleche{
  align-self:center;width:2.75rem;height:2.75rem;border-radius:999px;
  border:1px solid var(--trait);display:grid;place-items:center;
  transition:background var(--vif),border-color var(--vif),transform var(--vif);
}
.registre a:hover .registre__fleche{background:var(--ardoise);border-color:var(--ardoise);transform:translateX(4px)}
.registre a:hover .registre__fleche svg{stroke:var(--papier)}
.registre__fleche svg{stroke:var(--encre);transition:stroke var(--vif)}
@media (max-width:56rem){
  .registre a{grid-template-columns:2.5rem minmax(0,1fr);gap:1rem}
  .registre__fleche{display:none}
}

/* ------------------------------------------------------ la figure
   Les images ne portent ni cadre ni ombre. Une légende fine dessous,
   alignée à gauche, comme une planche. */
figure{margin:0}
.figure img{width:100%}

/* La ligne de précision sous un chiffre commercial : elle doit être lue si
   on la cherche, et ne jamais casser l'élan de l'argument. */
.prose .mention{
  font-size:.8125rem;line-height:1.5;color:var(--encre-3);
  margin-top:-.35rem;
}
.figure figcaption{
  margin-top:.85rem;padding-top:.85rem;border-top:1px solid var(--trait);
  font-size:.8125rem;color:var(--encre-3);line-height:1.5;
}
.section--ardoise .figure figcaption{border-color:var(--trait-sombre);color:rgba(244,241,235,.55)}

/* ------------------------------------------------ avant / après lumière
   Le seul dispositif interactif du site, et il dit le produit :
   on tire la poignée, la pièce s'éclaire. */
.revele{position:relative;user-select:none;overflow:hidden;background:var(--ardoise-2)}
.revele img{width:100%;display:block}
.revele__apres{position:absolute;inset:0;clip-path:inset(0 0 0 var(--part,50%))}
.revele__apres img{height:100%;object-fit:cover}
.revele__avant{filter:brightness(.42) saturate(.65) contrast(1.05)}
.revele__poignee{
  position:absolute;top:0;bottom:0;left:var(--part,50%);width:2px;
  background:var(--papier);transform:translateX(-1px);pointer-events:none;
  box-shadow:0 0 0 1px rgba(20,18,15,.15);
}
.revele__poignee::after{
  content:"";position:absolute;top:50%;left:50%;width:3rem;height:3rem;
  transform:translate(-50%,-50%);border-radius:999px;
  background:var(--papier);box-shadow:0 4px 20px rgba(20,18,15,.28);
}
.revele__pastille{
  position:absolute;top:50%;left:var(--part,50%);transform:translate(-50%,-50%);
  z-index:2;pointer-events:none;font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--encre);font-weight:500;
}
.revele input[type="range"]{
  position:absolute;inset:0;width:100%;height:100%;margin:0;
  opacity:0;cursor:ew-resize;
}
.revele__legendes{display:flex;justify-content:space-between;margin-top:.85rem;padding-top:.85rem;border-top:1px solid var(--trait);font-size:.8125rem;color:var(--encre-3)}

/* ------------------------------------------------------ la coupe SVG */
.coupe{width:100%;height:auto;display:block}
.coupe text{font-family:'Inter',sans-serif;font-size:11px;fill:var(--encre-2);letter-spacing:.02em}
.coupe .cote{font-size:10px;fill:var(--encre-3)}

/* --------------------------------------------------------- étapes */
.etapes{list-style:none;margin:0;padding:0;counter-reset:pas;border-top:1px solid var(--trait)}
.etapes li{
  counter-increment:pas;border-bottom:1px solid var(--trait);
  display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:clamp(1rem,3vw,3rem);
  padding:clamp(1.5rem,3vw,2.5rem) 0;
}
.etapes li::before{
  content:"0" counter(pas);
  font-family:'Instrument Serif',Georgia,serif;font-size:1.5rem;color:var(--encre-3);line-height:1.2;
}
.etapes h3{font-size:clamp(1.15rem,1.7vw,1.5rem);margin-bottom:.5rem}
.etapes p{color:var(--encre-2);font-size:1rem;max-width:60ch}
@media (max-width:56rem){.etapes li{grid-template-columns:2.5rem minmax(0,1fr);gap:1rem}}

/* --------------------------------------------------------- preuves */
.preuves{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--trait-sombre)}
.preuves li{padding:clamp(1.75rem,3vw,2.75rem) clamp(1rem,2vw,2rem) 0 0}
.preuves li+li{border-left:1px solid var(--trait-sombre);padding-left:clamp(1rem,2vw,2rem)}
.preuves strong{
  display:block;font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(3rem,6vw,4.75rem);line-height:1;color:var(--papier);margin-bottom:.6rem;
  letter-spacing:-.02em;
}
.preuves span{color:rgba(244,241,235,.6);font-size:.9375rem;line-height:1.6;display:block;max-width:30ch}
@media (max-width:56rem){
  .preuves{grid-template-columns:1fr}
  .preuves li{padding:1.5rem 0}
  .preuves li+li{border-left:none;border-top:1px solid var(--trait-sombre);padding-left:0}
}

/* -------------------------------------------------------- symptômes */
.symptomes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--trait)}
.symptomes li{border-bottom:1px solid var(--trait)}
.symptomes li:nth-child(odd){border-right:1px solid var(--trait)}
.symptomes a{
  display:block;padding:1.5rem clamp(1rem,2vw,2rem) 1.5rem 0;text-decoration:none;
  transition:background var(--vif),padding-left var(--vif);
}
.symptomes a:hover{background:var(--papier-2);padding-left:1rem}
.symptomes strong{display:block;font-weight:500;margin-bottom:.3rem}
.symptomes span{color:var(--encre-2);font-size:.9375rem}
@media (max-width:56rem){
  .symptomes{grid-template-columns:1fr}
  .symptomes li:nth-child(odd){border-right:none}
  .symptomes a{padding-right:0}
}

/* -------------------------------------------------------------- FAQ */
.faq{border-top:1px solid var(--trait)}
.faq details{border-bottom:1px solid var(--trait)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.5rem 3rem 1.5rem 0;position:relative;
  font-family:'Instrument Serif',Georgia,serif;font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.25;
  transition:color var(--vif);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.35rem;top:2.1rem;width:14px;height:14px;
  background:
    linear-gradient(var(--encre),var(--encre)) center/14px 1px no-repeat,
    linear-gradient(var(--encre),var(--encre)) center/1px 14px no-repeat;
  transition:transform var(--vif);
}
.faq details[open] summary::after{transform:rotate(90deg);background:linear-gradient(var(--lumiere),var(--lumiere)) center/14px 1px no-repeat}
.faq details p{color:var(--encre-2);padding:0 3rem 1.75rem 0;margin:0;max-width:70ch}
.faq details p+p{padding-top:0;margin-top:-.5rem}

/* ------------------------------------------------------ appel final */
.final{background:var(--ardoise);color:var(--papier);padding:var(--pas-section) 0;position:relative;overflow:hidden}
.final::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(90% 120% at 15% 0%,rgba(217,162,94,.22),transparent 60%);
  pointer-events:none;
}
.final__contenu{position:relative}
.final h2{max-width:18ch}
.final__tel{
  display:inline-block;margin-top:clamp(1.5rem,3vw,2.5rem);
  font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(2.5rem,7vw,5rem);line-height:1;letter-spacing:-.02em;
  color:var(--papier);text-decoration:none;font-variant-numeric:tabular-nums;
  transition:color var(--vif);
}
.final__tel:hover{color:var(--lumiere-2)}
.final__note{margin-top:1.25rem;color:rgba(244,241,235,.55);font-size:.9375rem}

/* -------------------------------------------------------- pages int. */
.bandeau{padding:clamp(3rem,7vw,6rem) 0 clamp(2rem,4vw,3.5rem);border-bottom:1px solid var(--trait)}
.bandeau h1{max-width:18ch}
/* Les titres de guides sont des phrases entières : au corps de l'accueil ils
   occuperaient quatre lignes. On les ramène d'un cran. */
.bandeau--guide h1{font-size:clamp(2.25rem,4.2vw,3.5rem);max-width:26ch;line-height:1.06}
.bandeau .chapo{margin-top:1.5rem}

.prose{max-width:var(--mesure);font-size:1.0625rem}
.prose h2{font-size:clamp(1.6rem,2.8vw,2.35rem);margin:2.75em 0 .7em}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:clamp(1.2rem,1.8vw,1.5rem);margin:2em 0 .5em}
.prose ul{padding-left:0;list-style:none;margin:0 0 1.5em}
.prose li{position:relative;padding-left:1.5rem;margin-bottom:.6rem}
.prose li::before{content:"";position:absolute;left:0;top:.72em;width:.4rem;height:1px;background:var(--lumiere)}
.prose .note{
  background:var(--papier-2);border-left:2px solid var(--lumiere);
  padding:1.5rem 1.75rem;margin:2.5rem 0;font-size:1rem;color:var(--encre-2);
}
.prose figure{margin:2.5rem 0}

/* colonne latérale des pages service */
.duo{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.lateral{position:sticky;top:6.5rem;border-top:1px solid var(--encre);padding-top:1.5rem}
.lateral h2{font-size:1.25rem;margin-bottom:1.25rem}
.lateral ul{list-style:none;margin:0 0 1.75rem;padding:0}
.lateral li{padding:.7rem 0;border-bottom:1px solid var(--trait);font-size:.9375rem;color:var(--encre-2)}
.lateral .bouton{width:100%;justify-content:center}
@media (max-width:64rem){.duo{grid-template-columns:1fr}.lateral{position:static}}

/* --------------------------------------------------------- articles */
.articles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--trait)}
.articles li{border-bottom:1px solid var(--trait)}
.articles li:nth-child(odd){border-right:1px solid var(--trait)}
.articles a{display:block;padding:clamp(1.75rem,3vw,2.5rem) clamp(1.5rem,3vw,2.5rem) clamp(1.75rem,3vw,2.5rem) 0;text-decoration:none;height:100%;transition:background var(--vif),padding-left var(--vif)}
.articles a:hover{background:var(--papier-2);padding-left:1.25rem}
.articles h3{font-size:clamp(1.25rem,2vw,1.65rem);margin-bottom:.6rem;max-width:24ch}
.articles p{color:var(--encre-2);font-size:.9375rem;margin:0;max-width:46ch}
.articles .suite{display:inline-block;margin-top:1rem;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lumiere);font-weight:500}
@media (max-width:56rem){
  .articles{grid-template-columns:1fr}
  .articles li:nth-child(odd){border-right:none}
  .articles a{padding-right:0}
}

/* ---------------------------------------------------------- contact */
.fiche-contact{border-top:1px solid var(--encre);padding-top:2rem}
.fiche-contact dl{margin:2.5rem 0 0;display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.fiche-contact dt{font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--encre-3);padding-top:1.25rem;border-top:1px solid var(--trait);margin-bottom:.5rem}
.fiche-contact dd{margin:0 0 1.25rem;color:var(--encre-2)}
.tel-geant{
  font-family:'Instrument Serif',Georgia,serif;font-size:clamp(2.25rem,5.5vw,3.75rem);
  line-height:1;letter-spacing:-.02em;text-decoration:none;font-variant-numeric:tabular-nums;
  display:inline-block;transition:color var(--vif);
}
.tel-geant:hover{color:var(--lumiere)}

/* ------------------------------------------------------------- pied */
.pied{background:var(--ardoise);color:rgba(244,241,235,.7);padding:clamp(3rem,6vw,5rem) 0 2rem;font-size:.9375rem}
.pied a{color:var(--papier);text-decoration:none}
.pied a:hover{color:var(--lumiere-2)}
.pied__haut{display:grid;grid-template-columns:2fr 1fr 1.5fr;gap:clamp(2rem,4vw,4rem);padding-bottom:2.5rem;border-bottom:1px solid var(--trait-sombre)}
.pied h2{font-family:'Inter',sans-serif;font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,241,235,.45);margin-bottom:1.25rem}
.pied ul{list-style:none;margin:0;padding:0}
.pied li{margin-bottom:.5rem}
.pied__marque{font-family:'Instrument Serif',Georgia,serif;font-size:1.75rem;color:var(--papier);line-height:1.15;margin-bottom:.75rem}
.pied__bas{padding-top:1.75rem;font-size:.8125rem;color:rgba(244,241,235,.45)}
.pied__bas p{margin-bottom:.4rem}
@media (max-width:56rem){.pied__haut{grid-template-columns:1fr;gap:2.5rem}}

/* ------------------------------------------------- barre d'appel mobile */
.appel-fixe{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;background:var(--ardoise);border-top:1px solid var(--trait-sombre)}
.appel-fixe a{flex:1;text-align:center;padding:1rem .5rem;text-decoration:none;font-size:.9375rem;font-weight:500;color:var(--papier)}
.appel-fixe a:first-child{background:var(--lumiere)}
.appel-fixe svg{vertical-align:-3px;margin-right:.4rem}
@media (max-width:60rem){
  .appel-fixe{display:flex}
  body{padding-bottom:3.5rem}
  /* Menu ouvert : la barre d'appel fait doublon avec la navigation et lui
     mangeait ses derniers liens en paysage. On l'escamote le temps du
     menu ; le numéro reste joignable par la page Contact. */
  body.nav-ouverte .appel-fixe{display:none}
  .lateral{position:static}
}

/* ---------------------------------------- apparitions au défilement */
@media (prefers-reduced-motion:no-preference){
  .monte{opacity:0;transform:translateY(18px);transition:opacity var(--lent),transform var(--lent)}
  .monte.vu{opacity:1;transform:none}
}

/* tableaux sobres, dans les guides */
table{border-collapse:collapse;width:100%;margin:2rem 0;font-size:.9375rem}
th,td{border-bottom:1px solid var(--trait);padding:.85rem 1rem .85rem 0;text-align:left;vertical-align:top}
th{font-weight:500;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--encre-3)}