/* =========================================================
   DESIGN MENUISERIE — feuille de style commune
   Mobile first : les règles de base visent le téléphone,
   les @media (min-width) ajoutent la mise en page large.
   ========================================================= */

@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Couleurs du logo */
  --rouge: #ed1c24;          /* accents, grands éléments */
  --rouge-fonce: #b8121a;    /* boutons et liens : contraste AA sur blanc */
  --encre: #231f20;          /* texte principal, copeau du logo */
  --gris: #5f595a;           /* texte secondaire (contraste 6.8:1) */
  --ligne: #e4ded6;
  --papier: #ffffff;
  --lin: #f6f2ec;            /* fond chaud, évoque le bois clair */

  --police: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gouttiere: 1rem;
  --max: 75rem;
  --rayon: 2px;
  --entete: 4rem;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;               /* garde-fou : aucun défilement horizontal */
  scroll-padding-top: var(--entete);
}
body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--police);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--encre);
  background: var(--papier);
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--rouge-fonce); text-underline-offset: .2em; }
a:hover { color: var(--encre); }
:focus-visible { outline: 3px solid var(--rouge-fonce); outline-offset: 3px; }
h1, h2, h3 { line-height: 1.15; font-weight: 400; margin: 0 0 .6em; text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
h1 { font-size: clamp(2rem, 8vw, 3.75rem); font-weight: 300; letter-spacing: -.01em; }
h2 { font-size: clamp(1.6rem, 5.5vw, 2.5rem); font-weight: 300; }
h3 { font-size: 1.25rem; font-weight: 500; }
p { margin: 0 0 1em; }
ul { padding: 0; margin: 0; list-style: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.lien-evitement {
  position: absolute; left: var(--gouttiere); top: -4rem; z-index: 100;
  background: var(--encre); color: #fff; padding: .75rem 1rem;
}
.lien-evitement:focus { top: .5rem; }

.conteneur { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gouttiere); }
.section { padding-block: 4rem; }
.section--lin { background: var(--lin); }

/* Sur-titre en capitales espacées, comme « DESIGN » dans le logo */
.surtitre {
  display: inline-block;
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rouge-fonce);
  margin-bottom: 1rem;
}
@media (min-width: 48em) { .surtitre { font-size: 1.0625rem; } }
.chapeau { font-size: 1.125rem; color: var(--gris); max-width: 38rem; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .75rem 1.5rem;
  font: inherit; font-weight: 500; font-size: 1rem; letter-spacing: .04em;
  text-decoration: none; border: 1px solid var(--rouge-fonce); border-radius: var(--rayon);
  background: var(--rouge-fonce); color: #fff; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.bouton:hover { background: var(--encre); border-color: var(--encre); color: #fff; }
.bouton--contour { background: transparent; color: var(--encre); border-color: var(--encre); }
.bouton--contour:hover { background: var(--encre); color: #fff; }
.bouton--petit { min-height: 2.75rem; padding: .5rem 1rem; font-size: .9375rem; }
.groupe-boutons { display: flex; flex-wrap: wrap; gap: .75rem; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem;
  font-weight: 500; text-decoration: none; color: var(--encre);
  border-bottom: 1px solid currentColor;
}
.lien-fleche::after { content: "→"; transition: transform .2s; }
.lien-fleche:hover { color: var(--rouge-fonce); }
.lien-fleche:hover::after { transform: translateX(4px); }

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.entete.est-defile { border-bottom-color: var(--ligne); }
.entete__barre { display: flex; align-items: center; gap: .75rem; min-height: var(--entete); }
.entete__logo { display: block; margin-right: auto; padding-block: .5rem; }
.entete__logo img { width: 11rem; }
.entete__devis { white-space: nowrap; }
.texte-long { display: none; }
@media (min-width: 30em) { .texte-long { display: inline; } .texte-court { display: none; } }

.bouton-menu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none;
  color: var(--encre); cursor: pointer;
}
.bouton-menu__trait, .bouton-menu__trait::before, .bouton-menu__trait::after {
  display: block; width: 1.5rem; height: 2px; background: currentColor; position: relative;
  transition: transform .25s, background-color .25s;
}
.bouton-menu__trait::before, .bouton-menu__trait::after { content: ""; position: absolute; left: 0; }
.bouton-menu__trait::before { top: -7px; }
.bouton-menu__trait::after { top: 7px; }
.bouton-menu[aria-expanded="true"] .bouton-menu__trait { background: transparent; }
.bouton-menu[aria-expanded="true"] .bouton-menu__trait::before { transform: translateY(7px) rotate(45deg); }
.bouton-menu[aria-expanded="true"] .bouton-menu__trait::after { transform: translateY(-7px) rotate(-45deg); }

.navigation { display: none; }
.navigation.est-ouverte {
  display: block;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--papier); border-bottom: 1px solid var(--ligne);
  max-height: calc(100dvh - var(--entete)); overflow-y: auto;
}
.navigation__liste { padding: .5rem var(--gouttiere) 1.5rem; }
.navigation__liste a {
  display: flex; align-items: center; min-height: 3rem;
  font-size: 1.125rem; text-decoration: none; color: var(--encre);
  border-bottom: 1px solid var(--ligne);
}
.navigation__liste a[aria-current="page"] { color: var(--rouge-fonce); }

