/* ==========================================================================
   Artisanow - couche de design
   Chargee apres site.css : redefinit les jetons et ajoute les composants.
   Modifier ici = modifier tout le site.
   ========================================================================== */

:root {
  --vert: #2F3A33;
  --vert-fonce: #232C26;
  --vert-clair: #3C4A41;
  --ink: #221F1B;
  --bg: #F7F5F0;
  --blanc: #FFFFFF;
  --muted: #726C63;
  --line: #E4DFD5;
  --line-fine: #EDE9E1;
  --brique: #C1440E;
  --rayon: 3px;
  --section: 104px;
  --section-mobile: 60px;
}

/* --- jetons repris des utilitaires existants : un seul point de reglage --- */
.bg-accent { background-color: var(--vert) !important; }
.text-accent { color: var(--vert) !important; }
.border-accent { border-color: var(--vert) !important; }
.hover\:bg-accent:hover { background-color: var(--vert) !important; }
.hover\:text-accent:hover { color: var(--vert) !important; }
.hover\:border-accent:hover { border-color: var(--vert) !important; }
.bg-ink { background-color: var(--vert) !important; }
.hover\:bg-ink:hover { background-color: var(--vert-fonce) !important; }
.border-line { border-color: var(--line-fine) !important; }
.bg-line\/25, .bg-line\/20 { background-color: #F1EEE7 !important; }

.max-w-content { max-width: 1240px !important; }

/* --- angles : le gabarit est architectural, pas arrondi --- */
.rounded-2xl { border-radius: var(--rayon) !important; }
.rounded-3xl { border-radius: var(--rayon) !important; }
.rounded-full.uppercase { border-radius: var(--rayon) !important; }

/* --- respiration verticale --- */
@media (min-width: 768px) {
  .md\:py-16 { padding-top: 84px !important; padding-bottom: 84px !important; }
  .md\:py-20 { padding-top: 96px !important; padding-bottom: 96px !important; }
  .md\:py-24 { padding-top: var(--section) !important; padding-bottom: var(--section) !important; }
  .md\:pt-14 { padding-top: 72px !important; }
  .md\:pb-24 { padding-bottom: var(--section) !important; }
}
@media (max-width: 767px) {
  .py-16 { padding-top: var(--section-mobile) !important; padding-bottom: var(--section-mobile) !important; }
  .py-14 { padding-top: 52px !important; padding-bottom: 52px !important; }
}

/* --- typographie : titres plus poses, texte plus lisible --- */
h1, h2, h3 { letter-spacing: -0.015em; }
h2 { line-height: 1.15; }
p { text-wrap: pretty; }

/* --- en-tete : fin, clair, discret --- */
header.sticky {
  background-color: rgb(247 245 240 / .92) !important;
  border-bottom: 1px solid var(--line-fine) !important;
  backdrop-filter: saturate(140%) blur(10px);
}
header .h-20 { height: 74px !important; }
header nav a { letter-spacing: .01em; }
header nav a.border-b-2 { border-bottom-width: 1px !important; border-color: var(--brique) !important; }

/* --- boutons --- */
.uppercase.rounded-full { letter-spacing: .04em !important; font-size: 12px !important; text-transform: none !important; }
a.bg-accent.uppercase { transition: background-color .25s ease; }

/* --- filets --- */
.border-t.border-line, .border-b.border-line { border-color: var(--line-fine) !important; }

/* ==========================================================================
   Composants
   ========================================================================== */

/* bandeau editorial vert : grande photo + aplat + texte */
.an-bande { background: var(--vert); color: #fff; }
.an-bande .an-bande-grille {
  display: grid; gap: 0; align-items: stretch;
  grid-template-columns: 1fr;
}
.an-bande figure { margin: 0; }
.an-bande img { width: 100%; height: 100%; object-fit: cover; display: block; }
.an-bande .an-bande-texte { padding: 48px 24px 56px; }
.an-bande h2 { color: #fff; }
.an-bande p { color: rgb(255 255 255 / .74); }
@media (min-width: 900px) {
  .an-bande .an-bande-grille { grid-template-columns: 1.15fr 1fr; min-height: 460px; }
  .an-bande .an-bande-texte { padding: 72px 64px; display: flex; flex-direction: column; justify-content: center; }
}
/* section deux colonnes texte / image */
/* rangee de reperes sous le hero */

/* grille portfolio facon agence */
.an-portfolio { display: grid; gap: 28px 24px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .an-portfolio { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .an-portfolio { grid-template-columns: repeat(3, 1fr); gap: 40px 28px; } }
.an-projet { display: block; text-decoration: none; color: inherit; }
.an-projet .an-visuel { position: relative; overflow: hidden; border-radius: var(--rayon); aspect-ratio: 4 / 3; background: #EDE9E1; }
.an-projet.an-portrait .an-visuel { aspect-ratio: 3 / 4; }
.an-projet .an-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.16,1,.3,1); }
.an-projet:hover .an-visuel img { transform: scale(1.04); }
.an-projet .an-cat {
  display: block; margin-top: 14px; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.an-projet .an-nom { display: block; margin-top: 5px; font-family: 'Playfair Display', Georgia, serif; font-size: 18px; line-height: 1.3; color: var(--ink); }
.an-projet:hover .an-nom { color: var(--vert); }
@media (min-width: 1000px) {
  .an-projet.an-double { grid-column: span 2; }
  .an-projet.an-double .an-visuel { aspect-ratio: 16 / 9; }
}

/* filtres legers du portfolio */
.an-filtres { display: flex; flex-wrap: wrap; gap: 8px; }
.an-filtre {
  appearance: none; border: 1px solid var(--line); background: transparent;
  font: inherit; font-size: 12px; letter-spacing: .06em; color: var(--muted);
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  transition: all .2s ease;
}
.an-filtre:hover { border-color: var(--vert); color: var(--vert); }
.an-filtre[aria-pressed="true"] { background: var(--vert); border-color: var(--vert); color: #fff; }
/* liste de points forts avec picto */
/* formulaire */
/* coordonnees */
/* citation de fin */
/* --- ombres : on les retire, le gabarit est plat --- */

/* ==========================================================================
   Formulaires (contact) - restyles globalement, sans toucher au balisage
   ========================================================================== */
form input[type="text"], form input[type="email"], form input[type="tel"],
form input[type="search"], form input:not([type]), form select, form textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  background: var(--blanc); border: 1px solid var(--line);
  border-radius: var(--rayon); padding: 13px 15px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
form input:focus, form select:focus, form textarea:focus {
  outline: none; border-color: var(--vert); box-shadow: 0 0 0 3px rgb(47 58 51 / .08);
}
form textarea { min-height: 140px; resize: vertical; }
form label { font-size: 13px; letter-spacing: .02em; color: var(--muted); }
form button[type="submit"], form input[type="submit"] {
  background: var(--vert); color: #fff; border: 0; border-radius: var(--rayon);
  font: inherit; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 15px 28px; cursor: pointer; transition: background-color .25s ease;
}
form button[type="submit"]:hover, form input[type="submit"]:hover { background: var(--vert-fonce); }

/* ==========================================================================
   Finitions
   ========================================================================== */
/* images : jamais deformees */
img { max-width: 100%; height: auto; }
.an-visuel img, .object-cover { height: 100%; }

/* liens de texte accentues : trait fin plutot que couleur vive */
.underline-grow::after { height: 1px; }

/* listes numerotees des pages service : chiffres plus discrets */
.font-heading.text-3xl { font-size: 1.6rem !important; color: var(--vert) !important; }

/* pastilles (peinture, parquet...) */
.bg-surface.border.border-line.rounded-full { border-radius: 999px !important; background: transparent !important; }
/* citation de fin de page */
/* separateur fin reutilisable */

/* mobile : respiration et titres maitrises */
@media (max-width: 767px) {
  .an-bande .an-bande-texte { padding: 40px 22px 46px; }
  .an-projet .an-nom { font-size: 17px; }
  h2 { line-height: 1.2; }
}

/* en-tete : plage tablette ou la nav et le bouton se disputaient la place */
@media (min-width: 768px) and (max-width: 1100px) {
  header nav { gap: 14px !important; }
  header nav a { font-size: 12.5px !important; }
  header a.bg-accent.uppercase { padding-left: 14px !important; padding-right: 14px !important; font-size: 10px !important; letter-spacing: .06em !important; }
  header .max-w-content { padding-left: 16px !important; padding-right: 16px !important; }
}
@media (min-width: 768px) and (max-width: 880px) {
  header nav { gap: 11px !important; }
  header nav a { font-size: 12px !important; }
}

/* portfolio : proportion unique, grille parfaitement alignee */
#portfolio .an-projet .an-visuel { aspect-ratio: 4 / 3 !important; }
#portfolio .an-projet { display: flex; flex-direction: column; }
#portfolio .an-nom { margin-top: 4px; }
/* ==========================================================================
   Composants issus des maquettes
   ========================================================================== */
/* --- hero photographique avec titre superpose --- */
/* reperes poses en bas du hero */

/* --- hero scinde : panneau texte + photo --- */
.an-hero-split { display: grid; grid-template-columns: 1fr; align-items: stretch; }
.an-hero-split figure { margin: 0; }
.an-hero-split img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; display: block; }
.an-hero-split .an-panneau { background: var(--bg); padding: 40px 24px 46px; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 900px) {
  .an-hero-split { grid-template-columns: .92fr 1.08fr; min-height: 520px; }
  .an-hero-split.an-inverse { grid-template-columns: 1.08fr .92fr; }
  .an-hero-split.an-inverse figure { order: -1; }
  .an-hero-split .an-panneau { padding: 72px 60px; }
}
/* --- rangee d'icones --- */
/* --- encadre CTA doux --- */
/* --- contact deux colonnes --- */

/* --- bandeau vert avec photo (accueil, contact) --- */
.an-bande.an-bande-inverse .an-bande-grille { direction: rtl; }
.an-bande.an-bande-inverse .an-bande-grille > * { direction: ltr; }
/* taille des titres de hero : definie ici, pas via une classe Tailwind inventee */
.an-hero-split .an-panneau h1 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); line-height: 1.14; font-weight: 500; }

/* contact : formulaire a gauche, coordonnees a droite (maquette) */
@media (min-width: 768px) {
  .contact-grille { grid-template-columns: 62% 38% !important; }
  
}

/* logo : jamais comprime par le flex (il etait ecrase de 5% en en-tete, 16% en pied) */

/* logo : reduction proportionnelle, jamais d'ecrasement */
header a > img[src*="artisanow-logo"], footer img[src*="artisanow-logo"] {
  height: auto !important; width: auto; max-width: 100%; object-fit: contain;
}
header a > img[src*="artisanow-logo"] { max-height: 32px; }
footer img[src*="artisanow-logo"] { max-height: 28px; }

/* ==========================================================================
   Maquette accueil - mise en page exacte
   ========================================================================== */

.mq { --gouttiere: 24px; }
.mq-conteneur { max-width: 1240px; margin: 0 auto; padding: 0 var(--gouttiere); }
.mq-sur { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 0; }
.mq-titre { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; letter-spacing: -.01em; color: var(--ink); margin: 0; }

/* --- HERO --- */
.mq-hero { position: relative; overflow: hidden; background: #1B1F1C; }
.mq-hero > img { display: block; width: 100%; height: clamp(520px, 72vh, 700px); object-fit: cover; }
.mq-hero::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(18,22,19,.82) 0%, rgba(18,22,19,.66) 34%, rgba(18,22,19,.30) 66%, rgba(18,22,19,.14) 100%); }
.mq-hero-corps { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; }
.mq-hero .mq-sur { color: rgb(255 255 255 / .78); }
.mq-hero h1 { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; color: #fff;
  font-size: clamp(2.1rem, 4.6vw, 3.35rem); line-height: 1.13; letter-spacing: -.015em; margin: 18px 0 0; max-width: 15ch; }
.mq-hero .mq-chapo { margin: 20px 0 0; color: rgb(255 255 255 / .84); font-size: 15px; line-height: 1.6; max-width: 34ch; }
.mq-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.mq-btn { display: inline-block; font-size: 12px; letter-spacing: .04em; padding: 14px 26px; border-radius: 2px; text-decoration: none; transition: all .25s ease; border: 1px solid transparent; }
.mq-btn-vert { background: var(--vert); color: #fff; border-color: var(--vert); }
.mq-btn-vert:hover { background: var(--vert-fonce); border-color: var(--vert-fonce); }
.mq-btn-clair { background: transparent; color: #fff; border-color: rgb(255 255 255 / .5); }
.mq-btn-clair:hover { background: #fff; color: var(--ink); border-color: #fff; }
.mq-btn-sombre { background: var(--vert); color: #fff; }
.mq-btn-sombre:hover { background: var(--vert-fonce); }

/* reperes en bas du hero, repartis sur toute la largeur */
.mq-hero-reperes { position: absolute; left: 0; right: 0; bottom: 34px; z-index: 3; }
.mq-hero-reperes .mq-conteneur { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.mq-rep { display: inline-flex; align-items: center; gap: 12px; color: rgb(255 255 255 / .92); font-size: 14px; }
.mq-rep svg { width: 26px; height: 26px; stroke: rgb(255 255 255 / .8); stroke-width: 1.1; fill: none; flex: none; }
@media (max-width: 760px) {
  .mq-hero-reperes { position: static; background: var(--vert); padding: 20px 0; }
  .mq-hero-reperes .mq-conteneur { flex-direction: column; gap: 14px; }
  .mq-hero > img { height: clamp(420px, 62vh, 520px); }
}

/* --- SAVOIR-FAIRE --- */
.mq-bloc { padding: 96px 0; background: var(--blanc); }
.mq-bloc.mq-ivoire { background: var(--bg); }
@media (max-width: 767px) { .mq-bloc { padding: 60px 0; } }
.mq-entete { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: end; margin-bottom: 44px; }
@media (min-width: 900px) { .mq-entete { grid-template-columns: 1.3fr 1fr; gap: 64px; } }
.mq-entete h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.2; }
.mq-entete p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.65; }

.mq-cartes { display: grid; grid-template-columns: 1fr; gap: 26px; }
@media (min-width: 820px) { .mq-cartes { grid-template-columns: repeat(3, 1fr); } }
.mq-carte { display: block; text-decoration: none; color: inherit; background: var(--bg); border-radius: 2px; overflow: hidden; }
.mq-carte .mq-vis { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #EDE9E1; }
.mq-carte .mq-vis img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.16,1,.3,1); }
.mq-carte:hover .mq-vis img { transform: scale(1.04); }
.mq-carte .mq-txt { padding: 24px 24px 26px; }
.mq-carte h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-size: 19px; margin: 0; color: var(--ink); }
.mq-carte p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.mq-carte .mq-lien { display: inline-block; margin-top: 18px; font-size: 13px; color: var(--ink); }
.mq-carte:hover .mq-lien { color: var(--vert); }
/* --- BANDE VERTE --- */
.mq-bande .mq-panneau { padding: 52px 26px 58px; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 900px) { .mq-bande .mq-panneau { padding: 72px clamp(32px, 5vw, 72px); } }
.mq-bande .mq-sur { color: rgb(255 255 255 / .62); }
.mq-bande .mq-btns { margin-top: 32px; }

/* --- DUO texte / image a fond perdu --- */
.mq-duo { display: grid; grid-template-columns: 1fr; background: var(--bg); align-items: stretch; }
@media (min-width: 900px) { .mq-duo { grid-template-columns: 1fr 1fr; min-height: 440px; } }
.mq-duo figure { margin: 0; }
.mq-duo img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 280px; }
.mq-duo .mq-panneau { padding: 56px 26px 60px; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 900px) {
  .mq-duo .mq-panneau { padding: 76px clamp(32px, 4vw, 64px) 76px max(26px, calc((100vw - 1240px) / 2 + 24px)); }
  .mq-duo.mq-inverse .mq-panneau { padding: 76px max(26px, calc((100vw - 1240px) / 2 + 24px)) 76px clamp(32px, 4vw, 64px); }
  .mq-duo.mq-inverse figure { order: -1; }
}
.mq-duo h2 { font-size: clamp(1.65rem, 3vw, 2.3rem); line-height: 1.2; margin: 18px 0 0; max-width: 17ch; }
.mq-duo p { color: var(--muted); font-size: 14.5px; line-height: 1.65; margin: 20px 0 0; max-width: 42ch; }

/* rangee de 4 pictos */
.mq-pictos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin: 34px 0 0; }
@media (min-width: 620px) { .mq-pictos { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.mq-picto { text-align: left; }
.mq-picto svg { width: 24px; height: 24px; stroke: var(--vert); stroke-width: 1.2; fill: none; display: block; }
.mq-picto span { display: block; margin-top: 10px; font-size: 12.5px; color: var(--muted); }

/* voile bas du hero : les reperes de droite passaient sur une zone claire */
.mq-hero::after {
  background:
    linear-gradient(to top, rgba(18,22,19,.80) 0px, rgba(18,22,19,.42) 110px, rgba(18,22,19,0) 230px),
    linear-gradient(90deg, rgba(18,22,19,.82) 0%, rgba(18,22,19,.66) 34%, rgba(18,22,19,.30) 66%, rgba(18,22,19,.14) 100%);
}
@media (max-width: 760px) { .mq-hero::after { background: linear-gradient(90deg, rgba(18,22,19,.84) 0%, rgba(18,22,19,.62) 60%, rgba(18,22,19,.42) 100%); } }
/* ==========================================================================
   Maquette page service - blocs specifiques
   ========================================================================== */
/* --- barre de 5 reperes avec filets verticaux --- */
.mn-barre .mq-conteneur { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .mn-barre .mq-conteneur { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .mn-barre .mq-conteneur { grid-template-columns: repeat(5, 1fr); } }

/* --- savoir-faire : photo a fond perdu + texte --- */
.mn-savoir { display: grid; grid-template-columns: 1fr; background: var(--blanc); align-items: center; }
@media (min-width: 900px) { .mn-savoir { grid-template-columns: 1fr 1fr; min-height: 420px; } }
.mn-savoir figure { margin: 0; }
.mn-savoir img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 260px; }
.mn-savoir .mn-txt { padding: 52px 26px 56px; }
@media (min-width: 900px) { .mn-savoir .mn-txt { padding: 72px max(26px, calc((100vw - 1240px) / 2 + 24px)) 72px clamp(32px, 4vw, 64px); } }
.mn-savoir h2 { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-size: clamp(1.7rem, 3.1vw, 2.35rem); line-height: 1.18; margin: 16px 0 0; max-width: 16ch; color: var(--ink); }
.mn-savoir p { color: var(--muted); font-size: 14.5px; line-height: 1.7; margin: 22px 0 0; max-width: 46ch; }
.mn-lien { display: inline-block; margin-top: 26px; font-size: 13.5px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.mn-lien:hover { color: var(--vert); border-color: var(--vert); }

/* --- trois etapes numerotees --- */
.mn-etapes { background: var(--blanc); padding-bottom: 88px; }
.mn-etapes .mq-conteneur { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 820px) { .mn-etapes .mq-conteneur { grid-template-columns: repeat(3, 1fr); } }
.mn-etape { padding: 26px 0; border-top: 1px solid var(--line-fine); }
@media (min-width: 820px) { .mn-etape { padding: 8px 36px 8px 0; border-top: 0; border-left: 1px solid var(--line-fine); padding-left: 36px; } .mn-etape:first-child { border-left: 0; padding-left: 0; } }
.mn-etape b { display: block; font-weight: 400; font-size: 13px; color: var(--muted); letter-spacing: .04em; }
.mn-etape h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-size: 19px; margin: 12px 0 0; color: var(--ink); }
.mn-etape p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); max-width: 32ch; }

