/* =========================================================
   La Conciergerie Provençale — feuille de style v8
   Couleurs et polices de la plaquette : crème, vert olive, doré
   Titres Cinzel · textes Jost
   ========================================================= */
:root {
  --creme: #f6f1e6;
  --creme-2: #ede6d5;
  --creme-3: #e4dcc7;
  --blanc: #fffdf8;
  --olive: #3f4a2a;
  --olive-2: #575f41;
  --olive-3: #6e7548;
  --olive-fonce: #2f3820;
  --olive-clair: #c9cbb3;
  --or: #a8823f;
  --or-texte: #7a5d2a;
  --or-clair: #d9c39a;
  --filet: #cdbb94;
  --texte: #2e2c22;
  --texte-2: #5b5848;
  --titre: "Cinzel", "Trajan Pro", Georgia, serif;
  --police: "Jost", "Futura", "Century Gothic", Helvetica, Arial, sans-serif;
  --largeur: 1240px;
  --marge: clamp(16px, 4vw, 32px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--creme); color: var(--texte); font: 400 17px/1.6 var(--police); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--olive); }
a:hover { color: var(--or-texte); }
h1, h2, h3, h4 { font-family: var(--titre); font-weight: 500; margin: 0; line-height: 1.18; color: var(--olive); }
p { margin: 0; }
strong { font-weight: 600; }
.material-icons, .material-icons-outlined { font-size: inherit; line-height: 1; vertical-align: middle; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aller-contenu { position: absolute; left: -9999px; top: 8px; background: var(--olive); color: var(--creme); padding: 10px 16px; z-index: 100; }
.aller-contenu:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

.boite { max-width: var(--largeur); margin: 0 auto; padding-inline: var(--marge); }
.section { padding-block: clamp(64px, 9vw, 104px); }
.fond-2 { background: var(--creme-2); }
.fond-blanc { background: var(--blanc); border-block: 1px solid var(--creme-3); }
.fond-olive { background: var(--olive); color: var(--creme); }
.fond-olive h1, .fond-olive h2, .fond-olive h3 { color: var(--creme); }
.surtitre { font: 500 12px/1.4 var(--police); letter-spacing: .32em; text-transform: uppercase; color: var(--or-texte); }
.fond-olive .surtitre { color: var(--or-clair); }
.titre-1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.12; }
.titre-2 { font-size: clamp(28px, 3.6vw, 40px); }
.titre-3 { font-family: var(--titre); font-weight: 600; font-size: 22px; line-height: 1.25; color: var(--olive); }
.chapo { font-size: clamp(17px, 1.6vw, 19px); font-weight: 300; }
.chapo p + p, .texte p + p { margin-top: 1em; }
.tete { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px 64px; align-items: end; margin-bottom: 48px; }
.tete > div { display: flex; flex-direction: column; gap: 14px; }
.ornement { display: flex; align-items: center; gap: 14px; justify-content: center; }
.ornement::before, .ornement::after { content: ""; width: 56px; height: 1px; background: var(--or); }
.ornement span { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--or); }

.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 28px; background: var(--olive); color: var(--creme); border: 1px solid var(--olive); text-decoration: none; font: 500 13px var(--police); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
.bouton:hover { background: var(--olive-fonce); color: var(--creme); }
.bouton.contour { background: transparent; color: var(--olive); }
.bouton.contour:hover { background: var(--olive); color: var(--creme); }
.bouton.or { background: var(--or-clair); border-color: var(--or-clair); color: var(--texte); font-weight: 600; }
.bouton.or:hover { background: var(--creme); border-color: var(--creme); color: var(--texte); }
.lien-fleche { font: 600 13px var(--police); letter-spacing: .2em; text-transform: uppercase; color: var(--olive); text-decoration: none; }
.lien-fleche::after { content: " →"; }

