/* Loébréa Intérieur — feuille de style unique.
   Une seule famille (Newsreader, voir fonts.css). Hiérarchie par l'échelle et l'italique.
   Fond clair et fond sombre alternent (section-claire / section-sombre) : jamais un site à fond unique.
   Le sauge est un accent, jamais un aplat de fond. */

:root{
  color-scheme: light;
  --ink:#1C1A16;
  --ink-2:#2A2721;
  /* Fond des zones sombres : sauge profond, choix d'Estelle et Gaële du 25/09 (le noir était trop dur). */
  --fond-sombre:#58624F;
  --paper:#F5F2EA;
  --paper-2:#ECE6D8;
  --sauge:#5F7052;
  --sauge-deep:#3C4733;
  --sauge-clair:#9FAE8F;
  --bois:#B99568;
  --muted:#726C5E;
  --muted-inv:#BEB8A6;
  --line: rgba(28,25,20,.15);
  --line-inv: rgba(245,242,234,.18);
  --shadow: 0 18px 50px rgba(20,18,14,.16);
  --mesure: 1340px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Newsreader',Georgia,'Times New Roman',serif;
  font-weight:400; font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* height:auto est obligatoire : sans lui, les attributs width/height du HTML écrasent
   l'image dès que sa largeur est contrainte (séjour affiché en 550x679 pour un 1600x679). */
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--mesure); margin:0 auto; padding:0 24px}

/* ---------- typographie ---------- */
h1,h2,h3{font-weight:500; line-height:1.08; letter-spacing:-.012em; margin:0}
h1{font-size:clamp(2.3rem,5.4vw,4.4rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.5rem)}
h3{font-size:clamp(1.15rem,1.8vw,1.45rem)}
h1 em, h2 em, h3 em, .accent-em{font-style:italic; color:var(--sauge-deep); font-weight:500}
.section-sombre h1 em, .section-sombre h2 em, .section-sombre h3 em{color:var(--sauge-clair)}

.eyebrow{
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:500; color:var(--sauge-deep); margin:0 0 12px;
}
.section-sombre .eyebrow{color:var(--sauge-clair)}
.lede{font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--muted); max-width:52ch; margin:0}
.section-sombre .lede{color:var(--muted-inv)}
p{margin:0 0 1em}
.mesure-texte{max-width:62ch}

figcaption, .legende{
  font-style:italic; font-size:.86rem; color:var(--muted); line-height:1.5;
  margin-top:10px;
}
.section-sombre figcaption, .section-sombre .legende{color:var(--muted-inv)}

/* ---------- sections claires / sombres ---------- */
.section{ padding:clamp(56px,9vw,120px) 0 }
.section-claire{ background:var(--paper); color:var(--ink) }
.section-sombre{ background:var(--fond-sombre); color:var(--paper) }
/* Sur le sauge profond, l'accent sauge clair et le gris d'origine ne passaient plus le contraste :
   accent sable (4,7:1, lisible même en petit) et texte secondaire gris clair (4,8:1). */
.section-sombre, .pied, #cookie-banner{ --sauge-clair:#EBDBBB; --muted-inv:#E6DFD2; --muted:#E6DFD2 }
/* Les surfaces claires posées dans une zone sombre (fenêtre du plan) reprennent les couleurs d'origine. */
.section-sombre dialog{ --sauge-clair:#9FAE8F; --muted-inv:#BEB8A6; --muted:#726C5E }
.section-sombre a:not(.btn){ color:var(--sauge-clair) }
.section-2{ background:var(--paper-2) }

/* ---------- grille éditoriale (jamais l'axe central seul) ---------- */
.edit-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(18px,3vw,32px); align-items:start }
.col-texte{ grid-column: 2 / span 5 }
.col-image{ grid-column: 7 / span 6 }
.col-image--deborde{ grid-column: 6 / span 7 }
.col-texte--droite{ grid-column: 8 / span 5 }
.col-image--gauche{ grid-column: 1 / span 6 }
.col-large{ grid-column: 1 / span 12 }
.col-centre-etroit{ grid-column: 3 / span 8 }
/* Titre de page : un H1 n'a jamais à tenir sur six lignes dans une colonne étroite. */
.col-titre{ grid-column: 1 / span 7 }
.col-titre h1{ font-size:clamp(2rem,3.6vw,3.2rem) }
.col-chapo{ grid-column: 9 / span 4; padding-top:10px }
.col-doc{ grid-column: 1 / span 8; margin-top:clamp(20px,3vw,34px) }
@media (max-width:920px){
  .col-texte,.col-image,.col-image--deborde,.col-texte--droite,.col-image--gauche,.col-centre-etroit,
  .col-titre,.col-chapo,.col-doc{
    grid-column: 1 / span 12;
  }
  .col-chapo{ padding-top:0 }
}

/* ---------- liens de contenu ---------- */
.doc a:not(.btn){ color:var(--sauge-deep); text-decoration:underline; text-underline-offset:3px }
.doc a:not(.btn):hover{ color:var(--bois) }
.section-sombre .doc a:not(.btn){ color:var(--sauge-clair) }

