/* Mise en page : éditoriale, alternance photo / texte, beaucoup d'air, l'or du logo comme seul accent */
:root {
  --pierre: #fdfcfa;      /* fond principal, blanc chaud */
  --sable: #f6f2ec;       /* fond des sections alternées, très léger */
  --encre: #2e2924;       /* texte, brun très foncé */
  --taupe: #7a6f63;       /* texte secondaire */
  --or: #a8823f;          /* accent, repris du logo */
  --or-fonce: #8a6a31;
  --trait: #e7dfd3;
  --gris: #f0efec;        /* gris clair chaud, fond du haut de l accueil */
  --blanc: #fffdf9;
  --f-titre: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --f-texte: "Jost", "Futura", "Century Gothic", "Segoe UI", sans-serif;
  --largeur: 1240px;
  --gouttiere: clamp(16px, 4vw, 48px);
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body {
  margin: 0;
  background: var(--pierre); color: var(--encre);
  font-family: var(--f-texte); font-weight: 300; font-size: 17px; line-height: 1.7;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

.conteneur { max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); }
.surtitre {
  font-family: var(--f-texte); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--or-fonce); margin: 0;
}
h1, h2, h3 { font-family: var(--f-titre); font-weight: 300; line-height: 1.1; text-wrap: balance; margin: 0; color: var(--encre); }
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
h3 { font-size: clamp(1.45rem, 2.2vw, 1.8rem); font-weight: 400; }
p { margin: 0; max-width: 62ch; }
.pile { display: flex; flex-direction: column; gap: 1.25rem; }

.bouton {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--f-texte); font-size: .82rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; padding: 1em 1.8em; border: 1px solid var(--or); background: var(--or); color: var(--blanc);
  transition: background .25s, color .25s;
}
.bouton:hover { background: var(--or-fonce); border-color: var(--or-fonce); }
.bouton.discret { background: transparent; color: var(--encre); border-color: var(--encre); }
.bouton.discret:hover { background: var(--encre); color: var(--pierre); }
.boutons { display: flex; flex-wrap: wrap; gap: .9rem; }

/* En-tête */
.entete { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: var(--pierre); border-bottom: 1px solid var(--trait); }
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: .7rem; }
.logo img { height: 52px; width: auto; }
.menu { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.2rem); font-size: .8rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; }
.menu a { text-decoration: none; padding-block: .3rem; border-bottom: 1px solid transparent; }
.menu a:hover { border-color: var(--or); }
.menu .bouton { padding: .8em 1.3em; border-bottom-width: 1px; }
.langues { font-size: .75rem; letter-spacing: .12em; color: var(--taupe); }
.langues b { color: var(--encre); font-weight: 500; }
.burger { display: none; background: none; border: 1px solid var(--encre); color: var(--encre); font: inherit; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; padding: .6em 1em; cursor: pointer; }

/* Haut de page */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: clamp(2.5rem, 6vw, 5rem); }
.hero .pile { gap: 1.6rem; }
.hero p.intro { font-size: 1.12rem; color: var(--taupe); }
.hero figure { margin: 0; position: relative; }
.hero figure img { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; }
.hero figcaption { position: absolute; left: 0; bottom: 0; background: var(--pierre); padding: .7rem 1.1rem .2rem 0; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--taupe); }
.zones { font-size: .85rem; color: var(--taupe); letter-spacing: .04em; border-top: 1px solid var(--trait); padding-top: 1.1rem; }

/* Sections */
.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section.sable { background: var(--sable); }
.tete-section { display: flex; flex-direction: column; gap: 1rem; margin-bottom: clamp(2.2rem, 5vw, 3.8rem); }
.tete-section.centre { align-items: center; text-align: center; }
.tete-section.centre p { margin-inline: auto; }

.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.duo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.signature { font-family: var(--f-titre); font-style: italic; font-size: 1.5rem; color: var(--or-fonce); }