/* ---------- En-tête ---------- */
.entete { border-bottom: 1px solid var(--filet); max-width: var(--largeur); margin: 0 auto; padding: 18px var(--marge) 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.entete-haut { width: 100%; display: flex; justify-content: space-between; align-items: center; font-size: 12px; letter-spacing: .18em; color: var(--texte-2); text-transform: uppercase; }
.langues { display: flex; gap: 8px; align-items: center; }
.langues a { text-decoration: none; color: var(--texte-2); min-height: 32px; display: inline-flex; align-items: center; padding: 0 2px; }
.langues a.actif { color: var(--olive); font-weight: 600; }
.marque { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--olive); }
.marque img { width: 76px; height: 76px; object-fit: contain; }
.marque span { font: 600 clamp(19px, 2.4vw, 24px) var(--titre); letter-spacing: .06em; text-align: center; }
.menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 34px; padding: 8px 0 10px; }
.menu a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; font: 500 13px var(--police); letter-spacing: .18em; text-transform: uppercase; color: var(--olive); border-bottom: 1px solid transparent; }
.menu a.actif { color: var(--or-texte); border-bottom-color: var(--or); }
.menu-bouton { display: none; }
@media (max-width: 820px) {
  .entete { padding-bottom: 12px; }
  .menu-bouton { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; background: none; border: 1px solid var(--olive); color: var(--olive); font: 500 12px var(--police); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
  .menu-trait, .menu-trait::before, .menu-trait::after { display: block; width: 16px; height: 1px; background: currentColor; position: relative; }
  .menu-trait::before, .menu-trait::after { content: ""; position: absolute; left: 0; }
  .menu-trait::before { top: -5px; } .menu-trait::after { top: 5px; }
  .menu { display: none; flex-direction: column; align-items: center; width: 100%; padding: 6px 0 0; }
  .entete.ouvert .menu { display: flex; }
  .menu a { width: 100%; justify-content: center; border-top: 1px solid var(--creme-3); }
}

/* ---------- Accueil ---------- */
.ouverture { max-width: 1100px; margin: 0 auto; padding: clamp(56px, 8vw, 88px) var(--marge) 48px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.ouverture .chapo { max-width: 680px; }
.bandeau-photo { max-width: var(--largeur); margin: 0 auto; padding-inline: var(--marge); }
.bandeau-photo img { width: 100%; height: clamp(280px, 40vw, 520px); object-fit: cover; }
.diapo { position: relative; height: clamp(280px, 40vw, 520px); overflow: hidden; background: var(--creme-3); }
.diapo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.8s ease; }
.diapo img.actif { opacity: 1; }
.diapo-points { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 4px; }
.diapo-points button { width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.diapo-points button::before { content: ""; width: 9px; height: 9px; transform: rotate(45deg); border: 1px solid var(--creme); background: rgba(47, 56, 32, .25); transition: background-color .4s ease, transform .4s ease; }
.diapo-points button[aria-current="true"]::before { background: var(--creme); transform: rotate(45deg) scale(1.15); }
.portes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 32px; }
.porte { display: flex; flex-direction: column; text-decoration: none; color: var(--texte); background: var(--blanc); border: 1px solid var(--filet); }
.porte:hover { color: var(--texte); border-color: var(--or); }
.porte img { width: 100%; height: 300px; object-fit: cover; }
.porte-corps { padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.porte-label { font: 600 12px var(--police); letter-spacing: .3em; text-transform: uppercase; color: var(--or-texte); }
.porte-titre { font: 600 clamp(21px, 2.2vw, 26px)/1.25 var(--titre); color: var(--olive); }
.raisons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 48px; margin-top: 48px; }
.raison { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; border-top: 1px solid var(--or-clair); }
.raison-num { font: 15px var(--titre); letter-spacing: .2em; color: var(--or-clair); }
.raison p { color: var(--creme-2); }
.raisons.quatre { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 40px; }
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 56px; align-items: center; }
.duo-texte { display: flex; flex-direction: column; gap: 22px; }
.duo-texte .bouton { align-self: flex-start; }
.portraits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.portraits figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.portraits figure:nth-child(2) { margin-top: 48px; }
.portraits img { width: 100%; height: clamp(260px, 30vw, 380px); object-fit: cover; filter: grayscale(1); }
.portraits figcaption { font: 600 17px var(--titre); color: var(--olive); }
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1px; background: var(--filet); border: 1px solid var(--filet); }
.chiffres > div { background: var(--creme); padding: 32px; display: flex; flex-direction: column; gap: 6px; }
.chiffres strong { font: 400 40px/1.1 var(--titre); color: var(--olive); }
.ligne-titre { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 40px; }
.photo-haute { width: 100%; height: clamp(280px, 34vw, 420px); object-fit: cover; }
.contacts-directs { display: flex; flex-direction: column; gap: 6px; font-size: 17px; }
.contacts-directs a { min-height: 44px; display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.contacts-directs a span { font: 600 17px var(--titre); }
.fond-olive .contacts-directs a { color: var(--creme); }
.fond-olive .contacts-directs a span { color: var(--or-clair); }

/* ---------- Confier sa maison ---------- */
.formules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 28px; align-items: stretch; }
.formule { display: flex; flex-direction: column; background: var(--blanc); border: 1px solid var(--filet); }
.formule img { width: 100%; height: 200px; object-fit: cover; }
.formule-corps { padding: 32px; display: flex; flex-direction: column; gap: 16px; flex-grow: 1; }
.formule-prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; color: var(--olive); }
.formule-prix strong { font: 400 44px/1 var(--titre); }
.formule-prix span { font-size: 13px; }
.formule-note { margin-top: auto; font-size: 13px; color: var(--texte-2); }
.formule.sombre { background: var(--olive); border-color: var(--olive); color: var(--creme-2); }
.formule.sombre h2 { color: var(--or-clair); }
.formule.sombre .formule-prix { color: var(--creme); }
.formule.sombre .formule-note { color: var(--olive-clair); }
.filets { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.filets li { padding-left: 16px; border-left: 1px solid var(--or); }
.formule.sombre .filets li { border-left-color: var(--or-clair); }
.tarifs-carte { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.tarifs-carte li { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 1px dotted var(--filet); }
.tarifs-carte li:last-child { border-bottom: 0; }
.tarifs-carte strong { white-space: nowrap; }
.etapes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; counter-reset: etape; }
.etapes li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; padding: 26px 0; border-top: 1px solid var(--filet); counter-increment: etape; }
.etapes li:last-child { border-bottom: 1px solid var(--filet); }
.etapes li::before { content: counter(etape, upper-roman); font: 36px/1 var(--titre); color: var(--or); }
.etapes strong { display: block; font: 600 20px var(--titre); color: var(--olive); margin-bottom: 6px; }
.etapes span { font-size: 15px; }
.cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1px; background: var(--filet); border: 1px solid var(--filet); }
.cases > div { background: var(--creme); padding: 28px; display: flex; flex-direction: column; gap: 8px; }
.cases h3 { font: 600 18px var(--titre); }
.cases p { font-size: 15px; }

