/* =========================================================
   Amandine Marie — Architecte
   Pour changer les couleurs, modifiez seulement les variables ci-dessous.
   ========================================================= */
:root {
  --fond: #f8f6f2;          /* blanc cassé, couleur du sel */
  --fond-clair: #efebe4;    /* sections alternées */
  --encre: #1f1e1c;         /* texte principal */
  --gris: #6e6a63;          /* texte secondaire */
  --trait: #d9d3c9;         /* lignes fines */
  --accent: #9a6b4f;        /* terre cuite douce */
  --ok: #3f6b4e;
  --erreur: #a3413a;
  --titre: 'Cormorant Garamond', Georgia, serif;
  --texte: 'Inter', system-ui, -apple-system, sans-serif;
  --marge: clamp(16px, 5vw, 64px);
  --max: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 300 17px/1.7 var(--texte); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titre); font-weight: 400; line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); letter-spacing: -.01em; }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: 1.5rem; }
em { font-style: italic; color: var(--accent); }

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px var(--marge);
  background: rgba(248, 246, 242, .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
.entete.defile { border-color: var(--trait); }
.logo { text-decoration: none; display: flex; flex-direction: column; line-height: 1.1; }
.logo-nom { font-family: var(--titre); font-size: 1.6rem; }
.logo-metier { font-size: .7rem; letter-spacing: .25em; text-transform: uppercase; color: var(--gris); }
.menu { display: flex; gap: 36px; }
.menu a { text-decoration: none; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; position: relative; }
.menu a::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: var(--encre); transition: width .3s; }
.menu a:hover::after { width: 100%; }
.burger { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.burger span { display: block; width: 26px; height: 1px; background: var(--encre); margin: 7px 0; transition: transform .3s; }

/* ---------- Boutons / liens ---------- */
.bouton {
  display: inline-block; padding: 15px 34px; border: 1px solid var(--encre);
  background: var(--encre); color: var(--fond); text-decoration: none; cursor: pointer;
  font: 400 .8rem var(--texte); letter-spacing: .15em; text-transform: uppercase; transition: background .3s, color .3s;
}
.bouton:hover { background: transparent; color: var(--encre); }
.lien-fleche { text-decoration: none; font-size: .9rem; border-bottom: 1px solid var(--trait); padding-bottom: 2px; transition: border-color .3s; }
.lien-fleche:hover { border-color: var(--encre); }

/* ---------- Accueil ---------- */
.hero {
  display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: center;
  max-width: var(--max); margin: 0 auto; padding: clamp(40px, 8vh, 100px) var(--marge);
  min-height: calc(100vh - 80px);
}
.surtitre { font-size: .75rem; letter-spacing: .25em; text-transform: uppercase; color: var(--gris); margin: 0 0 24px; }
.hero-intro { color: var(--gris); max-width: 32em; margin: 0 0 40px; }
.hero-actions { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.hero-image { position: relative; display: block; aspect-ratio: 4/5; overflow: hidden; background: var(--fond-clair); }
.hero-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.hero-image:hover img { transform: scale(1.03); }
.hero-legende { position: absolute; left: 0; bottom: 0; padding: 12px 16px; background: var(--fond); font-size: .8rem; color: var(--gris); }
.hero-vide { display: grid; place-items: center; color: var(--gris); font-size: .9rem; text-align: center; padding: 20px; }

/* ---------- Sections ---------- */
.section { max-width: var(--max); margin: 0 auto; padding: clamp(64px, 12vh, 140px) var(--marge); }
.section-claire { max-width: none; background: var(--fond-clair); }
.section-claire > * { max-width: calc(var(--max) - 2 * var(--marge)); margin-left: auto; margin-right: auto; }
.section-titre { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; border-bottom: 1px solid var(--trait); padding-bottom: 20px; margin-bottom: 48px; }
.section-titre h2 { margin: 0; }
.deux-colonnes { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(32px, 6vw, 96px); }
.texte-long { max-width: 38em; font-size: 1.05rem; }
.texte-long p:first-child { margin-top: 0; }
.vide { color: var(--gris); }

/* ---------- Filtres & grille projets ---------- */
.filtres { display: flex; gap: 8px; flex-wrap: wrap; }
.filtre { background: none; border: 1px solid transparent; padding: 6px 14px; cursor: pointer; font: 400 .8rem var(--texte); color: var(--gris); letter-spacing: .05em; }
.filtre:hover { color: var(--encre); }
.filtre.actif { border-color: var(--encre); color: var(--encre); }
.grille-projets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 56px 40px; }
.carte { text-decoration: none; display: block; }
.carte[hidden] { display: none; }
.carte-image { aspect-ratio: 4/3; overflow: hidden; background: var(--fond-clair); }
.carte-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease, opacity .4s; }
.carte:hover .carte-image img { transform: scale(1.04); }
.carte-texte { padding-top: 16px; }
.carte-texte h3 { margin: 0; transition: color .3s; }
.carte:hover h3 { color: var(--accent); }
.carte-texte p { margin: 2px 0 0; font-size: .85rem; color: var(--gris); }