/* Prestations : onglets */
.titre-maj { text-transform: uppercase; letter-spacing: .04em; text-align: center; }
.onglets { display: flex; justify-content: center; gap: .3rem; margin-top: clamp(1.8rem, 4vw, 2.8rem); overflow-x: auto; scrollbar-width: none; }
.onglets::-webkit-scrollbar { display: none; }
.onglet {
  flex: 0 0 auto; background: transparent; border: 0; cursor: pointer; color: var(--encre);
  font-family: var(--f-texte); font-size: .95rem; font-weight: 300; padding: 1.1rem 1.5rem;
  transition: background .25s;
}
.onglet:hover { background: color-mix(in srgb, var(--blanc) 55%, transparent); }
.onglet[aria-selected="true"] { background: var(--blanc); font-weight: 400; }
.panneau { background: var(--blanc); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding: clamp(1.5rem, 3vw, 2.5rem); }
.panneau .pile { padding: clamp(0rem, 2vw, 1.5rem); gap: 1.4rem; }
.panneau h3 { font-family: var(--f-titre); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 400; }
.panneau p { color: var(--taupe); }
.panneau .photos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(.8rem, 2vw, 1.6rem); }
.panneau .photos img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; }
.panneau .bouton { align-self: flex-start; }

/* Réalisations */
.invisible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mosaique { position: relative; display: flex; flex-direction: column; gap: clamp(.6rem, 1.2vw, 1.1rem); }
.rangee { display: flex; gap: clamp(.6rem, 1.2vw, 1.1rem); }
.rangee.bas { align-items: flex-end; }
.rangee.haut { align-items: flex-start; }
.rangee img { min-width: 0; width: 100%; object-fit: cover; }
.l19 { flex: 19 1 0; } .l38 { flex: 38 1 0; } .l25 { flex: 25 1 0; } .l13 { flex: 13 1 0; }
.carre { aspect-ratio: 1 / 1; } .large { aspect-ratio: 16 / 9; } .moyen { aspect-ratio: 3 / 2; }
.voir-tout {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--pierre); padding: clamp(1rem, 2vw, 1.6rem) clamp(1.8rem, 4vw, 3.2rem);
  font-family: var(--f-titre); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 300; color: var(--or-fonce);
  text-decoration: none; white-space: nowrap; transition: color .25s, background .25s;
}
.voir-tout:hover { background: var(--blanc); color: var(--encre); }

/* Étapes */
/* Une ligne par étape : numéro | titre | description + livrables */
.etapes { list-style: none; margin: 0; padding: 0; counter-reset: etape; border-bottom: 1px solid var(--trait); }
.etapes li {
  counter-increment: etape; display: grid; grid-template-columns: 4.5rem minmax(0, 4fr) minmax(0, 6fr);
  grid-template-areas: "num titre texte" "num titre livr"; column-gap: clamp(1rem, 3vw, 3rem); row-gap: .7rem;
  border-top: 1px solid var(--trait); padding-block: clamp(1.4rem, 2.6vw, 2rem);
}
.etapes li::before { content: counter(etape, decimal-leading-zero); grid-area: num; font-family: var(--f-titre); font-size: 2.4rem; font-weight: 300; line-height: 1; color: var(--or); }
.etapes h3 { grid-area: titre; font-size: clamp(1.35rem, 2vw, 1.65rem); }
.etapes h3 abbr { text-decoration: none; color: var(--taupe); }
.etapes li > p:not(.livrables) { grid-area: texte; color: var(--taupe); font-size: .98rem; }
.livrables { grid-area: livr; font-size: .9rem; color: var(--encre); }
.livrables b { font-weight: 500; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--or-fonce); margin-right: .7em; }
.etapes li.option h3::after {
  content: "En option"; display: inline-block; vertical-align: middle; margin-left: .7rem;
  font-family: var(--f-texte); font-size: .64rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--or-fonce); border: 1px solid var(--or); padding: .25em .7em; border-radius: 99px;
}

/* Avis */
.avis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.avis blockquote { margin: 0; display: flex; flex-direction: column; gap: 1.2rem; }
.avis blockquote p { font-family: var(--f-titre); font-size: 1.28rem; line-height: 1.45; font-weight: 400; }
.avis cite { font-style: normal; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--taupe); }
.guillemet { font-family: var(--f-titre); font-size: 3.4rem; line-height: .5; color: var(--or); }

/* FAQ */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.faq details { border-bottom: 1px solid var(--trait); }
.faq details:first-of-type { border-top: 1px solid var(--trait); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.3rem; font-family: var(--f-titre); font-size: 1.35rem; font-weight: 400; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-texte); font-weight: 300; font-size: 1.5rem; color: var(--or); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > p, .reponse { background: var(--blanc); padding: clamp(1.1rem, 2.4vw, 1.8rem); margin-bottom: 1.3rem; color: var(--taupe); max-width: none; }
.reponse { display: flex; flex-direction: column; gap: .9rem; }
.reponse h4 { font-family: var(--f-titre); font-size: 1.35rem; font-weight: 500; color: var(--encre); margin: .5rem 0 -.3rem; }
.reponse ul { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .4rem; }
.reponse strong { font-weight: 500; color: var(--encre); }
.reponse a { color: var(--or-fonce); }

