:root{
  --parchemin:#F4EEE4; --sable:#E5D9C8; --terre:#B0663A; --terre-clair:#C68B5F;
  --encre:#2B2119; --encre-doux:#6F6355; --marge:clamp(22px,5vw,80px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-snap-type:y proximity}
body{background:var(--parchemin);color:var(--encre);font-family:'Jost',system-ui,sans-serif;
  font-weight:300;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1px solid var(--terre);outline-offset:4px}
.fil{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase}
.serif{font-family:'Cormorant Garamond',serif;font-weight:300;line-height:1.12}
.aremplir{border-bottom:1px dotted var(--terre);cursor:help}

/* ---------- bandeau ---------- */
header{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;gap:30px;padding:20px var(--marge);color:#fff;
  transition:background .5s ease,color .5s ease,padding .5s ease}
header::before{content:'';position:absolute;inset:0 0 auto 0;height:190px;z-index:-1;
  background:linear-gradient(180deg,rgba(20,14,9,.62),rgba(20,14,9,.30) 52%,rgba(20,14,9,0));
  transition:opacity .5s ease;pointer-events:none}
header.pose{background:var(--parchemin);color:var(--encre);padding-top:12px;padding-bottom:12px;
  border-bottom:1px solid rgba(43,33,25,.12)}
header.pose::before{opacity:0}
.logo{display:block;line-height:0;color:inherit}
.logo svg{height:38px;width:auto;display:block;transition:height .5s ease}
header.pose .logo svg{height:32px}
nav{display:flex;align-items:center;gap:clamp(18px,3vw,44px)}
nav .fil{font-size:11.5px;letter-spacing:.24em}
header:not(.pose) nav a{text-shadow:0 1px 14px rgba(20,14,9,.6)}
.item{position:relative}
.item > a{opacity:.92;transition:opacity .3s;padding-bottom:22px;display:inline-block}
.item > a:hover,.item > a.actif{opacity:1}
.item > a.actif{border-bottom:1px solid currentColor;padding-bottom:5px}
.sous{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%) translateY(-6px);
  background:var(--parchemin);color:var(--encre);padding:16px 24px;display:flex;flex-direction:column;
  gap:11px;opacity:0;visibility:hidden;transition:opacity .3s,transform .3s;white-space:nowrap;
  border:1px solid rgba(43,33,25,.1)}
.item:hover .sous,.item:focus-within .sous{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.sous a{opacity:.7;transition:opacity .25s;text-shadow:none!important}
.sous a:hover{opacity:1}
.devis{border:1px solid rgba(255,255,255,.85);padding:11px 22px;color:#fff;
  transition:background .35s,color .35s,border-color .35s;text-shadow:none!important}
.devis:hover{background:#fff;color:var(--encre)}
header.pose .devis{background:var(--terre);border-color:var(--terre);color:#fff}
header.pose .devis:hover{background:var(--encre);border-color:var(--encre)}
.bouton-menu{display:none;background:none;border:0;color:inherit;cursor:pointer;
  letter-spacing:.2em;font-size:11px;font-family:inherit;text-transform:uppercase}

/* ---------- défilé accueil ---------- */
.projet{position:relative;height:100svh;min-height:540px;overflow:hidden;background:var(--encre)}
.projet img{opacity:.92;transform:scale(1.02)}
.projet::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,14,9,.42),rgba(20,14,9,0) 34%,rgba(20,14,9,.55))}
.etiquette{position:absolute;z-index:3;left:var(--marge);bottom:clamp(40px,7vh,64px);color:#fff}
.etiquette .nom{font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:clamp(34px,5.4vw,66px);line-height:1.05}
.etiquette .lieu{margin-top:12px;opacity:.82}
.reperes{position:absolute;z-index:3;right:var(--marge);bottom:clamp(40px,7vh,64px);color:#fff;
  opacity:.75;text-align:right}

/* ---------- bandeau de page ---------- */
.entete{padding:clamp(130px,17vh,190px) var(--marge) clamp(40px,6vh,70px);border-bottom:1px solid rgba(43,33,25,.14)}
.entete h1{font-size:clamp(38px,6vw,88px)}
.entete .sous-titre{color:var(--encre-doux);margin-top:18px;max-width:52ch}

/* ---------- blocs ---------- */
.bloc{padding:clamp(70px,11vh,140px) var(--marge)}
.mesure{max-width:1280px;margin:0 auto}
.chapeau{color:var(--terre);margin-bottom:34px}
.grand{font-size:clamp(29px,4vw,58px);max-width:20ch}
.texte{max-width:58ch;color:var(--encre-doux);font-size:16.5px;margin-top:30px}
.texte p + p{margin-top:20px}
.texte strong{font-weight:400;color:var(--encre)}
.trait{width:52px;height:1px;background:var(--terre);margin:38px 0}
.paire{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,96px);align-items:center}
.paire.inverse .visuel{order:2}
.visuel{aspect-ratio:4/5;overflow:hidden;background:var(--sable)}
.visuel.paysage{aspect-ratio:3/2}
.visuel img{transition:transform 1.4s cubic-bezier(.2,.7,.3,1)}
.visuel:hover img{transform:scale(1.03)}