/* ---------- Formulaires ---------- */
.formulaire { background: var(--creme); color: var(--texte); padding: clamp(24px, 4vw, 40px); display: flex; flex-direction: column; gap: 16px; }
.formulaire .deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 16px; }
.formulaire label, .formulaire legend { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; color: var(--olive); }
.formulaire input[type=text], .formulaire input[type=email], .formulaire input[type=tel], .formulaire input[type=date], .formulaire select, .formulaire textarea { min-height: 46px; border: 1px solid var(--filet); background: var(--blanc); padding: 10px 14px; font: 400 16px var(--police); color: var(--texte); width: 100%; }
.formulaire textarea { resize: vertical; }
.formulaire fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 6px; }
.formulaire .case { flex-direction: row; align-items: center; gap: 10px; font-weight: 400; font-size: 15px; color: var(--texte); min-height: 32px; }
.formulaire .case input { width: 18px; height: 18px; accent-color: var(--olive); }
.formulaire .bouton { width: 100%; }

/* ---------- Nos biens ---------- */
.chapitre { padding: clamp(56px, 7vw, 88px) var(--marge); scroll-margin-top: 16px; }
.chapitre:nth-of-type(even) { background: var(--creme-2); }
.chapitre-tete, .chapitre-corps { max-width: var(--largeur); margin: 0 auto; }
.chapitre-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 40px; padding-bottom: 24px; margin-bottom: 40px; border-bottom: 1px solid var(--filet); }
.chapitre-tete > div { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.chapitre-tete .num { font: 22px var(--titre); color: var(--or); }
.chapitre-tete h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.1; }
.chapitre-tete h2 a { text-decoration: none; color: inherit; }
.accroche { font-size: 18px; font-weight: 300; font-style: italic; color: var(--texte-2); max-width: 460px; }
.chapitre-corps { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.chapitre.inverse .chapitre-corps { flex-direction: row-reverse; }
.chapitre-photos { flex: 1 1 520px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.chapitre-photos a:first-child { grid-column: span 2; }
.chapitre-photos img { width: 100%; height: 200px; object-fit: cover; }
.chapitre-photos a:first-child img { height: clamp(260px, 32vw, 420px); }
.chapitre-infos { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.cles { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--filet); }
.cles > div { padding: 14px 0 14px 16px; display: flex; flex-direction: column; border-left: 1px solid var(--creme-3); }
.cles > div:first-child { padding-left: 0; border-left: 0; }
.cles dt { font: 600 11px var(--police); letter-spacing: .22em; text-transform: uppercase; color: var(--or-texte); }
.cles dd { margin: 0; font: 26px var(--titre); color: var(--olive); }
.losanges { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.losanges li { display: flex; gap: 14px; }
.losanges li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 10px; transform: rotate(45deg); border: 1px solid var(--or); }
.boutons { display: flex; flex-wrap: wrap; gap: 12px; }
.vide { text-align: center; padding: 40px 0; color: var(--texte-2); }

/* ---------- Fiche d'une maison ---------- */
.fil { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-2); }
.fil a { text-decoration: none; }
.maison-tete { padding-top: clamp(40px, 6vw, 64px); display: flex; flex-direction: column; gap: 18px; }
.maison-tete .accroche { max-width: 720px; font-size: 20px; }
.maison-galerie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, clamp(140px, 17vw, 230px)); gap: 10px; margin-top: 36px; position: relative; }
.maison-galerie button { padding: 0; border: 0; background: var(--creme-3); cursor: zoom-in; overflow: hidden; }
.maison-galerie button:first-child { grid-column: span 2; grid-row: span 2; }
.maison-galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.maison-galerie button:hover img { transform: scale(1.03); }
.maison-galerie .tout-voir { position: absolute; right: 14px; bottom: 14px; min-height: 44px; padding: 0 18px; background: var(--creme); color: var(--olive); border: 1px solid var(--olive); font: 500 12px var(--police); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
@media (max-width: 700px) {
  .maison-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 240px 120px 120px; }
  .maison-galerie button:first-child { grid-column: span 2; grid-row: span 1; }
  .maison-galerie button:nth-child(n+6) { display: none; }
}
.maison-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
@media (min-width: 960px) { .maison-grille { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); align-items: start; } .maison-cote { position: sticky; top: 24px; } }
.maison-texte { display: flex; flex-direction: column; gap: 40px; }
.maison-texte h2 { font-size: 26px; margin-bottom: 12px; }
.maison-texte .texte { font-weight: 300; }
.maison-cote { display: flex; flex-direction: column; gap: 20px; background: var(--blanc); border: 1px solid var(--filet); padding: 28px; }
.maison-cote h2 { font-size: 22px; }
.prix-saisons { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.prix-saisons li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--creme-3); font-size: 15px; }
.prix-saisons li small { display: block; color: var(--texte-2); font-size: 13px; }
.prix-saisons strong { font: 400 19px var(--titre); color: var(--olive); white-space: nowrap; }
.details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; margin: 0; font-size: 15px; }
.details dt { color: var(--texte-2); font-size: 13px; }
.details dd { margin: 0 0 6px; font-weight: 500; }
.equipements { columns: 2 220px; column-gap: 32px; margin: 0; padding: 0; list-style: none; font-size: 15px; }
.equipements li { break-inside: avoid; padding: 6px 0 6px 18px; border-bottom: 1px solid var(--creme-3); position: relative; }
.equipements li::before { content: ""; position: absolute; left: 0; top: 14px; width: 5px; height: 5px; transform: rotate(45deg); border: 1px solid var(--or); }
.maison-carte { width: 100%; height: 360px; border: 0; }
.note-pmr { font-size: 14px; color: var(--texte-2); font-style: italic; margin-top: 8px; }
.temoin { max-width: 820px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; gap: 20px; align-items: center; }
.temoin blockquote { margin: 0; font: 300 italic 20px/1.6 var(--police); }
.temoin footer { font: 600 15px var(--titre); color: var(--or-clair); }