/* --- cartes realisations avec sous-titre --- */
.mn-real { background: var(--bg); }
.mn-entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 34px; }
.mn-entete h2 { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.2; margin: 14px 0 0; color: var(--ink); }
.mn-grille { display: grid; grid-template-columns: 1fr; gap: 26px; }
@media (min-width: 820px) { .mn-grille { grid-template-columns: repeat(3, 1fr); } }
.mn-carte { display: block; text-decoration: none; color: inherit; }
.mn-carte .mn-vis { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #EDE9E1; border-radius: 2px; }
.mn-carte .mn-vis img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.16,1,.3,1); }
.mn-carte:hover .mn-vis img { transform: scale(1.04); }
.mn-carte b { display: block; margin-top: 16px; font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-size: 17px; color: var(--ink); }
.mn-carte span { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.mn-carte:hover b { color: var(--vert); }
/* --- CTA final : panneau vert + photo --- */
.mn-cta .mq-sur { color: rgb(255 255 255 / .6); }
/* ==========================================================================
   Maquette Renovation
   ========================================================================== */
/* hero : photo pleine largeur, bloc texte ivoire dessous */
/* liste verticale de points avec picto */

/* section deux colonnes photo / texte */
.rn-duo { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: center; }
@media (min-width: 900px) { .rn-duo { grid-template-columns: 1fr 1.05fr; gap: 64px; } }
.rn-duo figure { margin: 0; }
.rn-duo figure img { width: 100%; display: block; border-radius: 2px; aspect-ratio: 4 / 3; object-fit: cover; }
.rn-duo h2 { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-size: clamp(1.6rem, 2.9vw, 2.2rem); line-height: 1.2; margin: 0; color: var(--ink); }
.rn-duo p { color: var(--muted); font-size: 14.5px; line-height: 1.7; margin: 20px 0 0; max-width: 44ch; }
/* cartes realisations avec lien */
/* encadre CTA centre avec ampoule */
.rn-cta .mq-btns { justify-content: center; margin-top: 26px; }
/* ---- realisations : types de projets (restauration H3 SEO) ---- */
/* ==========================================================================
   Maquette Realisations
   ========================================================================== */
/* --- hero photo pleine largeur, titre blanc a gauche --- */

/* --- entete du portfolio, centree comme la maquette --- */
#portfolio .re-entete { text-align: center; max-width: 62ch; margin: 0 auto 34px; }
#portfolio .re-entete h2 { font-family: 'Playfair Display', Georgia, serif; font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.2; margin: 0; color: var(--ink); }
#portfolio .re-entete p { margin: 14px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.7; }

/* --- barre de filtres centree, pastille active claire --- */
#portfolio .an-filtres { justify-content: center; gap: 6px 4px; margin-bottom: 38px !important; }
#portfolio .an-filtre { border: 0; background: transparent; border-radius: 2px;
  font-size: 13px; letter-spacing: .01em; color: var(--muted); padding: 9px 18px; }