/* ---------- boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:0 26px; font-family:inherit; font-size:.95rem;
  text-decoration:none; border:1px solid currentColor; border-radius:2px;
  white-space:normal; text-align:center; cursor:pointer; transition:background .16s,color .16s,border-color .16s;
}
.btn-plein{ background:var(--sauge-deep); border-color:var(--sauge-deep); color:var(--paper) }
.btn-plein:hover{ background:var(--ink); border-color:var(--ink) }
.section-sombre .btn-plein{ background:var(--sauge-clair); border-color:var(--sauge-clair); color:var(--ink) }
.section-sombre .btn-plein:hover{ background:var(--paper); border-color:var(--paper) }
.btn-ligne{ background:transparent; color:var(--ink); border-color:var(--ink) }
.btn-ligne:hover{ background:var(--ink); color:var(--paper) }
.section-sombre .btn-ligne{ color:var(--paper); border-color:var(--paper) }
.section-sombre .btn-ligne:hover{ background:var(--paper); color:var(--ink) }
.btn-groupe{ display:flex; flex-wrap:wrap; gap:14px }
.btn-groupe .btn{ flex:1 1 220px }

/* ---------- nav ---------- */
.nav{ position:sticky; top:var(--bandeau-h, 0px); z-index:40; background:var(--paper); border-bottom:1px solid var(--line) }
.nav .wrap{ max-width:1340px; display:flex; align-items:center; gap:24px; padding:16px 24px }
.nav-logo{ flex:0 0 auto; display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); line-height:1.15 }
.nav-logo img{ width:45px; height:46px; flex:0 0 auto }
.nav-logo-texte{ display:flex; flex-direction:column }
.nav-logo b{ font-size:1.15rem; font-weight:500; letter-spacing:-.01em }
.nav-logo-texte > span{ font-style:italic; font-size:.72rem; color:var(--muted) }
.nav-liens{ margin-left:auto; display:flex; align-items:center; gap:22px; white-space:nowrap }
.nav-liens a{ text-decoration:none; font-size:.94rem; color:var(--ink); padding:4px 0; border-bottom:1px solid transparent }
.nav-liens a:hover, .nav-liens a[aria-current="page"]{ border-color:var(--sauge-deep) }
.nav-liens .univers-actif{ color:var(--sauge-deep); font-style:italic }
.nav-liens .btn{ min-height:44px; padding:0 20px }
.burger{ margin-left:auto; display:none; width:44px; height:44px; border:1px solid var(--ink); background:none; border-radius:2px; position:relative; cursor:pointer }
.burger span, .burger::before, .burger::after{
  content:""; position:absolute; left:11px; right:11px; height:1.5px; background:var(--ink);
}
.burger span{ top:21px } .burger::before{ top:15px } .burger::after{ top:27px }
.menu-mobile{ display:none; flex-direction:column; background:var(--paper); border-bottom:1px solid var(--line); padding:8px 24px 20px }
.menu-mobile a{ padding:12px 0; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--line); font-size:1.05rem }
.menu-mobile.ouvert{ display:flex }
@media (max-width:920px){
  .nav-liens{ display:none }
  .burger{ display:block }
}

/* ---------- pied de page ---------- */
.pied{ background:var(--fond-sombre); color:var(--paper); padding:56px 0 28px }
.pied .wrap{ display:grid; gap:36px; grid-template-columns:1.3fr 1fr 1fr }
.pied h3{ font-size:1.05rem; margin-bottom:14px }
.pied-marque p{ color:var(--muted-inv); max-width:34ch }
.pied nav{ display:flex; flex-direction:column; gap:9px }
.pied nav a{ text-decoration:none; color:var(--muted-inv); font-size:.94rem }
.pied nav a:hover{ color:var(--paper) }
.pied .pied-bas{ margin-top:44px; padding-top:22px; border-top:1px solid var(--line-inv);
  display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center; justify-content:space-between;
  font-size:.82rem; color:var(--muted-inv) }
.pied-bas a{ color:var(--muted-inv); text-decoration:underline }
.pied-bas a:hover{ color:var(--paper) }
#gerer-cookies{ background:none; border:0; padding:0; font:inherit; text-decoration:underline; cursor:pointer; color:var(--muted-inv) }
@media (max-width:760px){ .pied .wrap{ grid-template-columns:1fr } }

/* ---------- bascule d'univers ---------- */
.bascule{ padding:34px 0; border-top:1px solid var(--line); text-align:center }
.section-sombre .bascule{ border-color:var(--line-inv) }
.bascule a{ text-decoration:none; font-style:italic; font-size:1.02rem; border-bottom:1px solid var(--sauge-deep) }
.section-sombre .bascule a{ border-color:var(--sauge-clair) }

/* ---------- accueil : deux portes ---------- */
.portes{ height:calc(100svh - 69px); min-height:540px; display:flex; flex-direction:column }
.portes-bandeau{ padding:14px 24px 12px }
.portes-bandeau .baseline{ font-style:italic; font-size:.92rem; color:var(--muted) }
.portes-duo{ flex:1; display:flex }
.porte{
  position:relative; flex:1; display:flex; align-items:flex-end; padding:clamp(28px,5vw,64px);
  text-decoration:none; color:#fff; overflow:hidden; background-size:cover; background-position:center;
}
/* La photo vit dans ::before pour pouvoir zoomer sans déborder ; le voile vit dans ::after */
.porte::before{ content:""; position:absolute; inset:0; background-size:cover; background-position:center;
  transition:transform .9s cubic-bezier(.22,.61,.36,1) }