/* ---------- La table du chef / Qui nous sommes ---------- */
.portrait { width: 100%; height: clamp(320px, 40vw, 560px); object-fit: cover; filter: grayscale(1); }
.equipe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 40px; }
.membre { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 28px; align-items: center; background: var(--blanc); border: 1px solid var(--creme-3); padding: 24px; }
.membre img, .membre .initiales { width: 100%; height: 340px; object-fit: cover; filter: grayscale(1); }
.membre .initiales { display: flex; align-items: center; justify-content: center; background: var(--creme-3); font: 48px var(--titre); color: var(--olive); filter: none; }
.membre-texte { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.membre-texte p strong { font: 600 11px var(--police); letter-spacing: .28em; text-transform: uppercase; color: var(--or-texte); }
.signature { font: 500 italic 19px var(--titre); color: var(--olive); text-align: center; max-width: 760px; margin: 48px auto 0; }

/* ---------- Pages courtes ---------- */
.message { max-width: 760px; margin: 0 auto; padding: 96px var(--marge); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }

/* ---------- Pied de page ---------- */
.pied { background: var(--olive-fonce); color: var(--creme-2); padding: 56px var(--marge) 32px; }
.pied-inner { max-width: var(--largeur); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.pied-logo { width: 96px; height: 96px; object-fit: contain; }
.pied-nom { font: 600 18px var(--titre); color: var(--creme); }
.pied-menu, .pied-contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; }
.pied-menu a { color: var(--creme-2); text-decoration: none; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; min-height: 40px; display: inline-flex; align-items: center; }
.pied-contacts a { color: var(--creme-2); text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; gap: 8px; }
.pied-contacts a span { font-family: var(--titre); color: var(--or-clair); }
.pied a:hover { color: var(--or-clair); }
.pied-reseaux { display: flex; gap: 12px; }
.pied-reseaux a { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--olive-3); color: var(--creme-2); }
.pied-reseaux svg { width: 20px; height: 20px; fill: currentColor; }
.pied-avis { color: var(--or-clair); font-size: 14px; }
.pied-legal { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--olive-clair); border-top: 1px solid var(--olive-2); padding-top: 20px; width: 100%; }