/* ---------- Services ---------- */
.services { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 48px 40px; counter-reset: s; }
.services > li { counter-increment: s; border-top: 1px solid var(--trait); padding-top: 24px; }
.services > li::before { content: '0' counter(s); display: block; font-family: var(--titre); font-size: 1rem; color: var(--accent); margin-bottom: 12px; }
.services p { color: var(--gris); margin: 0; font-size: .95rem; }

/* ---------- Contact ---------- */
.contact-intro { color: var(--gris); }
.contact-infos { list-style: none; padding: 0; margin: 32px 0 0; }
.contact-infos li { padding: 14px 0; border-top: 1px solid var(--trait); display: flex; flex-direction: column; }
.contact-infos span { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); }
.contact-infos a { text-decoration: none; }
.formulaire, .admin-form { display: grid; gap: 22px; }
.formulaire label, .admin-form label, .admin-connexion label { display: grid; gap: 6px; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
input, select, textarea {
  width: 100%; font: 300 1rem var(--texte); color: var(--encre);
  background: transparent; border: 0; border-bottom: 1px solid var(--trait); padding: 10px 0; border-radius: 0; transition: border-color .3s;
}
textarea { resize: vertical; border: 1px solid var(--trait); padding: 12px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--encre); }
.champ-double { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.champ-triple { display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 24px; }
.formulaire label.case { display: flex; gap: 12px; align-items: flex-start; text-transform: none; letter-spacing: 0; font-size: .85rem; }
.case input { width: auto; margin-top: 4px; accent-color: var(--encre); }
.formulaire .bouton { justify-self: start; }
.piege { position: absolute; left: -9999px; }
.message { padding: 14px 18px; margin: 0 0 8px; font-size: .9rem; border-left: 3px solid; background: var(--fond); }
.message-ok { border-color: var(--ok); color: var(--ok); }
.message-erreur { border-color: var(--erreur); color: var(--erreur); }

/* ---------- Page projet ---------- */
.projet { max-width: var(--max); margin: 0 auto; padding: 48px var(--marge) 96px; }
.retour { display: inline-block; margin-bottom: 48px; }
.projet-entete { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; border-bottom: 1px solid var(--trait); padding-bottom: 28px; margin-bottom: 40px; }
.projet-entete h1 { margin: 0; }
.projet-fiche { display: flex; gap: 40px; margin: 0; }
.projet-fiche dt { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); }
.projet-fiche dd { margin: 0; }
.projet-description { margin-bottom: 64px; }
.galerie { columns: 2 380px; column-gap: 24px; }
.galerie-item { display: block; margin-bottom: 24px; break-inside: avoid; cursor: zoom-in; overflow: hidden; background: var(--fond-clair); }
.galerie-item img { width: 100%; transition: opacity .3s; }
.galerie-item:hover img { opacity: .9; }
.projet-suivant { display: block; text-decoration: none; text-align: right; border-top: 1px solid var(--trait); margin-top: 80px; padding-top: 32px; }
.projet-suivant span { display: block; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); }
.projet-suivant strong { font-family: var(--titre); font-weight: 400; font-size: clamp(1.8rem, 4vw, 2.6rem); }