.porte::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(20,18,14,.28),rgba(20,18,14,.74)); transition:opacity .5s ease }
.porte-corps{ position:relative; z-index:1 }
.porte .eyebrow{ color:#EFE7D2 }
.porte h2{ color:#fff; margin-bottom:10px }
.porte p{ color:#EDE9DC; max-width:34ch; margin-bottom:0 }
.porte-fleche{ display:inline-block; margin-top:16px; font-style:italic; border-bottom:1px solid rgba(255,255,255,.7) }
.porte--chezvous{ background-color:#3C4733 }
.porte--chezvous::before{ background-image:var(--img-chezvous, none) }
/* Porte pro : photo d'ambiance libre de droits (Pexels n° 8120948, Mikhail Nilov, licence Pexels :
   usage commercial libre, sans attribution). Ce n'est PAS une réalisation de Gaële : jamais dans le
   portfolio, jamais légendée comme son travail. À remplacer par une de ses vues dès qu'elle en a une. */
.porte--pro{ background-color:var(--fond-sombre) }
.porte--pro::before{ background-image:var(--img-pro, none); background-position:center 60% }
.portes-scroll{ text-align:center; padding:12px; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted) }
/* Sur téléphone les deux portes s'empilent et restent visibles SANS défiler :
   la hauteur disponible se partage en deux, elle ne s'additionne pas. */
@media (max-width:760px){
  .portes{ height:calc(100svh - 69px); min-height:480px }
  .portes-duo{ flex-direction:column }
  .porte{ flex:1 1 0; min-height:0; padding:18px 20px }
  .porte h2{ font-size:clamp(1.4rem,6vw,1.9rem) }
  .porte p{ font-size:.92rem }
  .porte-fleche{ margin-top:10px; font-size:.92rem }
}

/* ---------- FAQ ---------- */
.faq-item{ border-top:1px solid var(--line); padding:22px 0 }
.section-sombre .faq-item{ border-color:var(--line-inv) }
.faq-item:last-child{ border-bottom:1px solid var(--line) }
.section-sombre .faq-item:last-child{ border-bottom-color:var(--line-inv) }
.faq-item h3{ font-weight:500; font-size:1.05rem; margin-bottom:8px }
/* Prix de lancement et plein tarif barre a cote. */
.prix-actuel{ font-weight:600; white-space:nowrap }
.prix-avant{ color:var(--muted); font-weight:400; margin-left:6px; white-space:nowrap }
.section-sombre .prix-avant{ color:var(--muted-inv) }
.liste-prix{ list-style:none; padding:0; margin:0 0 18px }
.liste-prix li{ border-top:1px solid var(--line); padding:10px 0 }
.liste-prix li:last-child{ border-bottom:1px solid var(--line) }
.section-sombre .liste-prix li{ border-color:var(--line-inv) }
.section-sombre .liste-prix li:last-child{ border-bottom-color:var(--line-inv) }
.faq-item p{ color:var(--muted); margin:0 }
.section-sombre .faq-item p{ color:var(--muted-inv) }

/* ---------- cartes réalisations ---------- */
.carte-grille{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(20px,3vw,34px) }
.carte-grille--peu{ grid-template-columns:1fr }
@media (min-width:720px){ .carte-grille--peu{ grid-template-columns:1fr 1fr } }
.carte-grille--peu > :only-child{ grid-column:1 / -1; width:100%; max-width:640px; justify-self:center }
.carte-realisation{ text-decoration:none; color:inherit; display:block }
.carte-realisation figure{ margin:0; aspect-ratio:16/9; overflow:hidden; background:var(--paper-2) }
.carte-realisation img{ width:100%; height:100%; object-fit:cover; transition:transform .5s }
.carte-realisation:hover img{ transform:scale(1.035) }
.carte-realisation h3{ margin-top:14px; font-size:1.15rem }
.carte-realisation .legende{ margin-top:4px }
.carte-vide{ border:1px dashed var(--line); padding:26px; display:flex; flex-direction:column; justify-content:center; min-height:220px }
.carte-vide p{ color:var(--muted); font-style:italic; margin:0 }

/* ---------- avant/après & croquis→rendu ---------- */
.ba{ position:relative; overflow:hidden; background:var(--paper-2); touch-action:pan-y; cursor:ew-resize; user-select:none }
.ba img{ display:block; width:100%; height:auto; pointer-events:none }
/* Chaque etiquette vit dans sa moitie : sans ca, « Avant » restait affiche par-dessus
   l'image d'apres quand on poussait le curseur a fond a gauche. */
.ba .avant{ position:relative; clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0) }
.ba .apres{ position:absolute; inset:0; clip-path:inset(0 0 0 var(--pos,50%)) }
.ba .apres img{ height:100%; object-fit:cover; object-position:left center }
.ba .barre{ position:absolute; top:0; bottom:0; left:var(--pos,50%); width:1px; background:rgba(255,255,255,.92); pointer-events:none }
.ba .poignee{ position:absolute; top:50%; left:var(--pos,50%); transform:translate(-50%,-50%); width:42px; height:42px;
  border-radius:50%; background:var(--paper); box-shadow:var(--shadow); display:grid; place-items:center; font-size:13px; pointer-events:none }
.ba .tag{ position:absolute; bottom:12px; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(20,18,14,.72); color:#fff; padding:5px 10px; pointer-events:none }
.ba .tag.g{ left:12px } .ba .tag.d{ right:12px }
.ba input[type=range]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0 }

/* ---------- plan cliquable ---------- */
.planbox{ position:relative; background:var(--paper-2) }
.planbox img{ width:100%; height:auto; display:block }
.plan-hot{ position:absolute; inset:0; width:100%; height:100% }
.plan-hot polygon{ fill:var(--sauge); fill-opacity:0; stroke:var(--sauge); stroke-width:.35; stroke-opacity:0; cursor:pointer; transition:fill-opacity .18s,stroke-opacity .18s }
.plan-hot polygon.vide{ fill:var(--muted); stroke:var(--muted) }
.plan-zone.survol polygon{ fill-opacity:.16; stroke-opacity:.9 }
.epingle{
  position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center;
  background:var(--paper); color:var(--ink); border:1px solid var(--sauge-deep); border-radius:999px;
  font:inherit; font-size:.82rem; line-height:1; padding:0; cursor:pointer; box-shadow:var(--shadow);
}
.epingle .rond{ width:32px; height:32px; flex:0 0 32px; display:grid; place-items:center; color:var(--sauge-deep); font-size:15px }
.epingle .lbl{ max-width:0; overflow:hidden; white-space:nowrap; opacity:0; padding:0; transition:max-width .26s ease,opacity .18s,padding .26s ease }
.epingle:hover, .epingle:focus-visible{ background:var(--ink); color:var(--paper); outline:none }
.epingle:hover .rond, .epingle:focus-visible .rond{ color:var(--sauge-clair) }
.epingle:hover .lbl, .epingle:focus-visible .lbl{ max-width:230px; opacity:1; padding:0 14px 0 2px }
.epingle.vide{ border-style:dashed; border-color:var(--muted) }
.epingle.vide .rond{ color:var(--muted) }
.epingle .m2{ opacity:.65; margin-left:6px; font-variant-numeric:tabular-nums }
@media (hover:none){ .epingle .rond{ width:38px; height:38px; flex-basis:38px; font-size:17px } }
.plan-note{ margin-top:14px; font-size:.86rem; color:var(--muted) }

/* fenêtre de vue */
dialog#dlg-vue{ border:0; padding:0; background:var(--paper); color:var(--ink);
  width:min(980px,calc(100vw - 32px)); max-width:none; max-height:calc(100vh - 32px);
  border-radius:3px; box-shadow:0 28px 80px rgba(20,18,14,.4); overflow:auto }
dialog#dlg-vue::backdrop{ background:rgba(20,18,14,.66) }
.dlg-tete{ display:flex; align-items:baseline; gap:14px; padding:20px 22px 12px; flex-wrap:wrap }
.dlg-tete h3{ margin:0; font-size:clamp(1.1rem,2.6vw,1.35rem) }
.dlg-tete .m2{ color:var(--muted); font-size:.85rem; font-variant-numeric:tabular-nums }
.dlg-fermer{ margin-left:auto; background:none; border:1px solid var(--line); border-radius:999px; width:34px; height:34px; font:inherit; color:var(--muted); cursor:pointer }
.dlg-fermer:hover{ border-color:var(--sauge-deep); color:var(--sauge-deep) }
.dlg-corps{ padding:0 22px 22px }
.dlg-vues{ display:flex; gap:16px; margin:0 0 14px; flex-wrap:wrap }
.dlg-vues[hidden]{ display:none }
.dlg-vues button{ font:inherit; font-size:.85rem; background:none; color:var(--muted); border:0; border-bottom:1px solid transparent; padding:3px 1px; cursor:pointer }
.dlg-vues button[aria-pressed="true"]{ color:var(--ink); border-color:var(--sauge-deep) }
.dlg-panel[hidden]{ display:none }
.vue-seule{ margin:0 }
.vue-seule img{ width:100%; border-radius:2px }
/* Les trois vues de la fenêtre au même format, plafonné : deux rendus sont doux (reçus en 400 px). */
.dlg-panel .ba, .dlg-panel .vue-seule{ max-width:760px; margin-inline:auto }
.dlg-panel .legende{ max-width:760px; margin-inline:auto }
.etat-vide{ border:1px dashed var(--line); padding:clamp(28px,6vw,52px); text-align:center }
.etat-vide p{ margin:0 auto; max-width:42ch; color:var(--muted) }
.basse-def{ margin:10px 0 0; font-size:.78rem; color:var(--muted); font-style:italic }

/* ---------- duo de plans ---------- */
.duo-plans{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,3vw,30px) }
@media (max-width:640px){ .duo-plans{ grid-template-columns:1fr } }