/* Contact */
.contact { background: var(--sable); }
.contact .grille { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.coordonnees { display: grid; gap: 1.4rem; font-size: .98rem; }
.coordonnees div { display: flex; flex-direction: column; gap: .2rem; border-top: 1px solid var(--trait); padding-top: 1rem; }
.coordonnees span { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--taupe); }

/* Pied de page */
.pied { background: var(--pierre); color: var(--taupe); border-top: 1px solid var(--trait); font-size: .85rem; }
.pied .conteneur { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; padding-block: 1.8rem; }
.pied nav { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; }
.pied a { text-decoration: none; }
.pied a:hover { color: var(--encre); }

/* Tablette et téléphone */
@media (max-width: 980px) {
  .menu { display: none; }
  .burger { display: inline-block; }
  .entete.ouvert .menu { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 1rem; background: var(--pierre); padding: 1.4rem var(--gouttiere) 1.8rem; border-bottom: 1px solid var(--trait); }
  .hero, .duo, .faq, .contact .grille { grid-template-columns: minmax(0, 1fr); }
  .hero figure { order: -1; }
  .panneau { grid-template-columns: minmax(0, 1fr); }
  .onglets { justify-content: flex-start; }
  .avis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .etapes li { grid-template-columns: 3.2rem minmax(0, 1fr); grid-template-areas: "num titre" "num texte" "num livr"; }
  .rangee { flex-wrap: wrap; }
  .rangee img { flex: 1 1 calc(50% - 1rem); aspect-ratio: 1 / 1; }
  .voir-tout { position: static; transform: none; align-self: center; margin-top: .6rem; white-space: normal; text-align: center; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .logo img { height: 42px; }
  .avis { grid-template-columns: minmax(0, 1fr); }
  .etapes li::before { font-size: 1.8rem; }
  .onglet { padding: .9rem 1rem; font-size: .88rem; }
  .duo img { aspect-ratio: 4 / 3; }
}

/* Pages intérieures */
.intro-page { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 4vw, 3rem); }
.intro-page p.intro { font-size: 1.12rem; color: var(--taupe); }
.cartes4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.8rem, 1.6vw, 1.4rem); }
.carte4 { position: relative; display: block; text-decoration: none; overflow: hidden; }
.carte4 img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .7s ease; }
.carte4:hover img { transform: scale(1.04); }
.carte4 .texte { position: absolute; left: 0; right: 0; bottom: 0; background: var(--pierre); margin: .8rem; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .2rem; }
.carte4 h2 { font-size: 1.35rem; font-weight: 400; }
.carte4 p { font-size: .85rem; color: var(--taupe); }
.bloc { scroll-margin-top: 90px; }
.bloc .duo img { aspect-ratio: 4 / 5; }
.bloc.inverse .duo > img { order: 2; }
.mission { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; border-top: 1px solid var(--trait); padding-top: 1.1rem; }
.mission li { padding-left: 1.4rem; position: relative; font-size: .97rem; }
.mission li::before { content: ""; position: absolute; left: 0; top: .78em; width: .7rem; height: 1px; background: var(--or); }
.bandeau { text-align: center; }
.bandeau .pile { align-items: center; }
.bandeau p { margin-inline: auto; color: var(--taupe); }
.menu a[aria-current="page"] { border-color: var(--or); }
@media (max-width: 980px) {
  .intro-page { grid-template-columns: minmax(0, 1fr); }
  .cartes4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bloc.inverse .duo > img { order: 0; }
}
@media (max-width: 600px) {
  .bloc .duo img { aspect-ratio: 4 / 3; }
}

/* Agence */
.valeurs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.valeurs > div { display: flex; flex-direction: column; gap: .7rem; border-top: 1px solid var(--or); padding-top: 1.2rem; }
.valeurs p, .adresses p { color: var(--taupe); font-size: .97rem; }
.adresses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.adresses .pile { gap: .8rem; border-top: 1px solid var(--trait); padding-top: 1.2rem; }
.petit { font-size: .85rem !important; }
.lien-or { color: var(--or-fonce); font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; align-self: flex-start; margin-right: 1rem; }
.lien-or:hover { color: var(--encre); }
.section-courte { padding-bottom: clamp(3.5rem, 8vw, 6rem); }