/* ---------- grille de projets ---------- */
.famille{margin-bottom:clamp(60px,9vh,110px)}
.famille > .fil{color:var(--terre);display:block;margin-bottom:10px}
.famille > h2{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(26px,3.2vw,42px);
  margin-bottom:44px;max-width:24ch}
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
  gap:clamp(20px,3vw,44px)}
.vignette{display:block}
.vignette .cadre{aspect-ratio:4/3;overflow:hidden;background:var(--sable)}
.vignette img{transition:transform 1.2s cubic-bezier(.2,.7,.3,1),opacity .5s}
.vignette:hover img{transform:scale(1.04)}
.vignette .nom{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:23px;margin-top:16px}
.vignette .info{color:var(--encre-doux);margin-top:4px}

/* ---------- étapes ---------- */
.collaborer{background:var(--sable)}
.etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(26px,4vw,58px);margin-top:70px}
.etape{border-top:1px solid rgba(43,33,25,.22);padding-top:22px}
.etape .rang{color:var(--terre);display:block;margin-bottom:14px}
.etape h3{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:25px;margin-bottom:12px}
.etape p{color:var(--encre-doux);font-size:15.5px}
.lien-terre{display:inline-block;margin-top:52px;color:var(--terre);border-bottom:1px solid var(--terre);
  padding-bottom:6px;transition:opacity .3s}
.lien-terre:hover{opacity:.65}

/* ---------- formulaire ---------- */
.formulaire{max-width:820px}
.duree{color:var(--terre);margin-bottom:8px}
fieldset{border:0;border-top:1px solid rgba(43,33,25,.18);padding:34px 0 8px;margin-top:44px}
legend{font-family:'Cormorant Garamond',serif;font-size:27px;padding-right:20px}
.question{margin-bottom:34px}
.question > label{display:block;margin-bottom:14px;font-size:16.5px}
.choix{display:flex;flex-wrap:wrap;gap:10px}
.choix span{border:1px solid rgba(43,33,25,.28);padding:9px 17px;font-size:14px;cursor:pointer;
  transition:background .25s,border-color .25s,color .25s}
.choix span:hover,.choix span.pris{background:var(--encre);border-color:var(--encre);color:var(--parchemin)}
.champ{width:100%;border:0;border-bottom:1px solid rgba(43,33,25,.3);background:transparent;
  padding:11px 0;font-family:inherit;font-size:16px;font-weight:300;color:var(--encre)}
.champ::placeholder{color:var(--encre-doux);opacity:.6}
textarea.champ{border:1px solid rgba(43,33,25,.3);padding:14px;min-height:96px;resize:vertical}
.envoyer{margin-top:44px;background:var(--terre);color:#fff;border:0;padding:16px 40px;
  font-family:inherit;font-size:11px;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;
  transition:background .3s}
.envoyer:hover{background:var(--encre)}
.avis{margin-top:22px;color:var(--encre-doux);font-size:14.5px}

/* ---------- fiche projet ---------- */
.plein{height:78svh;min-height:440px;overflow:hidden;background:var(--encre)}
.plein-page{position:relative;height:100svh;min-height:520px;overflow:hidden;background:var(--encre)}
.plein-page img{opacity:.96}
.plein-page::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,14,9,.34),rgba(20,14,9,0) 30%,rgba(20,14,9,.42))}
.legende-plein{position:absolute;z-index:3;left:var(--marge);bottom:36px;color:#fff;opacity:.9;
  text-shadow:0 1px 14px rgba(20,14,9,.7)}