/* ---------- projet : titre collant pendant le défilement des vues ---------- */
.projet-corps{ display:grid; grid-template-columns:.9fr 1.6fr; gap:clamp(24px,4vw,56px); align-items:start }
.projet-fil{ position:sticky; top:calc(96px + var(--bandeau-h, 0px)) }
@media (max-width:900px){ .projet-corps{ grid-template-columns:1fr } .projet-fil{ position:static } }
/* Visuel large à gauche, colonne de lecture à droite. Sert au comparateur avant/après,
   qui laissait sinon deux bandes vides de 400 px de chaque côté. */
.projet-corps--visuel{ grid-template-columns:1.55fr .95fr }
@media (max-width:900px){ .projet-corps--visuel{ grid-template-columns:1fr } }

/* ---------- avis ---------- */
.avis-grille{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px }
.avis{ border-top:1px solid var(--line); padding-top:18px }
.avis p{ font-style:italic; color:var(--muted) }
.avis .qui{ font-style:normal; font-size:.85rem; color:var(--ink); font-weight:500 }

/* ---------- formulaire ---------- */
.champ{ margin-bottom:18px }
.champ label{ display:block; font-size:.88rem; margin-bottom:6px; color:var(--muted) }
.champ input, .champ select, .champ textarea{
  width:100%; font:inherit; font-size:1rem; padding:12px 14px; background:var(--paper);
  border:1px solid var(--line); border-radius:2px; color:var(--ink);
}
.champ-duo{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
@media (max-width:560px){ .champ-duo{ grid-template-columns:1fr } }
.champ textarea{ min-height:140px; resize:vertical }
.champ-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.form-note{ font-size:.82rem; color:var(--muted); margin-top:10px }

/* ---------- bandeau cookies ---------- */
#cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:100; max-width:640px; margin:0 auto;
  background:var(--fond-sombre); color:var(--paper); padding:20px 22px; border-radius:3px; box-shadow:var(--shadow);
}
#cookie-banner p{ margin:0 0 14px; font-size:.9rem; color:var(--muted-inv) }
.cookie-actions{ display:flex; gap:12px; flex-wrap:wrap }
.cookie-actions button{ font:inherit; font-size:.88rem; padding:10px 18px; border-radius:2px; cursor:pointer }
#cookie-accepter{ background:var(--sauge-clair); border:1px solid var(--sauge-clair); color:var(--ink) }
#cookie-refuser{ background:none; border:1px solid var(--muted-inv); color:var(--paper) }
#cookie-banner[hidden]{ display:none }