/* Réalisations */
.filtres { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: clamp(1.5rem, 3vw, 2.4rem); }
.filtre { font-family: var(--f-texte); font-size: .85rem; font-weight: 400; color: var(--encre); background: transparent; border: 1px solid var(--trait); padding: .6em 1.2em; cursor: pointer; border-radius: 99px; transition: border-color .2s, background .2s; }
.filtre:hover { border-color: var(--or); }
.filtre[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--pierre); }
.projets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
.projet-carte { margin: 0; display: flex; flex-direction: column; gap: .8rem; }
.projet-carte img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.projet-carte figcaption { display: flex; flex-direction: column; gap: .15rem; }
.projet-carte b { font-family: var(--f-titre); font-size: 1.45rem; font-weight: 400; }
.projet-carte span { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--taupe); }
.vide { color: var(--taupe); }

/* Contact */
.contact-page { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.formulaire { display: flex; flex-direction: column; gap: 1.2rem; background: var(--blanc); border: 1px solid var(--trait); padding: clamp(1.2rem, 3vw, 2.4rem); }
.deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; }
.champ { display: flex; flex-direction: column; gap: .4rem; }
.champ label { font-size: .74rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); }
.champ input, .champ select, .champ textarea { font: inherit; font-size: 1rem; color: var(--encre); background: var(--pierre); border: 1px solid var(--trait); border-radius: 0; padding: .8em .9em; width: 100%; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--or); }
.champ textarea { resize: vertical; }
.champ .erreur { border-color: #a5432f; }
.accord { display: flex; gap: .7rem; align-items: flex-start; font-size: .85rem; color: var(--taupe); }
.accord input { margin-top: .3rem; accent-color: var(--or); }
.formulaire .bouton { align-self: flex-start; cursor: pointer; font-family: var(--f-texte); }
.retour { font-size: .92rem; color: var(--or-fonce); min-height: 1.4em; }

@media (max-width: 980px) {
  .valeurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adresses, .projets, .articles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-page { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .valeurs, .adresses, .projets, .articles, .deux { grid-template-columns: minmax(0, 1fr); }
}

/* Prestations : haut de page, 4 panneaux en accordéon (le panneau survolé s'ouvre) */
.haut-competences { background: var(--sable); padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.haut-competences > .pile { gap: 1.4rem; padding-bottom: clamp(2rem, 4vw, 3rem); }
.titre-competences { text-transform: uppercase; letter-spacing: .02em; font-size: clamp(2.6rem, 6vw, 4.8rem); }
.haut-competences .intro { color: var(--taupe); font-size: 1.08rem; }
.domaines { display: flex; padding-inline: var(--gouttiere); height: clamp(380px, 40vw, 540px); }
.domaine { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; color: var(--blanc); text-decoration: none; transition: flex-grow .7s cubic-bezier(.4, 0, .2, 1); }
.domaine.ouvert { flex-grow: 4.5; }
.domaine img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s ease; }
.domaine::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--encre) 45%, transparent); transition: background .5s; }
.domaine.ouvert::after { background: linear-gradient(to top, color-mix(in srgb, var(--encre) 60%, transparent), transparent 60%); }
.domaine.ouvert img { transform: scale(1.03); }
.domaine .vertical {
  position: absolute; left: clamp(.9rem, 1.6vw, 1.5rem); bottom: clamp(1rem, 2vw, 1.8rem); z-index: 1;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--f-texte); font-weight: 400; text-transform: uppercase; letter-spacing: .06em;
  font-size: clamp(1.05rem, 1.9vw, 1.6rem); line-height: 1.1; white-space: nowrap; color: var(--blanc);
  transition: opacity .3s;
}
.domaine .detail {
  position: absolute; left: clamp(1.2rem, 3vw, 2.4rem); bottom: clamp(1.2rem, 3vw, 2.4rem); z-index: 1;
  width: min(26rem, 70vw); display: flex; flex-direction: column; gap: .6rem;
  opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .25s; pointer-events: none;
}
.domaine .detail b { font-family: var(--f-texte); font-weight: 400; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.15; }
.domaine .detail small { font-size: .95rem; line-height: 1.5; max-width: 22rem; }
.domaine.ouvert .vertical { opacity: 0; }
.domaine.ouvert .detail { opacity: 1; transform: none; transition: opacity .45s .35s, transform .45s .35s; }
.domaine:focus-visible { outline: 2px solid var(--blanc); outline-offset: -6px; }
@media (max-width: 760px) {
  .domaines { flex-direction: column; height: auto; gap: 2px; }
  .domaine, .domaine.ouvert { flex: none; height: 200px; }
  .domaine .vertical { display: none; }
  .domaine .detail { opacity: 1; transform: none; width: auto; right: 1.2rem; }
  .domaine::after { background: linear-gradient(to top, color-mix(in srgb, var(--encre) 65%, transparent), color-mix(in srgb, var(--encre) 15%, transparent)); }
}
@media (prefers-reduced-motion: reduce) { .domaine, .domaine img, .domaine .detail { transition: none !important; } }