.compteur-plein{position:absolute;z-index:3;right:var(--marge);bottom:36px;color:#fff;opacity:.75;
  text-shadow:0 1px 14px rgba(20,14,9,.7)}
.fil-ariane{display:flex;gap:14px;align-items:center;color:var(--encre-doux);margin-bottom:26px}
.fil-ariane a{border-bottom:1px solid var(--terre);padding-bottom:3px;color:var(--terre)}
.suite{border-top:1px solid rgba(43,33,25,.16);display:flex;justify-content:space-between;
  gap:24px;flex-wrap:wrap;align-items:center}
.suite a{color:var(--terre)}
.galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
  gap:clamp(16px,2.4vw,32px);margin-top:60px}
.galerie .cadre{aspect-ratio:3/2;overflow:hidden;background:var(--sable)}
.fiche-meta{display:flex;flex-wrap:wrap;gap:38px;margin-top:34px;color:var(--encre-doux)}
.fiche-meta div{min-width:130px}
.fiche-meta dt{color:var(--terre);margin-bottom:5px}


/* ---------- portfolio plein écran ---------- */
.vue{position:relative;height:100svh;min-height:520px;overflow:hidden;background:var(--encre);
  scroll-snap-align:start}
.vue img{opacity:.96}
.vue.premiere::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,14,9,.52),rgba(20,14,9,0) 38%,rgba(20,14,9,.6))}
.compteur{position:fixed;right:var(--marge);bottom:32px;z-index:45;color:#fff;opacity:0;
  transition:opacity .45s ease;pointer-events:none;text-shadow:0 1px 12px rgba(20,14,9,.75)}
.compteur.visible{opacity:.82}
/* (règle .retour unifiée plus bas) */
.suite{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:70px;
  padding-top:26px;border-top:1px solid rgba(43,33,25,.18)}
.suite a{color:var(--terre)}
.solo{color:var(--encre-doux);font-size:14.5px;margin-top:26px}

/* ---------- menu mobile ---------- */

/* ---------- pied ---------- */
footer{background:var(--encre);color:var(--parchemin);padding:clamp(80px,12vh,130px) var(--marge) 44px}
.pied-haut{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;padding-bottom:64px;
  border-bottom:1px solid rgba(244,238,228,.16)}
.pied-haut h2{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(28px,3.6vw,46px);
  max-width:14ch;line-height:1.1}