/* ---------- mouvement : peu, mais franc ---------- */
.reveal{ opacity:1; transform:none }
@supports (animation-timeline: view()){
  .reveal{
    opacity:0; transform:translateY(18px);
    animation: apparait linear forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
  @keyframes apparait{ to{ opacity:1; transform:none } }
}

/* ---------- encadré / notes ---------- */
.encadre{ border-left:2px solid var(--sauge-deep); padding:4px 0 4px 20px; margin:28px 0 }
.section-sombre .encadre{ border-color:var(--sauge-clair) }
.encadre p{ margin:0; color:var(--muted) }
.section-sombre .encadre p{ color:var(--muted-inv) }

/* ---------- page 404 / pages simples ---------- */
.page-simple{ padding:clamp(64px,10vw,120px) 0 }
.page-simple .doc h2{ margin-top:2.2em }
.page-simple .doc h2:first-child{ margin-top:0 }
.page-simple .doc ul{ padding-left:1.2em }
.page-simple .doc li{ margin-bottom:.4em }

/* ---------- responsive images pleine largeur ---------- */
.full-bleed{ grid-column: 1 / -1 }

/* Grille des forfaits : le contenu livré est dit une fois au-dessus, les cartes ne portent que pièce + prix */
.grille-tarifs{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:34px }
@media (min-width:720px){ .grille-tarifs{ grid-template-columns:1fr 1fr } }
.carte-tarif{ border:1px solid var(--line); padding:20px 22px; display:flex; flex-direction:column; justify-content:space-between; gap:10px }
.carte-tarif h3{ margin:0; font-size:1.05rem; line-height:1.35; font-weight:500 }
.carte-tarif__prix{ margin:0; font-size:1.5rem }
.carte-tarif__prix .prix-avant{ font-size:1rem; opacity:.6; margin-left:6px }

/* Cartes d'étapes et de situations : même langage que la grille des tarifs */
.grille-cartes{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:34px }
@media (min-width:640px){ .grille-cartes{ grid-template-columns:1fr 1fr } }
@media (min-width:1000px){
  .grille-cartes--3{ grid-template-columns:repeat(3,1fr) }
  .grille-cartes--4{ grid-template-columns:repeat(4,1fr) }
}
.carte{ border:1px solid var(--line); padding:26px 24px }
.section-sombre .carte{ border-color:var(--line-inv) }
.carte h3{ margin:0 0 10px; font-size:1.45rem; line-height:1.25; font-weight:500 }
.carte p{ margin:0; line-height:1.55; font-size:1.04rem }
.carte__num{ display:block; font-size:2.6rem; line-height:1; margin-bottom:14px; color:var(--sauge-clair); font-style:italic }
.section-claire .carte__num{ color:var(--sauge-deep) }
.carte--grande{ padding:32px 28px }
.carte--grande h3{ font-size:1.55rem }
.carte--grande p{ font-size:1.08rem }

/* Contact : intro courte, formulaire sur plus de la moitié de la largeur */
.col-contact-intro{ grid-column: 1 / span 4 }
.col-contact-form{ grid-column: 6 / span 7 }
@media (max-width:920px){ .col-contact-intro,.col-contact-form{ grid-column: 1 / span 12 } }
.col-contact-form .champ input,.col-contact-form .champ select,.col-contact-form .champ textarea{ font-size:1.08rem; padding:14px 16px }
.col-contact-form .champ label{ font-size:.98rem; color:inherit }
.col-contact-form .champ textarea{ min-height:180px }

.section-sombre .carte-tarif{ border-color:var(--line-inv) }
.carte-tarif > p:not(.carte-tarif__prix):not(.carte__duree){ margin:0; line-height:1.5 }
.carte__duree{ margin:0; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; opacity:.7 }
/* FAQ : deux colonnes, question en titre */
@media (min-width:1000px){ .grille-cartes--faq{ grid-template-columns:1fr 1fr } }
.carte--faq h3{ font-size:1.2rem }
/* Citations d'entrée : la phrase du client porte la carte */
.carte--citation{ display:flex; flex-direction:column; gap:10px }
.carte__citation{ font-size:clamp(1.3rem,2vw,1.6rem) !important; font-style:italic; line-height:1.3 !important; color:var(--sauge-clair) }
.section-claire .carte__citation{ color:var(--sauge-deep) }
.duo-notes{ display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:34px; align-items:start }
@media (max-width:760px){ .duo-notes{ grid-template-columns:1fr } }
.grille-cartes .carte-tarif{ justify-content:flex-start }
.carte .carte-tarif__prix{ font-size:1.5rem; margin:4px 0 }
.carte .carte-tarif__prix .prix-avant{ font-size:1rem }

/* ---------- plan cliquable : à côté du texte, jamais pleine largeur ---------- */
.plan-duo{ align-items:center }
.col-plan-texte{ grid-column: 1 / span 5 }
.col-plan{ grid-column: 7 / span 6 }
@media (max-width:920px){ .col-plan-texte,.col-plan{ grid-column: 1 / span 12 } }
.planbox{ max-width:640px; margin-left:auto; margin-right:auto }

/* ---------- effets au survol : les cartes réagissent ---------- */
.carte, .carte-tarif{
  transition: border-color .25s ease, background-color .25s ease, translate .25s ease;
}
.carte:hover, .carte-tarif:hover{
  border-color:var(--sauge-deep); background-color:rgba(95,112,82,.08); translate:0 -3px;
}
.section-sombre .carte:hover, .section-sombre .carte-tarif:hover{
  border-color:var(--sauge-clair); background-color:rgba(245,242,234,.05);
}
.carte h3{ transition:color .25s ease }
.carte--faq:hover h3{ color:var(--sauge-deep) }
.section-sombre .carte--faq:hover h3{ color:var(--sauge-clair) }
.carte__num{ transition:transform .35s ease }
.carte:hover .carte__num{ transform:translateX(6px) }

/* menu : le trait se dessine de gauche à droite */
.nav-liens a{ background:linear-gradient(currentColor,currentColor) no-repeat 0 100% / 0 1px; transition:background-size .3s ease }
.nav-liens a:hover{ background-size:100% 1px }

/* ---------- apparition des cartes au défilement, en cascade ---------- */
@supports (animation-timeline: view()){
  .grille-cartes > *, .grille-tarifs > *{
    opacity:0; transform:translateY(22px);
    animation: apparait linear forwards; animation-timeline: view(); animation-range: entry 0% cover 25%;
  }
  .grille-cartes > :nth-child(2), .grille-tarifs > :nth-child(2){ animation-range: entry 5% cover 30% }
  .grille-cartes > :nth-child(3), .grille-tarifs > :nth-child(3){ animation-range: entry 10% cover 35% }
  .grille-cartes > :nth-child(4), .grille-tarifs > :nth-child(4){ animation-range: entry 15% cover 40% }
}
@media (prefers-reduced-motion:reduce){
  .carte, .carte-tarif, .carte__num, .nav-liens a{ transition:none }
  .carte:hover, .carte-tarif:hover{ translate:none }
  .grille-cartes > *, .grille-tarifs > *{ animation:none !important; opacity:1 !important; transform:none !important }
}
.nav-liens a:hover:not([aria-current]){ border-color:transparent }
/* Filet de sécurité : une carte seule sur la dernière ligne d'une grille à deux colonnes se centre */
@media (min-width:640px){
  .grille-cartes--faq > :last-child:nth-child(odd){ grid-column:1 / -1; justify-self:center; width:calc(50% - 8px) }
}

/* ---------- offre de lancement : bandeau et étiquettes (suivent PRIX_BARRE) ---------- */
/* Collé en haut sur tout le site (demande d'Estelle du 25/09) ; le menu se cale dessous via --bandeau-h (main.js). */
#bandeau-lancement{ position:sticky; top:0; z-index:41; background:var(--sauge-deep); color:var(--paper); font-size:.86rem; line-height:1.45 }
#bandeau-lancement .wrap{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px 14px; padding-top:9px; padding-bottom:9px; padding-right:48px; text-align:center }
#bandeau-lancement strong{ font-weight:500; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; border:1px solid rgba(245,242,234,.55); padding:3px 10px }
#bandeau-lancement a{ color:var(--paper); text-decoration:underline; text-underline-offset:3px; font-style:italic }
#bandeau-fermer{ position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:0; color:rgba(245,242,234,.8); font-size:1.3rem; line-height:1; cursor:pointer; padding:6px 10px }
#bandeau-fermer:hover{ color:var(--paper) }
#bandeau-lancement[hidden]{ display:none }
@media (max-width:560px){ #bandeau-lancement span{ display:none } }
.etiquette-lancement{ display:inline-block; vertical-align:middle; margin-left:8px; font-size:.68rem !important; font-weight:500; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border:1px solid currentColor; color:var(--sauge-deep); white-space:nowrap }
.section-sombre .etiquette-lancement{ color:var(--sauge-clair) }

/* ---------- portes d'accueil : on voit qu'elles se cliquent ---------- */
.porte-fleche::after{ content:"→"; display:inline-block; margin-left:8px; font-style:normal; transition:transform .35s ease }
@media (hover:hover){
  .porte:hover::before, .porte:focus-visible::before{ transform:scale(1.05) }
  .porte:hover::after, .porte:focus-visible::after{ opacity:.6 }
  .portes-duo:hover .porte:not(:hover)::after{ opacity:1; background:linear-gradient(180deg,rgba(20,18,14,.45),rgba(20,18,14,.82)) }
  .porte:hover .porte-fleche::after, .porte:focus-visible .porte-fleche::after{ transform:translateX(6px) }
}
.porte:focus-visible{ outline:2px solid var(--sauge-clair); outline-offset:-6px }
@media (prefers-reduced-motion:reduce){ .porte::before, .porte::after, .porte-fleche::after{ transition:none } .porte:hover::before{ transform:none } }

/* ==========================================================================
   Effets retenus le 25/09 (n° 1, 2, 4, 6 de la démo). Tous désactivés si le
   visiteur a demandé moins d'animations ; sans script, tout s'affiche à plat.
   ========================================================================== */

/* ---------- 1. la pièce qui se transforme ---------- */
/* Sans script : grille deux par deux, avant à gauche, projet à droite. */
.transfo-scene{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,3vw,30px) }
.transfo-etape{ position:relative; margin:0; background:var(--fond-sombre); border-radius:2px; overflow:hidden }
.transfo-etape img{ width:100%; aspect-ratio:16/9; object-fit:cover }
.transfo-etape--portrait img{ object-fit:contain }
.transfo-etape .tag{ position:absolute; top:12px; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(20,18,14,.72); color:var(--paper); padding:5px 10px }
.transfo-etape .tag.g{ left:12px } .transfo-etape .tag.d{ left:12px; background:var(--sauge-deep) }
.transfo-etape figcaption{ font-style:italic; font-size:.86rem; color:var(--muted); background:var(--paper); padding-top:10px }
.transfo-legende{ display:none }
@media (max-width:640px){ .transfo-scene{ grid-template-columns:1fr } }

/* Avec script : la scène se fige à l'écran, les étapes se fondent l'une dans l'autre au défilement. */
.transfo.actif{ height:calc(var(--etapes) * 75svh) }
.transfo.actif .transfo-colle{ position:sticky; top:calc(var(--bandeau-h, 0px) + 69px); height:calc(100svh - var(--bandeau-h, 0px) - 69px);
  display:flex; flex-direction:column; justify-content:center; gap:14px }
.transfo.actif .transfo-scene{ display:block; position:relative; width:min(100%, 960px, calc((100svh - var(--bandeau-h, 0px) - 69px - 90px) * 16 / 9));
  margin:0 auto; aspect-ratio:16/9 }
.transfo.actif .transfo-etape{ position:absolute; inset:0; opacity:0 }
.transfo.actif .transfo-etape:first-child{ opacity:1 }
.transfo.actif .transfo-etape img{ height:100%; aspect-ratio:auto }
.transfo.actif .transfo-etape figcaption{ display:none }
.transfo.actif .transfo-legende{ display:block; text-align:center; font-style:italic; color:var(--muted); margin:0; min-height:1.6em }
/* Téléphone : cadre 4/3, sinon la photo d'avant (en hauteur) devient minuscule dans un cadre panoramique. */
@media (max-width:640px){ .transfo.actif .transfo-scene{ aspect-ratio:4/3; width:100% } }

/* ---------- 2. le rideau sur les cartes de réalisations ---------- */
.effet-rideau .carte-realisation figure{ clip-path:inset(0 0 100% 0); transition:clip-path 1.2s cubic-bezier(.22,.8,.24,1) }
.effet-rideau .carte-realisation figure img{ transform:scale(1.15); transition:transform 1.5s cubic-bezier(.22,.8,.24,1) }
.effet-rideau .carte-realisation figure.vu{ clip-path:inset(0) }
.effet-rideau .carte-realisation figure.vu img{ transform:none }

/* ---------- 4. la profondeur sur les portes d'accueil ---------- */
/* `translate` et non `transform` : le zoom au survol garde sa transition, le décalage suit le défilement sans retard. */
.porte::before{ top:-14% ; translate:0 var(--para, 0px) }

/* ---------- 6. le titre d'une carte glisse vers le titre de la page du projet ---------- */
@view-transition{ navigation:auto }
::view-transition-group(*){ animation-duration:.5s; animation-timing-function:cubic-bezier(.22,.8,.24,1) }

@media (prefers-reduced-motion:reduce){
  @view-transition{ navigation:none }
  .porte::before{ translate:none }
}

/* ---------- portrait, page À propos (reçu le 25/09 en 433 px : jamais affiché plus grand) ---------- */
/* Portrait à gauche, nom et chapô à droite, centrés sur la hauteur de la photo : aucun vide sous le titre. */
.presentation{ display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:clamp(32px,6vw,90px); align-items:center }
.presentation-texte h1{ margin-bottom:22px }
.portrait{ margin:0 }
.portrait img{ width:100%; border-radius:2px }
@media (max-width:760px){
  .presentation{ grid-template-columns:1fr; gap:28px }
  .portrait{ max-width:260px; order:2 }
}

/* ---------- blog (ajouté le 25/09) ---------- */
/* Cartes pleine largeur sur deux colonnes, jamais une liste en colonne étroite. */
.posts{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(16px,2.4vw,26px) }
@media (max-width:760px){ .posts{ grid-template-columns:1fr } }
.post{ display:flex; flex-direction:column; gap:10px; padding:clamp(22px,3vw,32px); background:#fff;
  border:1px solid var(--line); border-radius:3px; text-decoration:none; color:var(--ink);
  transition:border-color .3s ease, box-shadow .3s ease }
.post:hover, .post:focus-visible{ border-color:var(--sauge-deep); box-shadow:var(--shadow) }
.post time{ font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sauge-deep) }
.post h3{ font-size:clamp(1.2rem,2vw,1.5rem) }
.post p{ margin:0; color:var(--muted) }
.post .lire{ margin-top:auto; padding-top:6px; font-style:italic; color:var(--sauge-deep) }
.post .lire::after{ content:" →"; font-style:normal }