/* ---------- Visionneuse plein écran ---------- */
.visionneuse { position: fixed; inset: 0; background: rgba(28, 31, 20, .94); z-index: 50; display: flex; align-items: center; justify-content: center; }
.visionneuse[hidden] { display: none; }
.visionneuse img { max-width: 92vw; max-height: 86vh; object-fit: contain; }
.visionneuse button { position: absolute; width: 52px; height: 52px; border: 1px solid var(--or-clair); background: rgba(47, 56, 32, .7); color: var(--creme); font-size: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.v-fermer { top: 16px; right: 16px; }
.v-prec { left: 16px; top: 50%; transform: translateY(-50%); }
.v-suiv { right: 16px; top: 50%; transform: translateY(-50%); }
.v-compteur { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: var(--creme-2); font-size: 14px; letter-spacing: .14em; }

/* =========================================================
   Animations (v8.3) — discrètes, désactivées si le visiteur
   a demandé moins d'animations dans son système
   ========================================================= */
@keyframes monter { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes filet { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes losange { from { opacity: 0; transform: rotate(45deg) scale(.2); } to { opacity: 1; transform: rotate(45deg) scale(1); } }
@keyframes zoom-lent { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes respire { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }

@media (prefers-reduced-motion: no-preference) {
  /* Ouverture de l'accueil : titre, ornement et texte arrivent l'un après l'autre */
  .ouverture h1 { animation: monter 1s cubic-bezier(.2,.7,.2,1) both; }
  .ouverture .ornement::before, .ouverture .ornement::after { animation: filet .9s .5s cubic-bezier(.2,.7,.2,1) both; }
  .ouverture .ornement::before { transform-origin: right; } .ouverture .ornement::after { transform-origin: left; }
  .ouverture .ornement span { animation: losange .6s .9s ease-out both; }
  .ouverture .chapo { animation: monter 1s .7s cubic-bezier(.2,.7,.2,1) both; }
  .bandeau-photo { overflow: hidden; }
  .diapo img.actif { animation: zoom-diapo 9s ease-out both; }
  @keyframes zoom-diapo { from { transform: scale(1.1); } to { transform: scale(1); } }
  .maison-tete > * { animation: monter .9s cubic-bezier(.2,.7,.2,1) both; }
  .maison-tete > *:nth-child(2) { animation-delay: .12s; } .maison-tete > *:nth-child(3) { animation-delay: .24s; }
  .marque img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
  .marque:hover img { transform: rotate(-6deg) scale(1.06); }

  /* Apparition au défilement (classe posée par site.js) */
  .anim .apparait { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: var(--delai, 0s); }
  .anim .apparait.vu { opacity: 1; transform: none; }
  .anim .raison.apparait { border-top-color: transparent; }
  .anim .raison.apparait.vu { border-top-color: var(--or-clair); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1), border-color 1.2s ease; transition-delay: var(--delai, 0s); }

  /* Survols : photos qui s'approchent, boutons et liens qui répondent */
  .porte, .chapitre-photos a, .formule { overflow: hidden; }
  .chapitre-photos a { display: block; }
  .porte img, .chapitre-photos img, .formule img, .photo-haute, .portraits img { transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .8s ease; }
  .porte:hover img, .chapitre-photos a:hover img, .formule:hover img { transform: scale(1.05); }
  .porte, .formule { transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease, border-color .4s ease; }
  .porte:hover, .formule:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -24px rgba(47, 56, 32, .45); }
  .portraits figure:hover img, .membre:hover img { filter: grayscale(0); }
  .membre img { transition: filter .8s ease; }
  .bouton { transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .35s ease; }
  .bouton:hover { transform: translateY(-2px); }
  .lien-fleche::after { display: inline-block; transition: transform .35s ease; }
  .lien-fleche:hover::after, .porte:hover .lien-fleche::after { transform: translateX(6px); }
  .menu a { position: relative; border-bottom: 0; }
  .menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: var(--or); transform: scaleX(0); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
  .menu a:hover::after, .menu a.actif::after { transform: scaleX(1); }
  .cases > div, .chiffres > div { transition: background-color .4s ease; }
  .cases > div:hover, .chiffres > div:hover { background: var(--blanc); }
  .formule-prix strong { display: inline-block; }
  .formule.sombre:hover .formule-prix strong { animation: respire 1.6s ease-in-out; }
  .maison-galerie .tout-voir { transition: background-color .3s ease, color .3s ease; }
  .maison-galerie .tout-voir:hover { background: var(--olive); color: var(--creme); }
}
@media (max-width: 820px) { .menu a::after { display: none; } }

/* =========================================================
   En-tête toujours visible (v8.4) : il reste en haut de l'écran
   et se resserre (logo + nom sur une ligne) dès qu'on fait défiler
   ========================================================= */
html { scroll-padding-top: 96px; }
.entete { position: sticky; top: 0; z-index: 40; background: var(--creme); max-width: none; padding-inline: max(var(--marge), calc((100% - var(--largeur)) / 2 + var(--marge))); transition: box-shadow .4s ease, padding .4s ease; }
.entete.fixe { position: fixed; left: 0; right: 0; top: 0; }
.entete-haut, .marque, .marque img, .marque span { transition: all .4s cubic-bezier(.2,.7,.2,1); }
.entete.compacte { padding-top: 8px; box-shadow: 0 10px 30px -22px rgba(47, 56, 32, .55); }
.entete.compacte .entete-haut { display: none; }
.entete.compacte .marque { flex: none; }
.entete.compacte .marque span { white-space: nowrap; }
.entete.compacte .marque { flex-direction: row; gap: 12px; }
.entete.compacte .marque img { width: 40px; height: 40px; }
.entete.compacte .marque span { font-size: 18px; }
.entete.compacte .menu { padding: 2px 0 4px; }
@media (min-width: 1100px) {
  .entete.compacte { flex-direction: row; justify-content: space-between; padding-bottom: 6px; }
  .entete.compacte .menu { gap: 0 22px; padding: 0; flex-wrap: nowrap; justify-content: flex-end; }
  .entete.compacte .menu a { white-space: nowrap; letter-spacing: .14em; font-size: 12px; }
}
@media (max-width: 820px) {
  .entete.compacte { flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding-bottom: 8px; }
  .entete.compacte .marque { gap: 8px; }
  .entete.compacte .marque span { font-size: 13px; letter-spacing: .02em; }
  .entete.compacte .marque img { width: 30px; height: 30px; }
  .entete.compacte .menu-bouton { padding: 0 12px; }
  .entete.ouvert .menu { max-height: calc(100vh - 80px); overflow-y: auto; }
}

/* =========================================================
   Calendrier des saisons du Luberon (v8.11)
   ========================================================= */
:root { --cerisier: #d9a3a6; --lavande: #8c78a8; --vendanges: #7d2f3a; --truffe: #4f3f2e; }
.frise { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.frise li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; font: 500 13px var(--police); letter-spacing: .12em; color: var(--texte-2); }
.frise li::after { content: ""; width: 100%; height: 6px; background: var(--creme-3); order: 2; }
.frise li.saison-1::after { background: var(--cerisier); }
.frise li.saison-2::after { background: var(--lavande); }
.frise li.saison-3::after { background: var(--vendanges); }
.frise li.saison-4::after { background: var(--truffe); }
.frise li[class*="saison-"] { color: var(--olive); font-weight: 600; }
.frise li.maintenant { color: var(--or-texte); }
.frise li.maintenant::before { content: ""; position: absolute; top: -2px; left: 50%; width: 7px; height: 7px; transform: translateX(-50%) rotate(45deg); background: var(--or); }
.frise li small { order: 3; font: 500 10px var(--police); letter-spacing: .14em; text-transform: uppercase; color: var(--or-texte); white-space: nowrap; }
.saisons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 20px; }
.saison { background: var(--blanc); border: 1px solid var(--creme-3); border-top: 4px solid var(--creme-3); padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; }
.saison.saison-1 { border-top-color: var(--cerisier); }
.saison.saison-2 { border-top-color: var(--lavande); }
.saison.saison-3 { border-top-color: var(--vendanges); }
.saison.saison-4 { border-top-color: var(--truffe); }
.saison.en-cours { border-color: var(--or); }
.saison-mois { font: 600 12px var(--police); letter-spacing: .28em; text-transform: uppercase; color: var(--or-texte); }
.saison p { font-size: 15px; }
.saisons-liens { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: 32px; }
@media (max-width: 520px) { .frise { gap: 3px; } .frise li { font-size: 11px; letter-spacing: 0; } .frise li small { font-size: 9px; letter-spacing: .06em; } }
@media (prefers-reduced-motion: no-preference) {
  .frise li::after { transform-origin: left; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
  .anim .frise:not(.vu) li::after { transform: scaleX(0); }
  .anim .frise.vu li::after { transition-delay: calc(var(--m, 0) * 50ms); }
  .saison { transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease; }
  .saison:hover { transform: translateY(-5px); box-shadow: 0 18px 40px -26px rgba(47, 56, 32, .5); }
}