footer h4{color:var(--terre-clair);margin-bottom:20px}
footer li{list-style:none;margin-bottom:10px;opacity:.72;font-size:15px}
footer li a:hover{opacity:1;color:#fff}
.pied-bas{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:28px;opacity:.55}

.monte{opacity:0;transform:translateY(22px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.3,1)}
.monte.vu{opacity:1;transform:none}

@media(max-width:900px){
  header nav{display:none}
  .bouton-menu{display:block}
  .paire{grid-template-columns:1fr;gap:34px}
  .paire.inverse .visuel{order:0}
  .pied-haut{grid-template-columns:1fr;gap:44px}
  .reperes{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}*{transition:none!important;animation:none!important}
  .monte{opacity:1;transform:none}
}

/* ============================================================
   PORTFOLIO PLEIN ÉCRAN
   Une image par écran, on descend au défilement.
   Le bandeau reste visible en permanence par-dessus.
   ============================================================ */
.page-projet{background:var(--encre)}
.portfolio{scroll-snap-type:y proximity}
.ecran{position:relative;height:100svh;min-height:520px;overflow:hidden;
  background:var(--encre);scroll-snap-align:start}
.ecran img{opacity:.94}
.ecran::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,14,9,.45),rgba(20,14,9,0) 32%,rgba(20,14,9,.5))}
.ecran .etiquette,.ecran .reperes,.ecran .invite{position:absolute;z-index:3;color:#fff}
.ecran .etiquette{left:var(--marge);bottom:clamp(40px,7vh,64px)}
.ecran .etiquette .nom{font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:clamp(32px,5vw,62px);line-height:1.05}
.ecran .etiquette .lieu{margin-top:12px;opacity:.82}
.ecran .reperes{right:var(--marge);bottom:clamp(40px,7vh,64px);opacity:.7}
.ecran .invite{left:50%;bottom:24px;transform:translateX(-50%);opacity:.5;
  animation:respire 2.6s ease-in-out infinite}
@keyframes respire{0%,100%{opacity:.5;transform:translateX(-50%) translateY(0)}
  50%{opacity:.9;transform:translateX(-50%) translateY(5px)}}

/* Retour à la catégorie : accroché en haut à gauche, sous le bandeau,
   accessible depuis n'importe quel écran du portfolio. */
.retour{position:fixed;z-index:55;left:var(--marge);top:74px;bottom:auto;
  color:#fff;opacity:.85;padding:6px 0;border-bottom:1px solid currentColor;
  text-shadow:0 1px 12px rgba(20,14,9,.7);
  transition:opacity .3s ease,color .5s ease,top .5s ease}
.retour:hover{opacity:1}
body.page-projet header.pose ~ .retour{color:var(--encre);top:62px;text-shadow:none}

.navigation-projet{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:60px;padding-top:26px;border-top:1px solid rgba(43,33,25,.18)}
.page-projet .bloc{background:var(--parchemin)}

/* ============================================================
   FORMULAIRE — vrais champs, pas de faux boutons
   ============================================================ */
.choix-item{display:inline-flex;align-items:center;cursor:pointer}
.choix-item input{position:absolute;opacity:0;width:1px;height:1px}
.choix-item span{display:inline-block;border:1px solid rgba(43,33,25,.28);padding:9px 17px;
  font-size:14px;transition:background .25s,border-color .25s,color .25s}
.choix-item:hover span{border-color:var(--encre)}
.choix-item input:checked + span{background:var(--encre);border-color:var(--encre);color:var(--parchemin)}
.choix-item input:focus-visible + span{outline:1px solid var(--terre);outline-offset:3px}
.consentement span{border:0;padding:0;font-size:14.5px;color:var(--encre-doux)}
.consentement input{position:static;opacity:1;width:auto;height:auto;margin-right:10px}
input[type=file].champ{border:1px dashed rgba(43,33,25,.35);padding:16px}

.bouton-terre{display:inline-block;margin-top:44px;background:var(--terre);color:#fff;
  padding:16px 40px;transition:background .3s}
.bouton-terre:hover{background:var(--encre)}

/* ============================================================
   MENU MOBILE
   ============================================================ */
@media(max-width:900px){
  header nav{display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--parchemin);color:var(--encre);flex-direction:column;
    align-items:flex-start;gap:0;padding:14px var(--marge) 26px;
    border-bottom:1px solid rgba(43,33,25,.14)}
  header nav.ouvert{display:flex}
  header nav .item{width:100%}
  header nav .item > a{padding:13px 0;width:100%;text-shadow:none!important}
  header nav .sous{position:static;transform:none;opacity:1;visibility:visible;
    border:0;padding:0 0 10px 18px;background:transparent}
  header nav .devis{margin-top:16px}
  .retour{top:64px}
}