.article{ max-width:780px }
.article .eyebrow a{ color:inherit; text-decoration:none; border-bottom:1px solid currentColor }
.article h1{ font-size:clamp(2rem,4.6vw,3.4rem); margin-bottom:22px }
.article .lede{ max-width:none }
.article-images{ display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr); gap:18px; margin:36px 0 8px; align-items:end }
.article-images figure{ margin:0 }
.article-images img{ width:100%; border-radius:2px }
.article-images figcaption{ font-style:italic; font-size:.86rem; color:var(--muted); margin-top:8px }
@media (max-width:640px){ .article-images{ grid-template-columns:1fr } }
.article-corps{ margin-top:34px }
.article-corps h2{ font-size:clamp(1.35rem,2.6vw,1.8rem); margin:1.8em 0 .6em }
.article-corps ul{ padding-left:1.2em } .article-corps li{ margin-bottom:.6em }
.article-cta{ margin-top:44px; padding:28px 30px; background:var(--paper-2); border-left:2px solid var(--sauge-deep);
  display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center; justify-content:space-between }
.article-cta p{ margin:0; max-width:44ch }

/* ---------- logos des réseaux, pied de page (25/09) ---------- */
.pied-reseaux{ display:flex; gap:10px; margin-top:4px }
.pied-reseaux a{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line-inv); color:var(--paper); transition:background .25s ease, color .25s ease }
.pied-reseaux a:hover, .pied-reseaux a:focus-visible{ background:var(--paper); color:var(--fond-sombre) }
.article-auteur{ font-style:italic; color:var(--muted); margin:-8px 0 18px; font-size:.95rem }
.article-auteur a{ color:inherit; text-underline-offset:3px }
.article-corps .encadre{ margin:36px 0 0; background:var(--paper-2); padding:18px 22px }
.article-corps .encadre p{ color:var(--ink) }
.article-faq{ margin-top:52px }
.article-faq h2, .article-sources h2{ font-size:clamp(1.35rem,2.6vw,1.8rem); margin-bottom:12px }
.article-sources{ margin-top:44px; font-size:.92rem; color:var(--muted) }
.article-sources ul{ padding-left:1.1em; margin:0 } .article-sources li{ margin-bottom:.5em }
.article-sources a{ color:var(--sauge-deep); text-underline-offset:3px; overflow-wrap:anywhere }
.article-cta .btn-groupe{ flex:1 1 320px }
.h2-discret{ font-size:1.05rem; font-weight:500; margin:0 0 8px }