/* Prestations : formules et devis */
.devis { font-size: .82rem; letter-spacing: .06em; color: var(--taupe); font-style: italic; margin-top: -.4rem; }
.devis.centre { text-align: center; margin: clamp(1.5rem, 3vw, 2.2rem) auto 0; max-width: none; }
.formules { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 2.4vw, 2rem); }
.formule { background: var(--sable); padding: clamp(1.4rem, 3vw, 2.4rem); display: flex; flex-direction: column; gap: .9rem; scroll-margin-top: 90px; }
.formule h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.formule p { color: var(--taupe); }
.formule .pour { color: var(--encre); font-size: .92rem; border-top: 1px solid var(--trait); padding-top: .9rem; margin-top: auto; }
@media (max-width: 760px) { .formules { grid-template-columns: minmax(0, 1fr); } }

/* Blog : cartes avec image et encart blanc qui chevauche la photo */
.articles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 3.5vw, 3rem) clamp(1rem, 2.4vw, 2rem); align-items: start; }
.article { display: flex; flex-direction: column; text-decoration: none; }
.article img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.article .carton { background: var(--blanc); margin: -3.2rem 1.2rem 0; position: relative; padding: clamp(1.1rem, 2vw, 1.6rem); display: flex; flex-direction: column; gap: .7rem; transition: transform .35s ease; }
.article:hover .carton { transform: translateY(-6px); }
.article h2 { font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 400; line-height: 1.2; }
.article .meta { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: .8rem; color: var(--encre); }
.article .meta span { color: var(--or-fonce); }
.article .extrait { font-size: .9rem; color: var(--taupe); line-height: 1.6; }

/* Article */
.article-haut { position: relative; background: var(--encre) var(--photo) center / cover no-repeat; color: var(--blanc); text-align: center; }
.article-haut::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--encre) 58%, transparent); }
.article-haut .pile { position: relative; align-items: center; gap: 1rem; padding-block: clamp(4.5rem, 12vw, 9rem); }
.article-haut h1 { color: var(--blanc); font-size: clamp(2rem, 4.6vw, 3.6rem); max-width: 22ch; }
.article-meta { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--blanc) 85%, transparent); }
.article-meta a { color: inherit; }
.article-fond { background: var(--sable); padding-inline: var(--gouttiere); padding-bottom: clamp(3rem, 7vw, 5rem); }
.article-corps { background: var(--blanc); max-width: 860px; margin: 0 auto; padding: clamp(1.6rem, 5vw, 4rem); display: flex; flex-direction: column; gap: 1.1rem; position: relative; top: -2.5rem; margin-bottom: -2.5rem; }
.article-corps h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; margin-top: 1.6rem; }
.article-corps h2:first-child { margin-top: 0; }
.article-corps h3 { font-size: 1.4rem; margin-top: .8rem; }
.article-corps p, .article-corps li { color: var(--taupe); font-size: 1rem; line-height: 1.8; }
.article-corps ul, .article-corps ol { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: .4rem; }
.article-corps strong { color: var(--encre); font-weight: 500; }
.auteur { max-width: 860px; margin: 1.5rem auto 0; background: var(--blanc); padding: clamp(1.2rem, 3vw, 2rem); display: flex; align-items: center; gap: 1.5rem; }
.auteur img { width: 110px; height: auto; flex: none; }
.auteur p { font-size: .92rem; color: var(--taupe); }
.auteur .auteur-nom { font-family: var(--f-titre); font-size: 1.35rem; color: var(--encre); }
.auteur a { color: var(--or-fonce); }
@media (max-width: 980px) { .articles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .articles { grid-template-columns: minmax(0, 1fr); }
  .auteur { flex-direction: column; align-items: flex-start; }
}