#portfolio .an-filtre:hover { background: rgba(47,58,51,.05); color: var(--ink); }
#portfolio .an-filtre[aria-pressed="true"] { background: #EDE9E1; color: var(--ink); border: 0; }

/* --- cartes projet facon maquette : visuel, titre, lien --- */
#portfolio .an-portfolio { gap: 34px 26px; }
@media (min-width: 1000px) { #portfolio .an-portfolio { gap: 40px 28px; } }
#portfolio .an-projet .an-visuel { border-radius: 2px; }
#portfolio .an-projet .an-cat { display: none; }
#portfolio .an-projet .an-nom { display: block; margin-top: 16px;
  font-family: 'Playfair Display', Georgia, serif; font-weight: 400;
  font-size: 17px; line-height: 1.3; color: var(--ink); }
#portfolio .an-projet .an-lien { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); }
#portfolio .an-projet:hover .an-nom, #portfolio .an-projet:hover .an-lien { color: var(--vert); }
/* --- bandeau CTA ivoire : photo, texte, bouton --- */
/* realisations : titre sur 3 lignes au-dela de 900px, voile ajuste */

/* filtres : display:flex sur la carte annulait l'attribut hidden */
#portfolio .an-projet[hidden], .an-projet[hidden] { display: none !important; }
/* ==========================================================================
   Maquette A propos
   ========================================================================== */