/* Lien couvrant toute une image du défilé d'accueil. */
.lien-plein{position:absolute;inset:0;z-index:4}
#defile > .projet{scroll-snap-align:start}
#defile{scroll-snap-type:y proximity}
.projet .invite{position:absolute;z-index:3;left:50%;bottom:24px;transform:translateX(-50%);
  color:#fff;opacity:.5;animation:respire 2.6s ease-in-out infinite}


/* ============================================================
   BANDEAU TOUJOURS ACCESSIBLE
   Transparent uniquement tout en haut, par-dessus la première
   image. Dès qu'on descend, il se pose en parchemin et reste
   lisible quelle que soit la photo derrière.
   ============================================================ */
header{backdrop-filter:none}
header.pose{box-shadow:0 1px 24px rgba(43,33,25,.07)}

/* Menu mobile : panneau déroulant, fermeture au clic ou par Échap. */
@media(max-width:900px){
  header nav.ouvert{display:flex}
  header nav.ouvert .devis{align-self:stretch;text-align:center;background:var(--terre);
    border-color:var(--terre);color:#fff}
  .bouton-menu{border:1px solid currentColor;padding:8px 14px}
}

/* ============================================================
   PORTFOLIO — présentation centrée sur marge parchemin
   L'image n'est plus recadrée : elle est contenue et centrée,
   donc toujours visible en entier, quel que soit son format et
   quelle que soit la taille de l'écran.
   ============================================================ */
body.page-projet{background:var(--parchemin)}

/* Sur fond clair, le bandeau est posé en permanence. */
body.page-projet header{background:var(--parchemin);color:var(--encre);
  padding-top:12px;padding-bottom:12px;border-bottom:1px solid rgba(43,33,25,.12)}
body.page-projet header::before{opacity:0}
body.page-projet header .logo svg{height:32px}
body.page-projet nav a{text-shadow:none!important}
body.page-projet .devis{background:var(--terre);border-color:var(--terre);color:#fff}
body.page-projet .devis:hover{background:var(--encre);border-color:var(--encre)}
body.page-projet .retour{color:var(--encre);text-shadow:none;top:62px;opacity:.7}
body.page-projet .retour:hover{opacity:1}

.ecran{position:relative;height:100svh;min-height:500px;overflow:hidden;
  background:var(--parchemin);scroll-snap-align:start;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(86px,11vh,124px) var(--marge) clamp(74px,10vh,104px)}
.ecran::after{content:none}

/* On neutralise le recadrage global : l'image garde ses proportions. */
.ecran img{width:auto;height:auto;max-width:100%;max-height:100%;
  object-fit:contain;opacity:1;
  box-shadow:0 20px 64px rgba(43,33,25,.11)}

/* Légendes dans la marge basse, en encre. */
.ecran .etiquette,.ecran .reperes,.ecran .invite{color:var(--encre)}
.ecran .etiquette{left:var(--marge);bottom:clamp(22px,3.4vh,36px);max-width:60%}
.ecran .etiquette .nom{font-size:clamp(22px,3.2vw,40px)}
.ecran .etiquette .lieu{margin-top:6px;color:var(--encre-doux);opacity:1}
.ecran .reperes{right:var(--marge);bottom:clamp(22px,3.4vh,36px);
  color:var(--encre-doux);opacity:1}
.ecran .invite{bottom:clamp(22px,3.4vh,36px);color:var(--encre-doux);opacity:.7}

@media(max-width:900px){
  .ecran{padding:clamp(74px,10vh,96px) 18px clamp(84px,11vh,104px)}
  .ecran .etiquette{max-width:100%}
  .ecran .invite{display:none}
}


/* ============================================================
   LOGO — retour à l'accueil depuis n'importe quelle page
   ============================================================ */
.logo{display:inline-flex;align-items:center;line-height:0;color:inherit;
  margin:-10px -14px;padding:10px 14px;transition:opacity .3s ease}
.logo:hover{opacity:.62}
.logo:focus-visible{outline:1px solid currentColor;outline-offset:2px}
header:not(.pose) .logo svg{filter:drop-shadow(0 1px 10px rgba(20,14,9,.55))}
header.pose .logo svg{filter:none}

/* ============================================================
   SOUS-NAVIGATION
   Sur une page de sous-catégorie, on doit pouvoir passer à
   l'autre sans remonter au menu ni dépendre du survol —
   qui n'existe pas sur mobile.
   ============================================================ */
.sous-nav{display:flex;flex-wrap:wrap;gap:26px;margin-top:32px;padding-top:22px;
  border-top:1px solid rgba(43,33,25,.16)}
.sous-nav a{color:var(--encre-doux);padding-bottom:4px;border-bottom:1px solid transparent;
  transition:color .3s ease,border-color .3s ease}
.sous-nav a:hover{color:var(--encre)}
.sous-nav a.actif{color:var(--terre);border-bottom-color:var(--terre)}

/* Sur une fiche projet, la barre reprend au-dessus des liens de bas de page. */
.page-projet .sous-nav{margin-top:44px}

/* ============================================================
   LIEN D'ÉVITEMENT
   Invisible tant qu'on ne tabule pas : permet d'atteindre le
   contenu sans traverser tout le menu au clavier.
   ============================================================ */
.evitement{position:fixed;top:-60px;left:var(--marge);z-index:80;
  background:var(--encre);color:var(--parchemin);padding:12px 20px;
  transition:top .25s ease}
.evitement:focus{top:12px}

/* Une vidéo se comporte comme une image du portfolio : contenue,
   centrée, jamais recadrée. */
.ecran video{width:auto;height:auto;max-width:100%;max-height:100%;
  object-fit:contain;display:block;box-shadow:0 20px 64px rgba(43,33,25,.11)}


/* ============================================================
   BANDEAU PLUS BAS
   Il occupait près de 80 px et mangeait le haut des pages.
   ============================================================ */
header{padding-top:14px;padding-bottom:14px}
header.pose{padding-top:10px;padding-bottom:10px}
.logo svg{height:30px}
header.pose .logo svg{height:28px}
.devis{padding:9px 18px}
nav .fil{font-size:11px}
.retour{top:58px}
body.page-projet .retour{top:54px}

/* Le titre de page ne doit plus passer sous le bandeau. */
.entete{padding-top:clamp(96px,12vh,132px);padding-bottom:clamp(28px,4vh,48px)}
.entete h1{font-size:clamp(32px,4.6vw,62px)}
.entete .sous-titre{margin-top:14px;font-size:15.5px}
.sous-nav{margin-top:24px;padding-top:18px}

/* Le premier écran d'un portfolio doit tenir compte du bandeau posé. */
.ecran{padding-top:clamp(74px,9vh,104px)}

@media(max-width:900px){
  .logo svg{height:26px}
  .entete{padding-top:clamp(84px,11vh,110px)}
}

/* ============================================================
   LOGO EN IMAGE
   Le dessin d'origine, avec son grain et son bleu. Un filtre le
   passe en blanc là où le fond est sombre — par-dessus la première
   image de l'accueil et dans le pied de page.
   ============================================================ */
.logo img{height:30px;width:auto;display:block;transition:height .5s ease,filter .5s ease}
header.pose .logo img{height:28px;filter:none}
header:not(.pose) .logo img{filter:brightness(0) invert(1) drop-shadow(0 1px 10px rgba(20,14,9,.5))}
.logo-pied img{height:56px;width:auto;filter:brightness(0) invert(1);opacity:.9}
@media(max-width:900px){.logo img{height:26px}}

/* Sur la page Intérieur, l'intitulé de chaque famille mène à sa page. */
.tete-famille{display:block;transition:opacity .3s ease}
.tete-famille:hover{opacity:.62}
.tete-famille .fil{color:var(--terre);display:block}
.tete-famille h2{margin-top:8px}
.tete-famille .aller{color:var(--encre-doux);margin-top:12px;
  border-bottom:1px solid rgba(43,33,25,.3);display:inline-block;padding-bottom:3px}
.tete-famille .aller::after{content:' →'}
.tete-famille:hover .aller{border-bottom-color:var(--terre);color:var(--terre)}


/* ============================================================
   GARDE-FOU
   Les règles du bandeau ne doivent viser que #tete. Sans ça,
   tout autre <header> de la page se retrouvait fixé en haut de
   l'écran, invisible, et bloquait les clics sur le menu.
   ============================================================ */
.entete{position:static;z-index:auto;background:none;color:var(--encre);
  display:block;inset:auto;box-shadow:none;border-bottom:1px solid rgba(43,33,25,.14)}
.entete::before{content:none}
.entete h1{color:var(--encre)}
.entete .sous-titre{color:var(--encre-doux)}

/* Le sous-menu doit rester atteignable : aucun vide entre l'entrée
   du menu et le panneau qui se déploie, sinon le survol se rompt. */
.sous{top:100%;padding-top:20px}
.item > a{padding-bottom:20px}
.sous a{display:block;padding:3px 0}

/* ============================================================
   LOGO — cartouche parchemin
   Le logo garde son bleu marine partout. Il déborde sous le
   bandeau, dans un carré de parchemin qui lui appartient : le
   menu reste une bande fine, le logo respire.
   ============================================================ */
#tete{justify-content:flex-end}

.logo{
  position:absolute;left:var(--marge);top:0;z-index:2;
  background:var(--parchemin);
  padding:14px 20px 16px;
  margin:0;
  display:block;line-height:0;
  box-shadow:0 8px 34px rgba(43,33,25,.13);
  transition:opacity .3s ease;
}
.logo:hover{opacity:.7}

/* Le bleu ne change plus, quel que soit le fond. */
.logo img,
header:not(.pose) .logo img,
header.pose .logo img{
  height:52px;width:auto;display:block;filter:none;
}

/* Le lien de retour passe à droite pour dégager le cartouche. */
.retour{left:auto;right:var(--marge);top:68px}
body.page-projet .retour{left:auto;right:var(--marge);top:68px}

/* Pied de page : même cartouche, pour que le bleu reste lisible
   sur le fond encre. */
.logo-pied{display:inline-block;background:var(--parchemin);
  padding:16px 22px;margin-bottom:30px;line-height:0}
.logo-pied img{height:60px;width:auto;filter:none;opacity:1;display:block}

@media(max-width:900px){
  .logo{padding:11px 14px 13px}
  .logo img,header:not(.pose) .logo img,header.pose .logo img{height:38px}
  .retour{top:60px}
  .entete{padding-top:clamp(96px,13vh,120px)}
}


/* Le cartouche descend à 82 px : on dégage le haut des pages. */
.entete{padding-top:clamp(112px,14vh,146px)}
.ecran{padding-top:clamp(96px,11vh,120px)}
@media(max-width:900px){
  .entete{padding-top:clamp(92px,12vh,116px)}
  .ecran{padding-top:clamp(80px,10vh,100px)}
}


/* ============================================================
   LOGO — monogramme + signature, sur la hauteur du bandeau
   Plus de cartouche débordant : le lockup tient dans la bande.
   ============================================================ */
#tete{justify-content:space-between}

.logo{position:static;background:none;box-shadow:none;padding:0;margin:0;
  display:inline-flex;align-items:center;gap:13px;line-height:1;color:inherit;
  transition:opacity .3s ease}
.logo:hover{opacity:.65}

.logo img{height:34px;width:auto;display:block;filter:none;transition:height .5s ease}
header.pose .logo img{height:32px;filter:none}
/* Par-dessus la première image de l'accueil, le bleu marine ne se lit pas :
   le monogramme et la signature passent en blanc, le temps de ce seul écran. */
header:not(.pose) .logo img{filter:brightness(0) invert(1) drop-shadow(0 1px 8px rgba(20,14,9,.55))}

.logo .marque{font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:20px;letter-spacing:.22em;text-transform:uppercase;
  color:#0E3387;white-space:nowrap;transition:color .5s ease}
header:not(.pose) .logo .marque{color:#fff;text-shadow:0 1px 10px rgba(20,14,9,.55)}

/* ============================================================
   INSTAGRAM DANS LE BANDEAU
   ============================================================ */
.insta{display:inline-flex;align-items:center;opacity:.75;
  transition:opacity .3s ease,color .3s ease}
.insta:hover{opacity:1;color:var(--terre)}
header:not(.pose) .insta{color:#fff;filter:drop-shadow(0 1px 8px rgba(20,14,9,.5))}

/* Le titre de page revient à sa marge d'origine : plus de cartouche. */
.entete{padding-top:clamp(96px,12vh,132px)}
.ecran{padding-top:clamp(80px,10vh,108px)}
.retour{left:var(--marge);right:auto;top:60px}
body.page-projet .retour{left:var(--marge);right:auto;top:58px}

/* Pied de page : mêmes proportions, sur fond encre. */
.logo-pied{display:inline-flex;align-items:center;gap:15px;background:none;
  padding:0;margin-bottom:30px;line-height:1}
.logo-pied img{height:46px;width:auto;filter:brightness(0) invert(1);opacity:.92;display:block}
.logo-pied .marque{font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:24px;letter-spacing:.22em;text-transform:uppercase;color:var(--parchemin)}

@media(max-width:900px){
  .logo img{height:28px}
  .logo .marque{font-size:16px;letter-spacing:.18em}
  .entete{padding-top:clamp(86px,11vh,112px)}
}
@media(max-width:520px){
  .logo .marque{display:none}   /* le monogramme suffit sur petit écran */
}

/* Statut du projet, à côté du titre : livré ou conception seule. */
.statut{display:inline-block;vertical-align:middle;margin-left:18px;
  border:1px solid var(--terre);color:var(--terre);
  padding:5px 12px;font-size:10px;letter-spacing:.2em;
  transform:translateY(-4px);white-space:nowrap}
@media(max-width:600px){
  .statut{display:block;margin:16px 0 0;width:fit-content;transform:none}
}

/* Pages légales : des sous-titres lisibles dans un texte long. */
.texte h2{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:27px;
  color:var(--encre);margin:48px 0 16px}
.texte h2:first-child{margin-top:0}
.texte a{color:var(--terre);border-bottom:1px solid rgba(176,102,58,.4)}
.texte a:hover{border-bottom-color:var(--terre)}
.texte p.aremplir{border:1px dashed var(--terre);padding:14px 18px;color:var(--terre)}