@media (min-width: 48em) {
  .entete__logo img { width: 14rem; }
  .bouton-menu { display: none; }
  .navigation, .navigation.est-ouverte {
    display: block; position: static; max-height: none; overflow: visible;
    border: 0; background: none;
  }
  .navigation__liste { display: flex; gap: 1.1rem; padding: 0; }
  .navigation__liste a {
    min-height: 2.75rem; font-size: .9375rem; border: 0; position: relative;
  }
  .navigation__liste a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: .55rem; height: 1px;
    background: var(--rouge); transform: scaleX(0); transform-origin: left; transition: transform .25s;
  }
  .navigation__liste a:hover::after, .navigation__liste a[aria-current="page"]::after { transform: scaleX(1); }
  .entete__devis { margin-left: 1rem; }
}

/* ---------- Fil d'Ariane (pages intérieures) ---------- */
.ariane { font-size: .875rem; color: var(--gris); padding-block: 1rem 0; }
.ariane ol { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.ariane li + li::before { content: "›"; margin-right: .25rem; }
.ariane a { color: var(--gris); }

/* ---------- Motif graphique : copeau + planches ---------- */
.motif { color: var(--encre); pointer-events: none; }
.motif path, .motif line { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }

/* ---------- Bandeau d'accueil ---------- */
.accueil-bandeau { position: relative; padding-block: 2.5rem 3rem; overflow: hidden; }
.accueil-bandeau__grille { display: grid; gap: 2rem; }
.accueil-bandeau__texte { position: relative; z-index: 1; }
.accueil-bandeau h1 em { font-style: normal; color: var(--rouge); }
.accueil-bandeau__image { position: relative; }
.accueil-bandeau__image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.accueil-bandeau .motif {           /* mobile : petit filet sous la photo */
  width: 11rem; margin: 1.5rem var(--gouttiere) 0 auto; opacity: .5;
}
.accueil-bandeau__legende { font-size: .875rem; color: var(--gris); margin-top: .5rem; }

@media (min-width: 48em) {
  .accueil-bandeau { padding-block: 4rem 5rem; }
  .accueil-bandeau__grille { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 3rem; }
  .accueil-bandeau .motif { position: absolute; z-index: 0; width: 26rem; margin: 0; left: 30%; bottom: 1rem; opacity: .14; }
}

/* Tracé animé du motif, seulement si le visiteur accepte le mouvement */
@media (prefers-reduced-motion: no-preference) {
  .motif--trace path, .motif--trace line {
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: trace 2.4s cubic-bezier(.6,0,.2,1) .3s forwards;
  }
  .motif--trace line { animation-delay: 1.6s; animation-duration: 1.2s; }
}
@keyframes trace { to { stroke-dashoffset: 0; } }

/* ---------- Entrées (3 blocs) ---------- */
.entrees { display: grid; gap: 1.5rem; margin-top: 2rem; }
.carte { position: relative; display: flex; flex-direction: column; background: var(--papier); }
.carte__image { overflow: hidden; }
.carte__image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.carte__corps { padding: 1.25rem 0 0; }
.carte__corps p { color: var(--gris); }
.carte__lien { color: var(--encre); text-decoration: none; }
.carte__lien::after { content: ""; position: absolute; inset: 0; }   /* toute la carte est cliquable */
.carte:hover img { transform: scale(1.04); }
.carte:hover .carte__lien, .carte__lien:focus-visible { color: var(--rouge-fonce); }
.carte:focus-within { outline: 3px solid var(--rouge-fonce); outline-offset: 4px; }
.carte__lien:focus-visible { outline: none; }
.carte__suite { font-weight: 500; font-size: .9375rem; letter-spacing: .04em; }
.carte__suite::after { content: " →"; }

@media (min-width: 48em) { .entrees { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }

/* ---------- Savoir-faire ---------- */
.savoir-faire { display: grid; gap: 2.5rem; }
.etapes { list-style: none; padding: 0; counter-reset: etape; display: grid; gap: 1.5rem; margin: 2rem 0; }
.etapes li { counter-increment: etape; padding-left: 3.25rem; position: relative; }
.etapes li::before {
  content: counter(etape, decimal-leading-zero);
  position: absolute; left: 0; top: .1rem;
  font-size: 1.25rem; font-weight: 300; color: var(--rouge);
}
.etapes h3 { margin-bottom: .25rem; }
.etapes p { color: var(--gris); margin: 0; }
.savoir-faire__photos { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; align-self: start; }
.savoir-faire__photos figure { margin: 0; }
.savoir-faire__photos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.savoir-faire__photos figure:nth-child(2) { margin-top: 2.5rem; }
.savoir-faire__photos figcaption { font-size: .8125rem; color: var(--gris); margin-top: .4rem; }

@media (min-width: 56em) {
  .savoir-faire { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
}

/* ---------- Bloc architectes ---------- */
.architectes {
  background: var(--encre); color: #fff; position: relative; overflow: hidden;
}
.architectes .surtitre { color: #ff8a8f; }                 /* contraste AA sur fond encre */
.architectes p { color: #e7e2e2; max-width: 40rem; }
.architectes__points { display: grid; gap: .75rem; margin: 1.5rem 0 2rem; }
.architectes__points li { padding-left: 1.5rem; position: relative; }
.architectes__points li::before {
  content: ""; position: absolute; left: 0; top: .75em; width: .75rem; height: 1px; background: var(--rouge);
}
.architectes .bouton { background: #fff; color: var(--encre); border-color: #fff; }
.architectes .bouton:hover { background: var(--rouge-fonce); color: #fff; border-color: var(--rouge-fonce); }
.architectes .lien-fleche { color: #fff; }
.architectes .motif { color: #fff; position: absolute; width: 22rem; right: -6rem; bottom: -2rem; opacity: .08; }

/* ---------- Dernières réalisations ---------- */
.entete-section { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.entete-section h2 { margin: 0; }
.galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.galerie figure { margin: 0; }
.galerie__image { overflow: hidden; }
.galerie img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.galerie figure:hover img { transform: scale(1.04); }
.galerie figcaption { font-size: .875rem; line-height: 1.4; margin-top: .5rem; }
.galerie time { display: block; color: var(--gris); font-size: .8125rem; }
@media (min-width: 48em) { .galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }

.instagram-lien { display: inline-flex; align-items: center; gap: .5rem; }
.instagram-lien svg { width: 1.25rem; height: 1.25rem; flex: none; }

/* ---------- Zone d'intervention ---------- */
.zone { display: grid; gap: 1.5rem; }
.zone__villes { display: flex; flex-wrap: wrap; gap: .5rem; }
.zone__villes li {
  border: 1px solid var(--ligne); background: var(--papier); padding: .4rem .9rem; font-size: .9375rem;
}
@media (min-width: 56em) { .zone { grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; } }

/* ---------- Appel à l'action final ---------- */
.appel { text-align: center; }
.appel .chapeau { margin-inline: auto; }
.appel .groupe-boutons { justify-content: center; margin-top: 1.5rem; }
.appel .motif { width: 9rem; margin: 0 auto 1.5rem; }

/* ---------- Pied de page ---------- */
.pied { background: var(--lin); padding-block: 3rem 2rem; font-size: .9375rem; }
.pied__grille { display: grid; gap: 2rem; }
.pied__logo img { width: 11rem; }
.pied h2 {
  font-size: .8125rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  margin-bottom: .75rem; color: var(--encre);
}
.pied address { font-style: normal; }
.pied a { color: var(--encre); }
.pied a:hover { color: var(--rouge-fonce); }
.pied li a { display: inline-flex; align-items: center; min-height: 2.25rem; }
.pied__bas {
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--ligne);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; color: var(--gris); font-size: .875rem;
}
.pied__bas a { color: var(--gris); }
@media (min-width: 48em) { .pied__grille { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* ---------- Apparition au défilement (activée par motion.js) ----------
   Le texte est toujours présent dans le HTML ; il n'est masqué que si
   le script d'animation s'est chargé et que le mouvement est accepté. */
.anime [data-apparition] { opacity: 0; transform: translateY(24px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .carte:hover img, .galerie figure:hover img { transform: none; }
}

.galerie__suite { margin-top: 2rem; }
.pied__accroche { margin-top: 1rem; }
.pied__adresse + .pied__adresse { margin-top: 1rem; }
.pied__adresse a { overflow-wrap: anywhere; }

/* =========================================================
   Pages intérieures
   ========================================================= */
.page-bandeau { padding-block: 1.5rem 3rem; }
.page-bandeau__grille { display: grid; gap: 2rem; margin-top: 1.5rem; }
.page-bandeau__image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 48em) {
  .page-bandeau { padding-bottom: 4rem; }
  .page-bandeau__grille { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 3rem; }
  .page-bandeau__image img { aspect-ratio: 5 / 6; }
}

/* Démarche en étapes (variante horizontale sur grand écran) */
.etapes--ligne { margin-top: 2.5rem; }
@media (min-width: 64em) {
  .etapes--ligne { grid-template-columns: repeat(5, 1fr); gap: 2rem; }
  .etapes--ligne li { padding-left: 0; padding-top: 2.5rem; border-top: 1px solid var(--ligne); }
  .etapes--ligne li::before { top: .75rem; }
}
.note {
  margin-top: 2rem; padding: 1.25rem 1.25rem 1.25rem 1.5rem;
  border-left: 3px solid var(--rouge); background: var(--papier);
}
.note p { margin: 0; }
.demarche { display: grid; gap: 2rem; }
.demarche figure { margin: 0; }
.demarche img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.demarche figcaption { font-size: .8125rem; color: var(--gris); margin-top: .4rem; }
@media (min-width: 56em) { .demarche { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } }

/* Matériaux */
.materiaux { display: grid; gap: 1px; background: var(--ligne); border: 1px solid var(--ligne); margin-top: 2rem; }
.materiaux li { background: var(--papier); padding: 1.5rem; }
.materiaux h3 { margin-bottom: .4rem; }
.materiaux p { color: var(--gris); margin: 0; }
@media (min-width: 40em) { .materiaux { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .materiaux { grid-template-columns: repeat(3, 1fr); } }
.materiaux__photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 1.5rem; }
.materiaux__photos figure { margin: 0; }
.materiaux__photos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.materiaux__photos figcaption { font-size: .8125rem; color: var(--gris); margin-top: .4rem; line-height: 1.35; }

/* Questions fréquentes */
.faq { max-width: 48rem; margin-top: 1.5rem; border-top: 1px solid var(--ligne); }
.faq details { border-bottom: 1px solid var(--ligne); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 3.5rem; padding-block: .75rem; cursor: pointer; list-style: none;
  font-size: 1.125rem; font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; font-weight: 300; color: var(--rouge); flex: none; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding-bottom: 1.25rem; color: var(--gris); }
.faq details > div p:last-child { margin: 0; }

/* Liste à tirets rouges (équipements, arguments) */
.liste-traits { display: grid; gap: .75rem; margin: 1.5rem 0; }
.liste-traits li { padding-left: 1.5rem; position: relative; }
.liste-traits li::before {
  content: ""; position: absolute; left: 0; top: .8em; width: .75rem; height: 1px; background: var(--rouge);
}
.liste-traits strong { font-weight: 500; }
.deux-colonnes { display: grid; gap: 2rem; }
@media (min-width: 56em) { .deux-colonnes { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } }
@media (min-width: 64em) { .materiaux--4 { grid-template-columns: repeat(4, 1fr); } }

/* =========================================================
   Page Réalisations : filtres, galerie, agrandissement
   ========================================================= */
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 2rem; }
.filtre {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .4rem 1rem;
  font: inherit; font-size: .9375rem; color: var(--encre); background: var(--papier);
  border: 1px solid var(--ligne); border-radius: 999px; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.filtre span { font-size: .8125rem; color: var(--gris); }
.filtre:hover { border-color: var(--encre); }
.filtre[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: #fff; }
.filtre[aria-pressed="true"] span { color: #d9d4d4; }

@media (min-width: 64em) { .galerie--complete { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.galerie li[hidden] { display: none; }
.galerie__lien { display: block; cursor: zoom-in; }
.galerie__lien:focus-visible { outline-offset: 2px; }
.galerie__cat { display: block; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rouge-fonce); margin-top: .15rem; }

.agrandissement {
  width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(20, 18, 18, .96); color: #fff;
}
.agrandissement[open] { display: grid; grid-template-rows: auto 1fr auto; }
.agrandissement::backdrop { background: rgba(20, 18, 18, .96); }
.agrandissement__barre { display: flex; justify-content: space-between; align-items: center; padding: .5rem var(--gouttiere); }
.agrandissement__compte { font-size: .875rem; color: #d9d4d4; }
.agrandissement__scene { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 var(--gouttiere); }
.agrandissement__scene img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.agrandissement__legende { margin: 0; padding: .75rem var(--gouttiere) 1.25rem; text-align: center; font-size: .9375rem; }
.agrandissement button {
  display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem;
  border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(0,0,0,.35); color: #fff;
  font: inherit; font-size: 1.25rem; cursor: pointer;
}
.agrandissement button:hover { background: #fff; color: var(--encre); }
.agrandissement button:focus-visible { outline-color: #fff; }
.agrandissement__prec, .agrandissement__suiv { position: absolute; top: 50%; transform: translateY(-50%); }
.agrandissement__prec { left: .5rem; }
.agrandissement__suiv { right: .5rem; }

.bandeau-instagram { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 56em) { .bandeau-instagram { grid-template-columns: 1fr auto; } }
.section--intro { padding-top: 0; }
.page-intro { margin-top: 1.5rem; }
/* Filtre : liste déroulante sur mobile, boutons sur grand écran */
.filtre-mobile { display: grid; gap: .4rem; margin: 1.5rem 0 1.75rem; }
.filtre-mobile label { font-size: .875rem; font-weight: 500; }
.filtre-mobile select {
  min-height: 3rem; padding: .5rem 2.5rem .5rem .9rem; font: inherit; color: var(--encre);
  background: var(--papier) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23231f20' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right .9rem center / .75rem;
  border: 1px solid var(--encre); border-radius: var(--rayon); appearance: none;
}
.filtres { display: none; }
@media (min-width: 48em) { .filtre-mobile { display: none; } .filtres { display: flex; } }

/* Vidéo en boucle (atelier, dressing) */
.video { position: relative; margin: 0; }
.video video { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--lin); }
.video figcaption { font-size: .8125rem; color: var(--gris); margin-top: .4rem; }
.video__bouton {
  position: absolute; right: .75rem; bottom: 2.25rem; display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: rgba(35,31,32,.75); color: #fff; cursor: pointer;
}
.video__bouton:hover { background: var(--rouge-fonce); }
.video__bouton svg { width: 1rem; height: 1rem; fill: currentColor; }
.section--encre { background: var(--encre); color: #fff; }
.section--encre .surtitre { color: #ff8a8f; }
.section--encre .chapeau, .section--encre p { color: #e7e2e2; }
.section--encre .video figcaption { color: #cfc9c9; }
.galerie--atelier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48em) { .galerie--atelier { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.galerie--atelier { margin-top: 2rem; }
.demarche-figure { margin: 0; }
.demarche-figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.demarche-figure figcaption { font-size: .8125rem; color: var(--gris); margin-top: .4rem; }
.page-bandeau__image--libre img, .page-bandeau .page-bandeau__image--libre img { aspect-ratio: auto; }

/* =========================================================
   Page Actualités
   ========================================================= */
.actus { display: grid; gap: 2.5rem; margin-top: 2rem; }
@media (min-width: 40em) { .actus { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.5rem; } }
@media (min-width: 64em) { .actus { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.actu article { display: flex; flex-direction: column; height: 100%; }
.actu__image { overflow: hidden; margin-bottom: 1rem; }
.actu__image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.actu:hover .actu__image img { transform: scale(1.04); }
.actu time { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rouge-fonce); }
.actu h3 { margin: .35rem 0 .5rem; }
.actu p { color: var(--gris); }
.actu .lien-fleche { margin-top: auto; align-self: flex-start; }

.questions { display: grid; gap: 1.5rem; margin-top: 2rem; max-width: 52rem; }
.question { background: var(--papier); padding: 1.5rem; border-left: 3px solid var(--rouge); }
.question h3 { font-size: 1.25rem; text-wrap: pretty; }
@media (max-width: 30em) { .question { padding: 1.25rem 1rem; } }
.question p { color: var(--gris); }
.sommaire-questions { display: grid; gap: .25rem; margin-top: 1rem; }
.sommaire-questions a { display: inline-flex; min-height: 2.75rem; align-items: center; color: var(--encre); }
@media (prefers-reduced-motion: reduce) { .actu:hover .actu__image img { transform: none; } }

/* =========================================================
   Page Contact : formulaire
   ========================================================= */
.contact { display: grid; gap: 3rem; }
@media (min-width: 64em) { .contact { grid-template-columns: 1.4fr 1fr; gap: 4rem; align-items: start; } }

.formulaire { display: grid; gap: 1.25rem; }
.formulaire fieldset { border: 0; padding: 0; margin: 0; }
.formulaire legend, .champ label { display: block; font-weight: 500; margin-bottom: .4rem; }
.champ .aide { display: block; font-size: .875rem; color: var(--gris); margin: -.2rem 0 .4rem; }
.obligatoire { color: var(--rouge-fonce); }
.champ input[type="text"], .champ input[type="email"], .champ input[type="tel"], .champ select, .champ textarea {
  width: 100%; min-height: 3rem; padding: .7rem .9rem; font: inherit; color: var(--encre);
  background: var(--papier); border: 1px solid #8a8384; border-radius: var(--rayon);
  transition: border-color .2s, box-shadow .2s;
}
.champ select {
  appearance: none; padding-right: 2.5rem;
  background: var(--papier) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23231f20' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right .9rem center / .75rem;
}
.champ textarea { min-height: 9rem; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--encre); box-shadow: 0 0 0 3px rgba(184,18,26,.25); }
.champ input[type="file"] { width: 100%; font: inherit; font-size: .9375rem; padding: .6rem 0; }
.champ input[type="file"]::file-selector-button {
  font: inherit; margin-right: .75rem; padding: .55rem 1rem; min-height: 2.75rem; cursor: pointer;
  border: 1px solid var(--encre); border-radius: var(--rayon); background: var(--papier); color: var(--encre);
}
.champ--erreur input, .champ--erreur select, .champ--erreur textarea { border-color: var(--rouge-fonce); }
.champ__erreur { display: block; color: var(--rouge-fonce); font-size: .875rem; margin-top: .35rem; }
.champ__erreur:empty { display: none; }
.deux-champs { display: grid; gap: 1.25rem; }
@media (min-width: 40em) { .deux-champs { grid-template-columns: 1fr 1fr; } }

.choix { display: flex; flex-wrap: wrap; gap: .5rem; }
.choix label {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .4rem .9rem;
  border: 1px solid var(--ligne); border-radius: 999px; background: var(--papier); cursor: pointer; font-weight: 400;
}
.choix input { accent-color: var(--rouge-fonce); width: 1.1rem; height: 1.1rem; }
.choix label:has(input:checked) { border-color: var(--encre); }
.choix label:has(input:focus-visible) { outline: 3px solid var(--rouge-fonce); outline-offset: 2px; }

.piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mention-rgpd { font-size: .875rem; color: var(--gris); }
.formulaire .bouton { justify-self: start; }
.formulaire .bouton[aria-busy="true"] { opacity: .7; cursor: progress; }

.message-envoi { padding: 1.25rem 1.5rem; border-left: 3px solid var(--rouge); background: var(--lin); }
.message-envoi h2 { font-size: 1.375rem; margin-bottom: .4rem; }
.message-envoi p { margin: 0; }
.message-envoi--erreur { border-left-color: var(--rouge-fonce); }
.message-envoi[hidden] { display: none; }
/* Sans JavaScript : le serveur renvoie vers #merci ou #erreur-envoi */
.message-ancre { display: none; }
.message-ancre:target { display: block; margin-bottom: 1.5rem; }
.coche { display: inline-block; width: 1.75rem; height: 1.75rem; vertical-align: -.4rem; margin-right: .4rem; }
.coche path { fill: none; stroke: var(--rouge-fonce); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) { .coche path { stroke-dashoffset: 30; animation: trace .6s ease-out .15s forwards; } }

.coordonnees { display: grid; gap: 1.5rem; }
.coordonnees address { font-style: normal; }
.coordonnees h2 { font-size: 1.25rem; font-weight: 500; margin-bottom: .4rem; }
.coordonnees a { color: var(--encre); }
.carte { margin: 1rem 0 0; }
.carte iframe { display: block; width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--ligne); }
.carte figcaption { font-size: .8125rem; color: var(--gris); margin-top: .4rem; }

/* Pages légales */
.texte-legal { max-width: 48rem; }
.texte-legal h2 { font-size: 1.5rem; font-weight: 400; margin-top: 2.5rem; }
.texte-legal h3 { font-size: 1.0625rem; margin: 1.5rem 0 .4rem; }
.texte-legal p, .texte-legal li { color: #3d3839; }
.texte-legal ul { list-style: disc; padding-left: 1.25rem; margin: 0 0 1em; }
.texte-legal li + li { margin-top: .3rem; }
.texte-legal dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0 0 1em; }
.texte-legal dt { font-weight: 500; }
.texte-legal dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 30em) { .texte-legal dl { grid-template-columns: 1fr; } .texte-legal dd { margin-bottom: .5rem; } }
.mise-a-jour { font-size: .875rem; color: var(--gris); }

/* Titre principal plus compact (page L'atelier) */
.titre--compact { font-size: clamp(1.875rem, 6.5vw, 3rem); }

/* Bandeau sombre (page L'atelier : vidéo du centre d'usinage) */
.page-bandeau--sombre { background: var(--encre); color: #fff; padding-bottom: 3.5rem; }
.page-bandeau--sombre .ariane, .page-bandeau--sombre .ariane a { color: #cfc9c9; }
.page-bandeau--sombre .surtitre { color: #ff8a8f; }
.page-bandeau--sombre .chapeau, .page-bandeau--sombre .liste-traits li { color: #e7e2e2; }
.page-bandeau--sombre .liste-traits strong { color: #fff; }
.page-bandeau--sombre .bouton--contour { color: #fff; border-color: #fff; }
.page-bandeau--sombre .bouton--contour:hover { background: #fff; color: var(--encre); }
.page-bandeau--sombre .bouton:not(.bouton--contour):hover { background: #fff; border-color: #fff; color: var(--encre); }
.page-bandeau--sombre .video figcaption { color: #cfc9c9; }
.page-bandeau--sombre :focus-visible { outline-color: #fff; }

/* Message d'information : aucun cookie (affiché une fois, non bloquant) */
.info-cookies {
  position: fixed; z-index: 60; left: var(--gouttiere); bottom: var(--gouttiere);
  display: flex; align-items: center; gap: .75rem;
  max-width: min(22rem, calc(100% - 2 * var(--gouttiere))); padding: .6rem .75rem .6rem .9rem;
  background: var(--papier); color: var(--encre); border: 1px solid var(--ligne); border-left: 3px solid var(--rouge);
  box-shadow: 0 6px 18px rgba(35, 31, 32, .12); font-size: .8125rem; line-height: 1.45;
}
.info-cookies .bouton { min-height: 2.5rem; padding: .35rem .8rem; font-size: .8125rem; flex: none; }
.info-cookies[hidden] { display: none; }
.info-cookies p { margin: 0; }
.info-cookies a { color: var(--rouge-fonce); }
@media (prefers-reduced-motion: no-preference) {
  .info-cookies:not([hidden]) { animation: apparition-info .4s ease-out; }
}
@keyframes apparition-info { from { opacity: 0; transform: translateY(12px); } }

/* Menu en texte dès la tablette : libellés jamais coupés.
   De 48 à 80em, les rubriques passent sur une 2e ligne sous le logo ; au-delà, tout tient sur une ligne. */
@media (min-width: 48em) {
  .navigation__liste a { white-space: nowrap; }
}
@media (min-width: 48em) and (max-width: 79.99em) {
  html { scroll-padding-top: 7rem; }
  .entete__barre { flex-wrap: wrap; }
  .entete__logo img { width: 12rem; }
  .navigation, .navigation.est-ouverte { order: 3; width: 100%; border-top: 1px solid var(--ligne); }
  .navigation__liste { flex-wrap: wrap; justify-content: center; gap: 0 1.4rem; }
  .navigation__liste a { font-size: .9375rem; }
}

/* Accroche de l'accueil : rouge du logo, même taille que le titre principal.
   (Rouge #ed1c24 autorisé ici : en grand texte, le contraste dépasse le seuil AA de 3:1.) */
.surtitre--accroche {
  display: block;
  font-size: clamp(1.25rem, 9.6cqi, 3.75rem);   /* taille calée pour « Menuiserie sur mesure » sur une ligne */
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rouge);
  margin-bottom: .5rem;
}
.accueil-bandeau__texte { container-type: inline-size; }
.accroche__ligne { display: block; white-space: nowrap; }
.demarche .demarche__rendu img { aspect-ratio: auto; }   /* rendu 3D montré en entier, sans recadrage */

/* Vidéos de visite (format paysage) */
.videos-visite { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
@media (min-width: 56em) { .videos-visite { grid-template-columns: 1fr 1fr; } }
.video--paysage video { aspect-ratio: 16 / 9; }
.video video { height: auto; }   /* la hauteur suit le format (4:5 ou 16:9), pas l attribut height */

/* Dressings : photos de réalisations glissées dans la grille des configurations.
   Sur téléphone, elles suivent la 1re carte ; sur grand écran, elles occupent une rangée sous les cartes. */
.entrees__photos .galerie--atelier { margin-top: 0; }
@media (min-width: 48em) { .entrees__photos { grid-column: 1 / -1; order: 1; } }