/* ---------- Visionneuse ---------- */
.visionneuse { position: fixed; inset: 0; z-index: 100; background: rgba(20, 19, 17, .96); display: flex; align-items: center; justify-content: center; }
.visionneuse[hidden] { display: none; }
.visionneuse img { max-width: 90vw; max-height: 86vh; object-fit: contain; }
.visionneuse button { position: absolute; background: none; border: 0; color: #fff; font-size: 2.6rem; font-weight: 200; cursor: pointer; padding: 16px; opacity: .7; }
.visionneuse button:hover { opacity: 1; }
.v-fermer { top: 8px; right: 16px; }
.v-prec { left: 8px; } .v-suiv { right: 8px; }
.v-compteur { position: absolute; bottom: 16px; color: #bbb; font-size: .8rem; letter-spacing: .15em; margin: 0; }

/* ---------- Pied de page ---------- */
.pied { border-top: 1px solid var(--trait); padding: 56px var(--marge) 32px; font-size: .9rem; color: var(--gris); }
.pied-grille { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pied p { margin: 0 0 4px; }
.pied a { text-decoration: none; } .pied a:hover { color: var(--encre); }
.pied-nom { font-family: var(--titre); font-size: 1.4rem; color: var(--encre); }
.pied-liens { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.pied-copy { max-width: var(--max); margin: 40px auto 0 !important; font-size: .75rem; }

/* ---------- Apparition douce au défilement ---------- */
.apparait { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; }
.apparait.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .apparait { opacity: 1; transform: none; } html { scroll-behavior: auto; } }

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  .burger { display: block; }
  .menu { position: fixed; inset: 73px 0 auto 0; flex-direction: column; gap: 0; background: var(--fond); border-bottom: 1px solid var(--trait); padding: 8px var(--marge) 24px; transform: translateY(-120%); transition: transform .35s ease; z-index: -1; }
  .menu.ouvert { transform: none; }
  .menu a { padding: 14px 0; border-bottom: 1px solid var(--trait); }
  .burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-image { order: -1; aspect-ratio: 4/3; }
  .deux-colonnes, .champ-double, .champ-triple, .pied-grille { grid-template-columns: 1fr; }
  .pied-liens { align-items: flex-start; }
  .projet-fiche { gap: 24px; flex-wrap: wrap; }
}

/* =========================================================
   ESPACE ADMIN
   ========================================================= */
.admin .menu-admin { position: static; transform: none; flex-direction: row; padding: 0; border: 0; z-index: auto; gap: 24px; }
.admin .menu-admin a { padding: 0; border: 0; }
.admin-contenu { max-width: 960px; margin: 0 auto; padding: 40px var(--marge) 96px; }
.admin-contenu h1 { font-size: 2.6rem; margin-top: 16px; }
.admin-contenu h2 { font-size: 1.8rem; margin-top: 56px; border-bottom: 1px solid var(--trait); padding-bottom: 12px; }
.admin-contenu h2 small { font-size: 1rem; color: var(--gris); }
.admin-connexion { max-width: 380px; margin: 10vh auto; display: grid; gap: 24px; }
.admin-liste, .admin-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; }
.admin-carte { text-decoration: none; display: grid; gap: 6px; padding: 10px; background: #fff; border: 1px solid var(--trait); transition: border-color .2s; }
.admin-carte:hover { border-color: var(--encre); }
.admin-carte img, .sans-photo { aspect-ratio: 4/3; object-fit: cover; width: 100%; background: var(--fond-clair); }
.sans-photo { display: grid; place-items: center; color: var(--gris); font-size: .8rem; }
.admin-carte span { font-size: .8rem; color: var(--gris); }
.admin-photos figure { margin: 0; position: relative; background: #fff; border: 1px solid var(--trait); }
.admin-photos img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.admin-photos figcaption { display: flex; justify-content: space-between; padding: 6px; gap: 6px; }
.admin-photos figcaption form { margin: 0; }
.admin-photos button, .admin-supprimer button { background: none; border: 1px solid var(--trait); font: 400 .72rem var(--texte); padding: 6px 8px; cursor: pointer; }
.admin-photos button:hover { border-color: var(--encre); }
button.danger { color: var(--erreur); }
button.danger:hover { border-color: var(--erreur); }
.badge { position: absolute; top: 8px; left: 8px; background: var(--encre); color: var(--fond); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; }
.admin-form { background: #fff; border: 1px solid var(--trait); padding: clamp(20px, 4vw, 36px); }
.admin-form label.petit { max-width: 260px; }
.admin-form label small { text-transform: none; letter-spacing: 0; }
.zone-depot { position: relative; border: 1px dashed var(--gris) !important; padding: 32px 20px; text-align: center; cursor: pointer; text-transform: none !important; letter-spacing: 0 !important; font-size: .9rem !important; transition: background .2s; }
.zone-depot:hover { background: var(--fond); }
.zone-depot strong { color: var(--encre); font-weight: 500; }
.zone-depot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.zone-compte { color: var(--accent); font-style: normal; }
.admin-supprimer { margin-top: 48px; text-align: right; }

/* =========================================================
   Éléments ajoutés : à propos, étiquettes, avant / après
   ========================================================= */
.hero-points { list-style: none; padding: 0; margin: -16px 0 40px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.hero-points li::before { content: '—'; color: var(--accent); margin-right: 8px; }
.section-intro { color: var(--gris); max-width: 38em; margin: -24px 0 56px; }

.apropos { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.portrait { margin: 0; position: sticky; top: 110px; }
.portrait img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.portrait figcaption { font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; color: var(--gris); margin-top: 12px; }
.apropos h2 { margin-bottom: 32px; }
.etiquettes, .mots { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.etiquettes { margin: 32px 0; }
.etiquettes li { border: 1px solid var(--encre); padding: 6px 14px; font-size: .78rem; letter-spacing: .04em; }
.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 32px; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.chiffres div { padding: 20px 0; }
.chiffres div + div { border-left: 1px solid var(--trait); padding-left: 24px; }
.chiffres dt { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); }
.chiffres dd { margin: 0; font-family: var(--titre); font-size: 1.9rem; }
.zone { margin: 0; font-size: .95rem; }
.zone span, .contact-infos small { display: block; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); }
.contact-infos small { letter-spacing: .05em; text-transform: none; font-size: .85rem; margin-top: 2px; }

.services { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 56px 48px; }
.services > li::before { content: counter(s, decimal-leading-zero) ' —'; }
.mots { margin: 18px 0 0; }
.mots li { font-size: .72rem; letter-spacing: .06em; color: var(--gris); background: var(--fond-clair); padding: 4px 10px; }

.section-claire .carte-image { background: var(--fond); }
.galerie-item { position: relative; }
.etiquette { position: absolute; top: 14px; left: 14px; padding: 5px 12px; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; }
.etiquette-avant { background: var(--fond); color: var(--gris); }
.etiquette-apres { background: var(--encre); color: var(--fond); }
.formulaire label small { text-transform: none; letter-spacing: 0; }
.astuce { display: block; margin-top: 8px; font-size: .8rem; color: var(--gris); }
.badge-clair { background: var(--fond); color: var(--encre); border: 1px solid var(--trait); }

@media (max-width: 860px) {
  .apropos { grid-template-columns: 1fr; }
  .portrait { position: static; max-width: 340px; }
  .chiffres dd { font-size: 1.5rem; }
  .chiffres div + div { padding-left: 14px; }
}