/* Liens e-mail / téléphone et piège anti-spam du formulaire */
.lien-contact { color: inherit; text-decoration: none; border-bottom: 1px solid var(--trait); transition: border-color .2s, color .2s; }
.lien-contact:hover { color: var(--or-fonce); border-color: var(--or); }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire { position: relative; }
.formulaire .bouton:disabled { opacity: .6; cursor: wait; }

/* Accueil : contact avec formulaire */
.contact-accueil { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.contact-accueil .coordonnees { margin-top: .6rem; }
.lien-or-texte { color: var(--or-fonce); }
@media (max-width: 980px) { .contact-accueil { grid-template-columns: minmax(0, 1fr); } }

/* Pages légales */
.texte-legal { max-width: 760px; display: flex; flex-direction: column; gap: 1rem; }
.texte-legal h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); font-weight: 400; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--trait); }
.texte-legal h2:first-child { margin-top: 0; }
.texte-legal p, .texte-legal li { color: var(--taupe); line-height: 1.8; }
.texte-legal ul { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: .3rem; }
.a-completer { background: color-mix(in srgb, var(--or) 22%, transparent); color: var(--encre); padding: 0 .3em; }
.maj { font-size: .85rem; margin-top: 1.5rem; }

/* Accueil : texte à gauche, grande image jusqu au bord droit, fond gris clair */
.hero-grand { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; background: var(--gris); padding: clamp(1.5rem, 3.5vw, 3rem) 0 clamp(1.5rem, 3.5vw, 3rem) max(var(--gouttiere), calc((100vw - var(--largeur)) / 2 + var(--gouttiere))); }
.hero-texte { display: flex; flex-direction: column; gap: 1.5rem; padding-block: 1.5rem; }
.hero-texte h1 { font-size: clamp(2.4rem, 4.2vw, 4rem); }
.hero-texte .intro { font-size: 1.1rem; color: var(--taupe); }
.hero-photo { margin: 0; align-self: stretch; }
.hero-photo img { width: 100%; height: 100%; min-height: clamp(380px, 66vh, 700px); object-fit: cover; }
@media (max-width: 860px) {
  .hero-grand { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 0; }
  .hero-photo { order: -1; }
  .hero-photo img { min-height: 0; aspect-ratio: 4 / 3; }
  .hero-texte { padding: 2rem var(--gouttiere) 2.5rem; }
}

/* Flèche pour remonter en haut de page */
.remonter { position: fixed; right: clamp(1rem, 2.5vw, 2rem); bottom: calc(clamp(1rem, 2.5vw, 2rem) + env(safe-area-inset-bottom, 0px)); z-index: 20; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--or); background: var(--blanc); color: var(--or-fonce); display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 20px color-mix(in srgb, var(--encre) 14%, transparent); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s, transform .3s, background .2s, color .2s; }
.remonter.visible { opacity: 1; transform: none; pointer-events: auto; }
.remonter:hover { background: var(--or); color: var(--blanc); }
.remonter svg { width: 1.2rem; height: 1.2rem; }