/* --- hero : panneau ivoire a gauche, portrait a droite --- */
/* bloc auteur en bas du panneau */
/* --- notre histoire : photo detail a gauche, texte a droite --- */
/* --- quatre valeurs centrees --- */
/* --- bandeau citation ivoire --- */
/* texte secondaire sur panneau ivoire F1EEE7 : muted trop clair (4.49) */

/* ==========================================================================
   PASSE DE SOBRIETE - rythme, boutons, titres, replis
   ========================================================================== */

:root { --sy: 52px; --sy-court: 34px; }
@media (min-width: 768px) { :root { --sy: 76px; --sy-court: 48px; } }
@media (min-width: 1100px) { :root { --sy: 108px; --sy-court: 68px; } }

/* rythme vertical unique sur toutes les sections de premier niveau */
body > section:not(.mq):not(.re-hero):not(.ap-hero):not(.an-hero):not(.an-hero-split):not(.ap-bande-citation):not(.an-bande) {
  padding-top: var(--sy) !important; padding-bottom: var(--sy) !important;
}
.mq-bloc { padding: var(--sy) 0 !important; }

/* largeur de contenu unique */
.max-w-content, .mq-conteneur { max-width: 1240px !important; }

/* titres : une seule echelle */
body > section h2, .mq-bloc h2, .an-repli-corps h2 {
  font-family: "Playfair Display", Georgia, serif; font-weight: 400; letter-spacing: -.01em;
  font-size: clamp(1.5rem, 2.9vw, 2.15rem); line-height: 1.22; color: var(--ink);
}
body > section h3, .an-repli-corps h3 { font-weight: 500; font-size: 16px; line-height: 1.35; color: var(--ink); }
body > section p { font-size: 14.5px; line-height: 1.75; }