/* Prestations : texte à gauche, 4 panneaux à droite (ajustement) */
.haut-competences { background: var(--gris); padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.competences-grille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.haut-competences .competences-grille > .pile { padding-bottom: 0; gap: 1.3rem; }
.titre-competences { font-size: clamp(2.4rem, 4.4vw, 4rem); }
.domaines { padding-inline: 0; height: clamp(340px, 32vw, 440px); }
.domaine .vertical { font-size: clamp(.95rem, 1.25vw, 1.2rem); }
.domaine .detail { width: min(22rem, 60vw); }
.domaine .detail b { font-size: clamp(1.2rem, 1.9vw, 1.6rem); }
@media (max-width: 980px) { .competences-grille { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .domaines { height: auto; } }

/* Réalisations : cartes cliquables */
.projet-carte { text-decoration: none; color: inherit; }
.projet-carte img { transition: transform .6s ease, opacity .3s; }
.projet-carte:hover img { opacity: .9; }
.projet-texte { display: flex; flex-direction: column; gap: .15rem; }
.projet-carte .projet-texte > span { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--taupe); }

/* Page projet */
.fil { font-size: .8rem; color: var(--taupe); padding-top: 1.4rem; }
.fil a { color: inherit; }
.projet-haut { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem); align-items: start; }
.projet-haut h1 { font-size: clamp(2.8rem, 6vw, 5rem); }
.projet-sous-titre { font-family: var(--f-titre); font-size: clamp(1.3rem, 2.2vw, 1.7rem); color: var(--taupe); }
.projet-infos { margin: .6rem 0 0; display: grid; gap: .9rem; }
.projet-infos div { border-top: 1px solid var(--trait); padding-top: .8rem; display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; }
.projet-infos dt { font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--or-fonce); padding-top: .2rem; }
.projet-infos dd { margin: 0; }
.projet-texte-long p { color: var(--taupe); }
.projet-texte-long .intro { font-family: var(--f-titre); font-size: clamp(1.4rem, 2.3vw, 1.8rem); line-height: 1.4; color: var(--encre); }
.galerie { columns: var(--colonnes, 3) 260px; column-gap: clamp(.6rem, 1.4vw, 1.2rem); }
.galerie-photo { display: block; break-inside: avoid; margin-bottom: clamp(.6rem, 1.4vw, 1.2rem); overflow: hidden; cursor: zoom-in; }
.galerie-photo img { width: 100%; height: auto; transition: transform .6s ease; }
.galerie-photo:hover img { transform: scale(1.03); }
.galerie-avant { columns: 3 220px; }
.avant-apres { border-top: 1px solid var(--trait); padding-top: clamp(2.5rem, 5vw, 4rem); }
.projet-nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-block: 1.5rem 3rem; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; }
.projet-nav a { color: var(--encre); text-decoration: none; border-bottom: 1px solid var(--trait); }
.projet-nav a:hover { color: var(--or-fonce); border-color: var(--or); }
@media (max-width: 860px) { .projet-haut { grid-template-columns: minmax(0, 1fr); } }

/* Visionneuse de photos */
.visionneuse { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; background: color-mix(in srgb, var(--encre) 94%, transparent); color: var(--blanc); }
.visionneuse[open] { display: grid; grid-template-columns: 4rem minmax(0, 1fr) 4rem; align-items: center; }
.visionneuse img { max-width: 100%; max-height: 88vh; margin: auto; object-fit: contain; }
.visionneuse button { background: none; border: 0; color: var(--blanc); font-size: 2.2rem; line-height: 1; cursor: pointer; padding: 1rem; font-family: var(--f-texte); }
.visionneuse .fermer { position: absolute; top: .6rem; right: .8rem; font-size: 2rem; }
.visionneuse .legende { position: absolute; left: 0; right: 0; bottom: 1rem; text-align: center; font-size: .85rem; color: color-mix(in srgb, var(--blanc) 80%, transparent); padding-inline: 1rem; }
@media (max-width: 600px) { .visionneuse[open] { grid-template-columns: 2.6rem minmax(0, 1fr) 2.6rem; } .visionneuse button { padding: .4rem; font-size: 1.8rem; } }
.projet-carte > .projet-texte { font-size: inherit; letter-spacing: 0; text-transform: none; color: var(--encre); }

/* Pages projet : bandeau « Ce projet vous plaît ? » sur la photo du projet */
.cta-projet { position: relative; background: var(--encre) var(--photo) center / cover no-repeat; color: var(--blanc); text-align: center; margin-top: clamp(1rem, 3vw, 2rem); }
.cta-projet::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--encre) 62%, transparent); }
.cta-projet .pile { position: relative; align-items: center; gap: 1.2rem; padding-block: clamp(4rem, 10vw, 7rem); }
.cta-projet h2 { color: var(--blanc); text-transform: uppercase; letter-spacing: .03em; font-size: clamp(2.2rem, 5vw, 3.8rem); }
.cta-projet p { color: color-mix(in srgb, var(--blanc) 88%, transparent); margin-inline: auto; }
.bouton.contour { background: transparent; border-color: var(--blanc); color: var(--blanc); }
.bouton.contour:hover { background: var(--blanc); color: var(--encre); }

/* Accueil : contact en carte, grande photo à gauche, formulaire compact à droite */
.contact-carte-fond { background: var(--gris); padding-inline: var(--gouttiere); }
.contact-carte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--blanc); padding: 0; max-width: calc(var(--largeur) - 2 * var(--gouttiere)); }
.contact-photo { width: 100%; height: 100%; object-fit: cover; min-height: 100%; }
.contact-corps { padding: clamp(1.6rem, 4vw, 3.2rem); display: flex; flex-direction: column; gap: 1.1rem; }
.contact-corps h2 { text-transform: uppercase; letter-spacing: .02em; font-size: clamp(2rem, 3.6vw, 3rem); }
.contact-corps > p:not(.surtitre) { color: var(--taupe); font-size: .95rem; }
.formulaire-court { display: flex; flex-direction: column; gap: .9rem; margin-top: .4rem; }
.champ-court input, .champ-court select, .champ-court textarea { font: inherit; font-size: .95rem; color: var(--encre); background: var(--blanc); border: 1px solid var(--trait); border-radius: 0; padding: .85em 1em; width: 100%; }
.champ-court input::placeholder, .champ-court textarea::placeholder { color: var(--taupe); opacity: .8; }
.champ-court input:focus, .champ-court select:focus, .champ-court textarea:focus { outline: none; border-color: var(--or); }
.champ-court .erreur, .champ-court input.erreur, .champ-court select.erreur, .champ-court textarea.erreur { border-color: #a5432f; }
.champ-court textarea { resize: vertical; }
.bouton.plein { width: 100%; justify-content: center; cursor: pointer; font-family: var(--f-texte); }
@media (max-width: 860px) {
  .contact-carte { grid-template-columns: minmax(0, 1fr); }
  .contact-photo { aspect-ratio: 4 / 3; height: auto; }
}

/* Page rendez-vous : calendrier Calendly */
.calendrier { background: var(--blanc); border: 1px solid var(--trait); min-height: 700px; }
.calendrier-secours { margin-top: 1.2rem; font-size: .92rem; color: var(--taupe); }

/* Article : photo d'en-tête en vraie image (lisible par Google) */
.article-haut { overflow: hidden; }
.article-haut-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.article-haut::before { z-index: 1; }
.article-haut .pile { z-index: 2; }
.plus-loin { max-width: 860px; margin: 1.5rem auto 0; background: var(--blanc); padding: clamp(1.2rem, 3vw, 2rem); display: flex; flex-direction: column; gap: .9rem; }
.plus-loin h2 { font-size: 1.6rem; }
.plus-loin a, .zone-services a, .zone-blog a { color: var(--encre); text-decoration-color: var(--or); text-underline-offset: 3px; }
.plus-loin a:hover, .zone-services a:hover, .zone-blog a:hover { color: var(--or-fonce); }

/* Pages zones d'intervention */
.zone-corps { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.zone-corps > .pile p { color: var(--taupe); }
.zone-communes { font-size: .9rem; border-top: 1px solid var(--trait); padding-top: 1rem; }
.zone-communes b { color: var(--encre); font-weight: 500; }
.zone-services { background: var(--sable); padding: clamp(1.2rem, 3vw, 2rem); display: flex; flex-direction: column; gap: 1rem; }
.zone-services h2, .zone-blog h2 { font-size: 1.6rem; }
.zone-blog { margin-top: clamp(2rem, 4vw, 3rem); display: flex; flex-direction: column; gap: .9rem; }
.zone-carte { display: flex; flex-direction: column; gap: .8rem; text-decoration: none; color: inherit; }
.zone-carte img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.zone-carte .projet-texte b { font-family: var(--f-titre); font-size: 1.45rem; font-weight: 400; }
.zone-carte .projet-texte > span { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--taupe); }
@media (max-width: 860px) { .zone-corps { grid-template-columns: minmax(0, 1fr); } }

/* Pied de page : zones d'intervention */
.pied-zones { border-top: 1px solid var(--trait); }
.pied-zones .conteneur { padding-block: 1.2rem; font-size: .8rem; gap: .4rem 1.2rem; justify-content: flex-start; }
.pied-zones b { font-weight: 500; color: var(--encre); }
.exemples { font-size: .88rem; color: var(--taupe); }
.exemples a, .zones a { color: inherit; text-decoration-color: var(--or); text-underline-offset: 3px; }
.exemples a:hover, .zones a:hover { color: var(--or-fonce); }
.reseaux { display: flex; gap: 1rem; align-items: center; }
.reseaux a { display: flex; color: var(--taupe); }
.reseaux a:hover { color: var(--encre); }