/* boutons : un seul gabarit partout */
a.bg-accent, a.border-accent, .an-btn, .mq-btn {
  border-radius: var(--rayon) !important; font-size: 12px !important; letter-spacing: .04em !important;
  text-transform: none !important; padding: 14px 26px !important; font-weight: 400 !important;
  display: inline-block; text-decoration: none; transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
header a.bg-accent { padding: 12px 20px !important; }
footer a.border-accent { padding: 11px 20px !important; }

/* replis : accordeons SEO fermes par defaut */
.an-repli { border-top: 1px solid var(--line-fine); }
.an-repli + .an-repli { border-top: 0; }
.an-repli > summary {
  list-style: none; cursor: pointer; padding: 22px 34px 22px 0; position: relative;
  font-size: 14.5px; color: var(--ink); letter-spacing: .005em;
}
.an-repli > summary::-webkit-details-marker { display: none; }
.an-repli > summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px;
  border-right: 1px solid var(--muted); border-bottom: 1px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); transition: transform .25s ease;
}
.an-repli[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.an-repli > summary:hover { color: var(--vert); }

/* voir plus : masque les elements au-dela du seuil */
.an-plus-btn { display: block; margin: 40px auto 0; background: transparent; border: 1px solid var(--line);
  border-radius: var(--rayon); font: inherit; font-size: 13px; color: var(--ink); padding: 14px 30px; cursor: pointer;
  transition: border-color .2s ease, color .2s ease; }
.an-plus-btn:hover { border-color: var(--vert); color: var(--vert); }
[data-cache="1"] { display: none !important; }
/* REPLI - rendu interne : les sections pliees redeviennent du texte simple */
.an-repli-corps figure, .an-repli-corps .mq-vis, .an-repli-corps .an-visuel { margin: 0 0 14px !important; }
.an-repli-corps .mq-btns, .an-repli-corps .mq-btn, .an-repli-corps svg { display: none !important; }

/* FAQ : accordeons dans le flux normal */
.an-repli > p { margin: 0 0 22px; font-size: 14px; line-height: 1.7; color: var(--muted); max-width: 68ch; }
.an-repli > p a { color: var(--vert); }

/* trio de visuels : ratio et gouttiere uniques */
.an-trio { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 640px) { .an-trio { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.an-trio > a, .an-trio > figure { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--rayon); display: block; margin: 0; position: relative; }
.an-trio img { width: 100%; height: 100%; object-fit: cover; display: block; }
.an-repli-corps .an-trio { display: block !important; }

/* realisation signature : photo 60 / texte 40 */
.an-signature { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; }
@media (min-width: 900px) { .an-signature { grid-template-columns: 1.5fr 1fr; gap: 60px; } }
.an-signature figure { margin: 0; }
.an-signature figure img { width: 100%; height: auto; max-height: 560px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rayon); display: block; }
@media (min-width: 900px) { .an-signature figure img { aspect-ratio: 5 / 4; max-height: 500px; } }
.an-signature p { max-width: 46ch; }

/* ==========================================================================
   PORTFOLIO EDITORIAL - 2 colonnes, rythme grande / 2 petites
   ========================================================================== */
#portfolio .an-portfolio { display: grid; grid-template-columns: 1fr; gap: 26px; }
@media (min-width: 780px) { #portfolio .an-portfolio { grid-template-columns: 1fr 1fr; gap: 40px 32px; } }
@media (min-width: 780px) { #portfolio .an-projet.an-large { grid-column: 1 / -1; } }
#portfolio .an-projet .an-visuel { aspect-ratio: 4 / 3 !important; border-radius: var(--rayon); overflow: hidden; background: #EDE9E1; }
@media (min-width: 780px) { #portfolio .an-projet.an-large .an-visuel { aspect-ratio: 16 / 9 !important; } }
#portfolio .an-projet .an-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* carte : photo, categorie, titre. rien d'autre */
#portfolio .an-projet .an-cat { display: block !important; margin-top: 16px; font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); }
#portfolio .an-projet .an-nom { display: block; margin-top: 7px; font-family: "Playfair Display", Georgia, serif;
  font-weight: 400; font-size: 17px; line-height: 1.3; color: var(--ink); }
@media (min-width: 780px) { #portfolio .an-projet.an-large .an-nom { font-size: 20px; } }
#portfolio .an-projet .an-lien { display: none !important; }
#portfolio .an-projet:hover .an-nom { color: var(--vert); }
#portfolio .an-plus-btn[hidden] { display: none !important; }
/* a propos : photo de chantier pleine largeur au-dessus de la citation */
.ap-bande-citation .ap-photo-large + .max-w-content { padding-top: 8px; }
/* 3 valeurs seulement */

/* titre de page sobre (contact, conseils, pages SEO) */
.an-titre-page { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; letter-spacing: -.012em;
  font-size: clamp(1.9rem, 3.8vw, 2.85rem); line-height: 1.14; margin: 14px 0 0; color: var(--ink); max-width: 20ch; }

/* question de FAQ : reste un h3 pour la structure, sans style de titre */
.an-repli > summary > h3 { display: inline; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; font-family: inherit; }

/* TABLETTE - grilles a deux colonnes des 640px, la page etait deux fois trop longue */
@media (min-width: 640px) and (max-width: 819px) {
  .mq-cartes { grid-template-columns: repeat(2, 1fr); }
  .mn-grille { grid-template-columns: repeat(2, 1fr); }
  .mn-etapes .mq-conteneur { grid-template-columns: repeat(3, 1fr); }
  .mn-etape { border-top: 0; border-left: 1px solid var(--line-fine); padding: 8px 22px; }
  .mn-etape:first-of-type { border-left: 0; padding-left: 0; }
}
@media (min-width: 640px) and (max-width: 779px) {
  #portfolio .an-portfolio { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  #portfolio .an-projet.an-large { grid-column: 1 / -1; }
  #portfolio .an-projet.an-large .an-visuel { aspect-ratio: 16 / 9 !important; }
}
/* le champ anti-robot ne doit jamais compter dans la largeur */
input[name="website"] { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden; clip: rect(0 0 0 0); left: auto !important; opacity: 0; }

/* MOBILE - respiration maitrisee, page moins longue */
@media (max-width: 639px) {
  .mn-etapes { padding-bottom: var(--sy) !important; }
  .mn-etapes .mq-conteneur > div:first-child { margin-bottom: 22px !important; }
  .mn-etape { padding: 18px 0; }
  footer .max-w-content.grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px 24px; }
  footer .max-w-content.grid > div:first-child { grid-column: 1 / -1; }
  .mq-carte .mq-txt { padding: 20px 20px 22px; }
  .mq-duo .mq-panneau { padding: 42px 24px 46px; }
  .mq-bande .mq-panneau { padding: 42px 24px 46px; }
}

/* BOUTONS - normalisation finale : text-xs de la feuille compilee gagnait encore */
body a.bg-accent, body a.border-accent, body .an-btn, body .mq-btn, body .an-plus-btn, body form button[type="submit"] {
  font-size: 12px !important; letter-spacing: .04em !important; text-transform: none !important;
  font-weight: 400 !important; border-radius: var(--rayon) !important;
}
body section a.bg-accent, body section a.border-accent, body .mq-btn, body .an-plus-btn, body form button[type="submit"] { padding: 14px 26px !important; }
body header a.bg-accent { padding: 12px 20px !important; }
body footer a.border-accent { padding: 11px 20px !important; }
body form button[type="submit"] { width: 100%; }

/* la nav n est pas un bouton : la regle bouton attrapait les liens actifs */
body header nav a, body header nav a.border-accent, body #mobile-menu nav a, body #mobile-menu nav a.border-accent { padding: 0 !important; border-radius: 0 !important; font-size: 13.5px !important; letter-spacing: normal !important; }
body header nav a.border-b-2, body header nav a.border-accent { padding-bottom: 4px !important; }
body #mobile-menu nav a, body #mobile-menu nav a.border-accent { padding-left: 12px !important; }

/* VOILE ACCUEIL - titre SEO plus long : il debordait sur la zone claire de la photo */
.mq-hero::after {
  background:
    linear-gradient(to top, rgba(18,22,19,.82) 0px, rgba(18,22,19,.46) 130px, rgba(18,22,19,0) 260px),
    linear-gradient(90deg, rgba(18,22,19,.90) 0%, rgba(18,22,19,.86) 46%, rgba(18,22,19,.58) 74%, rgba(18,22,19,.26) 100%);
}
@media (max-width: 760px) { .mq-hero::after { background: linear-gradient(90deg, rgba(18,22,19,.90) 0%, rgba(18,22,19,.78) 60%, rgba(18,22,19,.60) 100%); } }
.mq-hero h1 { max-width: 17ch; }

/* SIGNATURE - photo entiere : plus de recadrage, on suit les dimensions du fichier */
.an-signature figure img {
  width: 100%; height: auto; max-height: none; aspect-ratio: auto; object-fit: contain;
  border-radius: var(--rayon); display: block; margin: 0 auto;
}
@media (min-width: 900px) {
  .an-signature { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  .an-signature figure img { width: auto; max-width: 100%; max-height: 620px; }
}

/* ==========================================================================
   PORTFOLIO MASONRY - photos entieres, aucun recadrage
   ========================================================================== */
#portfolio .an-portfolio { display: block !important; columns: 1; column-gap: 30px; }
@media (min-width: 700px) { #portfolio .an-portfolio { columns: 2; column-gap: 34px; } }
@media (min-width: 1200px) { #portfolio .an-portfolio { column-gap: 40px; } }
#portfolio .an-projet { display: inline-block; width: 100%; break-inside: avoid; -webkit-column-break-inside: avoid;
  page-break-inside: avoid; margin: 0 0 38px; }
#portfolio .an-projet.an-large { grid-column: auto; }
#portfolio .an-projet .an-visuel { display: block; aspect-ratio: auto !important; overflow: visible;
  border-radius: var(--rayon); background: transparent; }
#portfolio .an-projet .an-visuel img { width: 100%; height: auto !important; object-fit: contain !important;
  display: block; border-radius: var(--rayon); transition: opacity .5s ease; }
#portfolio .an-projet:hover .an-visuel img { opacity: .9; transform: none; }
#portfolio .an-projet .an-cat { display: block !important; margin-top: 15px; font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); }
#portfolio .an-projet .an-nom { display: block; margin-top: 7px; font-family: "Playfair Display", Georgia, serif;
  font-weight: 400; font-size: 17px; line-height: 1.35; color: var(--ink); }
#portfolio .an-projet .an-lien { display: none !important; }
#portfolio .an-plus-btn { margin-top: 12px; }

/* MASONRY EN COLONNES FIXES - les photos deja affichees ne bougent plus */
#portfolio .an-portfolio { display: flex !important; columns: auto !important; gap: 30px; align-items: flex-start; }
@media (min-width: 700px) { #portfolio .an-portfolio { gap: 34px; } }
@media (min-width: 1200px) { #portfolio .an-portfolio { gap: 40px; } }
#portfolio .an-col { flex: 1 1 0; min-width: 0; }
#portfolio .an-projet { display: block; width: 100%; margin: 0 0 38px; break-inside: auto; }

/* methode en 4 etapes : 4 colonnes, la 4e ne tombe plus seule sur une 2e ligne */
@media (min-width: 620px) and (max-width: 899px) { .mn-etapes.mn-4 .mq-conteneur { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .mn-etapes.mn-4 .mq-conteneur { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 620px) and (max-width: 899px) { .mn-etapes.mn-4 .mn-etape:nth-of-type(odd) { border-left: 0; padding-left: 0; } }
.mn-etapes.mn-4 .mn-etape p { max-width: 30ch; }

/* RECIT PAR CATEGORIE - page realisations */
#an-recits[hidden], .an-recit[hidden] { display: none !important; }
#an-recits { max-width: 760px; margin: -14px 0 42px; padding: 2px 0 2px 24px; border-left: 2px solid var(--vert); animation: anRecitEntre .34s ease both; }
@keyframes anRecitEntre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
#an-recits h3 { font-size: 19px; line-height: 1.3; font-weight: 500; color: var(--ink); margin: 0 0 12px; letter-spacing: .005em; }
#an-recits .an-recit-corps { font-size: 16px; line-height: 1.78; color: var(--ink); margin: 0 0 12px; }
#an-recits .an-recit-lien { font-size: 14.5px; line-height: 1.7; color: var(--muted); margin: 0; }
#an-recits .an-recit-lien a { color: var(--vert); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
#an-recits .an-recit-lien a:hover { color: var(--brique); }
@media (min-width: 1100px) { #an-recits { padding-left: 30px; margin-bottom: 52px; } #an-recits h3 { font-size: 21px; } #an-recits .an-recit-corps { font-size: 16.5px; } }
@media (max-width: 639px) { #an-recits { padding-left: 16px; margin: -10px 0 32px; } #an-recits h3 { font-size: 17.5px; } #an-recits .an-recit-corps { font-size: 15.5px; line-height: 1.72; } #an-recits .an-recit-lien { font-size: 14px; } }
#portfolio .an-projet { cursor: default; }

/* HEADER - navigation, telephone et WhatsApp */
body header nav.an-nav { display: none; align-items: center; gap: 26px; }
@media (min-width: 1024px) { body header nav.an-nav { display: flex; } }
@media (min-width: 1200px) { body header nav.an-nav { gap: 32px; } }
body header .an-actions { display: flex; align-items: center; gap: 14px; }
body header #mobile-menu-btn { display: flex; }
@media (min-width: 1024px) { body header #mobile-menu-btn { display: none; } body header #mobile-menu { display: none !important; } }
body header .an-cta-tete { display: none; }
@media (min-width: 640px) { body header .an-cta-tete { display: inline-block; } }
body .an-tel { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; line-height: 1; color: var(--ink); text-decoration: none; white-space: nowrap; padding: 0; border: 0; background: none; letter-spacing: normal; text-transform: none; }
body .an-tel svg { width: 17px; height: 17px; flex: none; color: var(--vert); }
body header .an-tel .an-tel-num { display: none; }
@media (min-width: 1200px) { body header .an-tel .an-tel-num { display: inline; } }
body .an-tel:hover { color: var(--vert); }
body .an-wa { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: #25D366; text-decoration: none; padding: 0; border: 0; background: none; transition: opacity .2s ease; }
body .an-wa svg { width: 23px; height: 23px; }
body .an-wa:hover { opacity: .75; }
.an-menu-contact { display: flex; align-items: center; gap: 24px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.an-menu-contact .an-tel span { display: inline !important; }
body .an-wa-menu { width: auto; height: auto; border-radius: 0; gap: 8px; font-size: 13.5px; color: var(--ink); }
body .an-wa-menu .an-wa-ico { display: inline-flex; color: #25D366; }
body .an-wa-menu .an-wa-ico svg { width: 19px; height: 19px; }

/* ==========================================================================
   PAGE CONTACT - carte formulaire, champs, coordonnees
   ========================================================================== */
.contact-grille { display: grid !important; grid-template-columns: 1fr !important; gap: 38px; align-items: start; }
@media (min-width: 900px) { .contact-grille { grid-template-columns: 33% 1fr !important; gap: 58px; } }
.contact-grille .space-y-6 > * + * { margin-top: 20px; }
.contact-grille .flex.items-start { display: flex; align-items: flex-start; gap: 14px; }
.contact-grille .w-11 { width: 42px; height: 42px; border-radius: 50%; background: var(--line-fine); display: flex; align-items: center; justify-content: center; flex: none; }
.contact-grille .space-y-6 p { line-height: 1.55; }

body #devis { background: var(--blanc); border: 1px solid var(--line-fine); border-radius: var(--rayon); box-shadow: 0 30px 62px -34px rgba(34,31,27,.32); padding: 30px 22px 34px; }
@media (min-width: 700px) { body #devis { padding: 46px 44px 48px; } }
body #devis > h2 { font-family: "Playfair Display", Georgia, serif; font-weight: 400; font-size: clamp(1.35rem, 2.4vw, 1.6rem); line-height: 1.2; margin: 0 0 26px; color: var(--ink); }

#devis-form > * + * { margin-top: 20px; }
#devis-form .grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 620px) { #devis-form .grid { grid-template-columns: 1fr 1fr; } }
#devis-form label:not(.flex) { display: block; font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; font-weight: 500; color: var(--muted); margin-bottom: 9px; }
#devis-form input[type="text"], #devis-form input[type="tel"], #devis-form input[type="email"], #devis-form select, #devis-form textarea {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 15px; line-height: 1.45; color: var(--ink);
  background: #FBFAF6; border: 1px solid var(--line); border-radius: var(--rayon); padding: 13px 15px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
#devis-form textarea { min-height: 132px; resize: vertical; display: block; }
#devis-form select { height: 48px; }
#devis-form input:focus, #devis-form select:focus, #devis-form textarea:focus { outline: none; background: var(--blanc); border-color: var(--vert); box-shadow: 0 0 0 3px rgba(47,58,51,.10); }
#devis-form input::placeholder, #devis-form textarea::placeholder { color: #A9A296; }

#devis-form #champ-photos { width: 100%; box-sizing: border-box; border: 1px dashed var(--line); background: #FBFAF6; border-radius: var(--rayon); padding: 16px; font-size: 13.5px; color: var(--muted); cursor: pointer; }
#devis-form #champ-photos:hover { border-color: var(--vert); }
#devis-form #champ-photos::file-selector-button { font-family: inherit; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; border: 0; border-radius: var(--rayon); padding: 10px 17px; margin-right: 14px; background: var(--vert); color: #fff; cursor: pointer; transition: background .2s ease; }
#devis-form #champ-photos::file-selector-button:hover { background: var(--ink); }

#devis-form label.flex { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 1.6; color: var(--muted); text-transform: none; letter-spacing: normal; }
#devis-form label.flex input[type="checkbox"] { margin-top: 3px; width: 15px; height: 15px; accent-color: var(--vert); flex: none; }

body #devis-form button[type="submit"] { margin-top: 28px; border: 0; cursor: pointer; transition: background .25s ease, color .25s ease; }
body #devis-form button[type="submit"]:hover { background: var(--ink) !important; }
#devis-erreur, #devis-succes { border-radius: var(--rayon); }

/* recits : lignes de complement */
#an-recits .an-recit-note { font-size: 13.5px; line-height: 1.65; color: var(--muted); margin: 8px 0 0; }
#an-recits .an-recit-note:first-of-type { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-fine); }
#an-recits .an-recit-note a { color: var(--vert); text-decoration: underline; text-underline-offset: 3px; }
#an-recits .an-recit-note a:hover { color: var(--brique); }

/* ==========================================================================
   PAGE RENOVATION - refonte editoriale
   ========================================================================== */
.rn-cite { margin: 30px 0 0; padding: 0 0 0 20px; border-left: 2px solid var(--vert); font-family: "Playfair Display", Georgia, serif; font-weight: 400; font-size: clamp(1.05rem, 1.9vw, 1.35rem); line-height: 1.45; color: var(--ink); font-style: normal; }
@media (min-width: 900px) { .rn-cite { padding-left: 26px; } }

/* travaux 01-04 */
.rn-travaux { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 56px; }
@media (min-width: 860px) { .rn-travaux { grid-template-columns: 1fr 1fr; column-gap: 72px; } }
.rn-travail { padding: 34px 0; border-top: 1px solid var(--line); }
@media (min-width: 860px) { .rn-travail { padding: 42px 0 46px; } }
.rn-travail .rn-num { display: block; font-size: 11px; letter-spacing: .22em; color: var(--muted); margin-bottom: 14px; }
.rn-travail h3 { font-family: "Playfair Display", Georgia, serif; font-weight: 400; font-size: clamp(1.35rem, 2.6vw, 1.75rem); line-height: 1.2; color: var(--ink); margin: 0 0 16px; }
.rn-travail p { font-size: 14.5px; line-height: 1.75; color: var(--muted); margin: 0 0 12px; }
.rn-travail p:last-child { margin-bottom: 0; }

/* bande de transition */
.rn-bande { background: var(--vert); color: #fff; padding: 72px 0; }
@media (min-width: 900px) { .rn-bande { padding: 104px 0; } }
.rn-bande .max-w-content { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: start; }
@media (min-width: 900px) { .rn-bande .max-w-content { grid-template-columns: .85fr 1.15fr; gap: 72px; } }
.rn-bande-titre { font-family: "Playfair Display", Georgia, serif; font-weight: 400; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.15; color: #fff; margin: 0; }
.rn-bande-txt p { font-size: 15px; line-height: 1.8; color: rgba(255,255,255,.72); margin: 0 0 16px; }
.rn-bande-txt p:last-child { margin-bottom: 0; }
.rn-bande-txt a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.rn-bande-cite { margin-top: 26px !important; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.22); font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.05rem, 1.9vw, 1.3rem) !important; line-height: 1.45 !important; color: #fff !important; }

/* galerie editoriale */
.rn-gal { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 44px; align-items: start; }
@media (min-width: 820px) { .rn-gal { grid-template-columns: repeat(12, 1fr); gap: 34px; }
  .rn-gal .rn-gal-item:nth-child(1) { grid-column: span 7; }
  .rn-gal .rn-gal-item:nth-child(2) { grid-column: span 5; }
  .rn-gal .rn-gal-item:nth-child(3) { grid-column: span 5; }
  .rn-gal .rn-gal-item:nth-child(4) { grid-column: span 7; }
  .rn-gal .rn-gal-item:nth-child(5) { grid-column: span 7; }
  .rn-gal .rn-gal-item:nth-child(6) { grid-column: span 5; }
  .rn-gal .rn-gal-item:nth-child(n+7) { grid-column: span 6; }
}
@media (min-width: 1200px) { .rn-gal { gap: 44px; } }
.rn-gal-item { margin: 0; }
.rn-gal-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--rayon); overflow: hidden; }
.rn-gal-btn img { display: block; width: 100%; height: auto; border-radius: var(--rayon); transition: opacity .45s ease, transform .9s cubic-bezier(.16,1,.3,1); }
.rn-gal-btn:hover img { opacity: .92; transform: scale(1.015); }
.rn-gal-item figcaption { margin-top: 12px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* lightbox */
.rn-lb[hidden] { display: none !important; }
.rn-lb { position: fixed; inset: 0; z-index: 200; background: rgba(18,22,19,.94); display: flex; align-items: center; justify-content: center; padding: 56px 16px; }
.rn-lb-corps { margin: 0; max-width: 1100px; max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.rn-lb-corps img { max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto; display: block; border-radius: 2px; }
.rn-lb-corps figcaption { margin-top: 16px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.62); text-align: center; }
.rn-lb button { position: absolute; background: none; border: 0; color: #fff; cursor: pointer; line-height: 1; opacity: .78; transition: opacity .2s ease; font-family: inherit; }
.rn-lb button:hover { opacity: 1; }
.rn-lb-fermer { top: 18px; right: 20px; font-size: 34px; }
.rn-lb-prec, .rn-lb-suiv { top: 50%; transform: translateY(-50%); font-size: 26px; padding: 14px 8px; }
.rn-lb-prec { left: 10px; } .rn-lb-suiv { right: 10px; }
@media (min-width: 900px) { .rn-lb-prec { left: 26px; } .rn-lb-suiv { right: 26px; } .rn-lb-fermer { top: 24px; right: 30px; } }

/* etapes 01-04 */
.rn-etapes { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 44px; }
@media (min-width: 620px) and (max-width: 899px) { .rn-etapes { grid-template-columns: 1fr 1fr; column-gap: 44px; } }
@media (min-width: 900px) { .rn-etapes { grid-template-columns: repeat(4, 1fr); column-gap: 40px; } }
.rn-etape { padding: 26px 0; border-top: 1px solid var(--line); }
.rn-etape .rn-num { display: block; font-size: 11px; letter-spacing: .22em; color: var(--muted); margin-bottom: 12px; }
.rn-etape h3 { font-family: "Playfair Display", Georgia, serif; font-weight: 400; font-size: 1.2rem; color: var(--ink); margin: 0 0 10px; }
.rn-etape p { font-size: 14px; line-height: 1.7; color: var(--muted); margin: 0; }

/* boutons du CTA final */
.rn-cta-btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 34px; }
body .rn-cta-btns a { display: inline-block; }
body .rn-cta-btns .rn-cta-2 { color: #fff; border: 1px solid rgba(255,255,255,.4); padding: 14px 26px !important; border-radius: var(--rayon) !important; font-size: 12px !important; transition: background .25s ease, color .25s ease; }
body .rn-cta-btns .rn-cta-2:hover { background: #fff; color: var(--ink); }

/* bouton secondaire sur fond clair */
body .mq-btn.mq-btn-contour { background: transparent; color: var(--ink); border: 1px solid var(--line); }
body .mq-btn.mq-btn-contour:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* carte savoir-faire fusionnee : deux photos, une destination */
@media (min-width: 900px) { .mq-cartes .mq-carte-large { grid-column: span 2; } }
.mq-carte .mq-vis-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; aspect-ratio: 8 / 3; }
@media (max-width: 899px) { .mq-carte .mq-vis-duo { aspect-ratio: 8 / 3; } }
.mq-carte .mq-vis-duo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* variantes reutilisables : trio d etapes, duo a ratio naturel */
@media (min-width: 900px) { .rn-etapes.rn-3 { grid-template-columns: repeat(3, 1fr); column-gap: 56px; } }
@media (min-width: 620px) and (max-width: 899px) { .rn-etapes.rn-3 { grid-template-columns: 1fr 1fr; } }
.rn-duo.an-duo-nature figure img { aspect-ratio: auto 2 / 3 !important; height: auto; object-fit: contain; }
.an-zone-cta { margin-top: 20px; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: rgb(255 255 255 / .45); }

.rn-duo p.mq-sur { font-size: 11px; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 14px 0 0; max-width: none; }

/* accessibilite : lien d evitement */
.an-evitement { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--vert); color: #fff; padding: 12px 20px; font-size: 14px; text-decoration: none; border-radius: 0 0 var(--rayon) 0; }
.an-evitement:focus { left: 0; }

/* ==========================================================================
   SOCLE RESPONSIVE - telephones et tablettes
   Applique apres tout le reste : c'est la derniere couche.
   Objectifs : texte >= 16px sur mobile, cibles tactiles >= 44px,
   boutons 48-52px, formulaire sans zoom automatique iOS,
   aucun debordement horizontal de 320px a 1920px.
   ========================================================================== */

img, svg, video, iframe, table { max-width: 100%; }
html { -webkit-text-size-adjust: 100%; }

/* --------------------------------------------------------------------------
   1. TELEPHONES  (<= 767 px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px){

  /* --- lisibilite : la prose passe a 16px, jamais moins --- */
  body > section p,
  .mq-entete p, .mq-duo p, .mn-savoir p, .rn-duo p,
  .rn-travail p, .an-repli > p, #portfolio .re-entete p,
  .rn-bande-txt p, #an-recits p {
    font-size: 16px;
    line-height: 1.7;
  }

  /* --- legendes et textes de carte : 15px minimum --- */
  .mq-carte p, .mn-etape p, .rn-etape p, .an-projet p {
    font-size: 15px;
    line-height: 1.6;
  }

  /* --- surtitres et micro-labels : 12px minimum --- */
  .mq-sur, .rn-duo p.mq-sur { font-size: 12px; letter-spacing: .16em; }
  #portfolio .an-projet .an-cat, .an-projet .an-cat { font-size: 11.5px; letter-spacing: .14em; }

  /* --- boutons : 14px, hauteur 48px minimum --- */
  body a.bg-accent, body a.border-accent,
  body .mq-btn, body .an-plus-btn, body form button[type="submit"],
  body .mq-btn-contour,
  body a.uppercase.rounded-full, body button.uppercase.rounded-full,
  body a.bg-accent.uppercase, body a.border-accent.uppercase {
    font-size: 14px !important;
    line-height: 1.25 !important;
    padding: 16px 26px !important;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  body .an-plus-btn { display: flex; width: -moz-fit-content; width: fit-content; }

  /* --- marges laterales resserrees sur les tres petits ecrans --- */
  @media (max-width: 374px){
    body > section.px-6, body > footer.px-6 { padding-left: 18px !important; padding-right: 18px !important; }
  }
}

/* --------------------------------------------------------------------------
   2. CIBLES TACTILES  (partout ou l'on navigue au doigt : <= 1023 px)
   -------------------------------------------------------------------------- */
@media (max-width: 1023px){

  /* --- en-tete : telephone, WhatsApp, menu --- */
  body .an-actions { gap: 2px; }
  body .an-tel { min-width: 44px; min-height: 44px; justify-content: center; padding: 0 4px; }
  body .an-tel svg { width: 21px; height: 21px; }
  body .an-wa { width: 44px; height: 44px; }
  body .an-wa svg { width: 24px; height: 24px; }
  body #mobile-menu-btn { width: 44px; height: 44px; }

  /* --- menu deroulant : une ligne = une cible confortable --- */
  body #mobile-menu a { min-height: 46px; display: flex; align-items: center; }

  /* --- pied de page : liens de colonne --- */
  body footer ul > li > a { display: block; padding: 13px 0; line-height: 1.25; }
  body footer ul > li + li { margin-top: 0 !important; }
  body footer a[aria-label="Instagram"], body footer a[aria-label="WhatsApp"] { width: 44px; height: 44px; }
  body footer a[aria-label="Instagram"] svg, body footer a[aria-label="WhatsApp"] svg { width: 17px; height: 17px; }

  /* --- filtres des realisations --- */
  body #portfolio .an-filtre { font-size: 14px; min-height: 44px; padding: 10px 18px; }

  /* --- visionneuse : fleches et fermeture au doigt --- */
  body .rn-lb button { min-width: 48px; min-height: 48px; }
}

/* --------------------------------------------------------------------------
   3. FORMULAIRE DE DEVIS  (<= 1023 px)
   16px sur les champs : en dessous, iOS zoome automatiquement a la saisie.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px){
  #devis-form input[type="text"], #devis-form input[type="tel"],
  #devis-form input[type="email"], #devis-form select, #devis-form textarea,
  form input[type="text"], form input[type="email"], form input[type="tel"],
  form input[type="search"], form select, form textarea {
    font-size: 16px;
    padding: 14px 15px;
    min-height: 50px;
  }
  #devis-form textarea, form textarea { min-height: 140px; }
  #devis-form select { height: 50px; }
  #devis-form label:not(.flex) { font-size: 12px; letter-spacing: .11em; margin-bottom: 8px; }
  #devis-form label.flex { font-size: 13.5px; min-height: 44px; align-items: center; }
  #devis-form label.flex input[type="checkbox"] { width: 20px; height: 20px; margin-top: 0; }
  #devis-form #champ-photos::file-selector-button { font-size: 12px; padding: 12px 18px; }
  #devis-form button[type="submit"] { min-height: 52px; }
}

/* --------------------------------------------------------------------------
   4. TABLETTES  (768 -> 1023 px : iPad, iPad Air, Surface)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px){
  body > section.px-6, body > footer.px-6 { padding-left: 34px !important; padding-right: 34px !important; }
  body > section p { font-size: 15.5px; line-height: 1.72; }
}

/* --------------------------------------------------------------------------
   5. COMPLEMENT CIBLES TACTILES : logo, telephone, e-mail, WhatsApp
   -------------------------------------------------------------------------- */
@media (max-width: 1023px){
  body header .max-w-content > a:first-child { display: inline-flex; align-items: center; min-height: 44px; }

  body section a[href^="tel:"], body section a[href^="mailto:"], body section a[href*="wa.me"],
  body footer a[href^="tel:"], body footer a[href^="mailto:"], body footer p > a[href*="wa.me"] {
    display: inline-block;
    padding-top: 13px;
    padding-bottom: 13px;
    line-height: 1.3;
  }
}

/* --------------------------------------------------------------------------
   6. MICRO-TEXTES : plus rien sous 13,5 px dans le corps des pages
   -------------------------------------------------------------------------- */
@media (max-width: 767px){
  body .text-xs, body .mq-lien { font-size: 13.5px !important; }
  body #mobile-menu a.block.text-center { font-size: 14px !important; }
  body footer .text-xs.uppercase { font-size: 12px !important; }
}

/* --- l'appel a l'action de l'en-tete garde sa taille compacte --- */
@media (max-width: 1023px){
  body header a.an-cta-tete {
    font-size: 10px !important;
    padding: 10px 14px !important;
    min-height: 0;
    display: none;
  }
}

/* --- bas de page legal : liens confortables au doigt --- */
@media (max-width: 1023px){
  body footer a[href*="mentions-legales"], body footer a[href*="confidentialite"], body footer a[href*="cookies"] {
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

@media (min-width: 640px) and (max-width: 1023px){
  body header a.an-cta-tete { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   PHOTO VERTICALE dans un bloc texte + image en deux colonnes
   Sans limite, un portrait 2:3 occupe 780 px de haut face a 250 px de texte :
   la colonne de texte se perd. On plafonne la hauteur et on centre.
   -------------------------------------------------------------------------- */
@media (min-width: 768px){
  img.an-portrait {
    display: block;
    max-width: 350px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
}

/* --------------------------------------------------------------------------
   MOBILE : ne jamais coller deux photos pleine largeur
   Le hero se termine par sa photo ; si la section suivante commence aussi
   par une photo, les deux se lisent comme un seul bloc d'images.
   On fait donc passer le texte avant la photo dans ces blocs.
   -------------------------------------------------------------------------- */
@media (max-width: 899px){
  .mn-savoir .mn-txt { order: 1; }
  .mn-savoir figure { order: 2; }
  .mn-savoir img { min-height: 220px; }
}

/* --------------------------------------------------------------------------
   PAGE CONTACT - respiration sur mobile et etat de focus
   -------------------------------------------------------------------------- */
@media (max-width: 767px){
  body #devis { padding: 32px 20px 36px; }
  body #devis-form > * + * { margin-top: 26px !important; }
  body #devis-form > .grid { gap: 26px !important; }
  body #devis-form label:not(.flex) { font-size: 12px !important; margin-bottom: 9px; }
  body #devis-form label.flex { margin-top: 30px !important; }
  body #devis-form button[type="submit"] { margin-top: 32px !important; }
}