/* ==========================================================================
   DOMIVARO : système de design v3
   Registre : brand (le design EST le produit).
   Voie esthétique nommée : rythme de page produit Apple appliqué à une marque
   de lieu. Photographie pleine largeur, une idée par pli, contraste extrême
   entre le titre et la légende, aucune carte, aucun kicker, sections gorgées
   de bleu entre les plis photographiques.
   Famille unique : Archivo variable (axes wdth + wght).
   ========================================================================== */

/* --------------------------------------------------------------- 1. jetons */
:root{
  /* Bleu identitaire de Domivaro, conservé. Stratégie : Committed. */
  --azul-950: oklch(0.220 0.075 249);
  --azul-900: oklch(0.280 0.095 248);
  --azul-800: oklch(0.360 0.115 248);
  --azul-700: oklch(0.450 0.135 250);
  --azul-300: oklch(0.780 0.070 245);

  /* Fond clair : blanc cassé dont la chroma penche vers le bleu de la marque,
     jamais vers le chaud. Pas de crème, pas de sable, pas de papier. */
  --clair:    oklch(0.978 0.004 245);
  --clair-2:  oklch(0.950 0.006 245);

  /* Terre cuite : accent unique, tuiles et façades de la Marina Alta. */
  --teja-700: oklch(0.480 0.115 40);
  --teja-600: oklch(0.550 0.125 42);
  --teja-500: oklch(0.630 0.135 45);

  --ink:   oklch(0.215 0.030 250);
  --ink-2: oklch(0.398 0.028 250);
  --ink-3: oklch(0.515 0.022 250);

  --sur-1: color-mix(in oklch, var(--azul-900) 5%, transparent);
  --ligne: color-mix(in oklch, var(--azul-900) 13%, transparent);
  --ligne-f: color-mix(in oklch, var(--azul-900) 22%, transparent);

  --font: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Échelle modulaire, ratio 1,26. Plafond display 5,5rem, sous les 6rem. */
  --t-display: clamp(2.4rem, 1.02rem + 5.75vw, 5.05rem);
  --t-h2:      clamp(1.95rem, 1.05rem + 3.5vw, 3.45rem);
  --t-h3:      clamp(1.32rem, 1.02rem + 1.15vw, 1.72rem);
  --t-lede:    clamp(1.12rem, 0.97rem + 0.62vw, 1.42rem);
  --t-body:    clamp(1rem, 0.955rem + 0.19vw, 1.115rem);
  --t-fine:    0.905rem;
  --t-micro:   0.775rem;

  --sp-pli:  clamp(5.5rem, 3.2rem + 9.5vw, 10.5rem);
  --sp-l:    clamp(2.6rem, 1.8rem + 3.2vw, 4.4rem);
  --sp-m:    clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);

  --shell: 1220px;
  --etroit: 760px;

  --e-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --e-expo:  cubic-bezier(0.16, 1, 0.3, 1);

  /* Échelle z sémantique. */
  --z-fond: 0;
  --z-contenu: 10;
  --z-collant: 100;
  --z-nav: 200;
  --z-voile: 300;
  --z-menu: 310;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--clair);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--t-body);
  font-weight:400;
  font-variation-settings:'wdth' 100;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{max-width:100%; display:block}
a{color:inherit}

/* ------------------------------------------------------- 2. typographie */
h1,h2,h3{
  margin:0;
  font-weight:700;
  font-variation-settings:'wdth' 112;   /* axe de largeur : le contraste vient de là */
  letter-spacing:-0.025em;              /* plancher du skill : -0.04em */
  line-height:1.03;
  text-wrap:balance;
}
h1{font-size:var(--t-display)}
h2{font-size:var(--t-h2); line-height:1.06}
h3{
  font-size:var(--t-h3); font-weight:650;
  font-variation-settings:'wdth' 106;
  letter-spacing:-0.015em; line-height:1.22;
}
p{margin:0 0 1.15em; text-wrap:pretty; max-width:68ch}
p:last-child{margin-bottom:0}

.lede{
  font-size:var(--t-lede);
  line-height:1.5;
  color:var(--ink-2);
  font-weight:400;
  max-width:60ch;
}
.fine{font-size:var(--t-fine); color:var(--ink-3); line-height:1.58}
.legende{
  font-size:var(--t-micro);
  font-weight:550;
  font-variation-settings:'wdth' 96;
  letter-spacing:0.045em;
  color:var(--ink-3);
  text-transform:uppercase;
}
.accent{color:var(--teja-600)}
.chiffre{font-variant-numeric:tabular-nums lining-nums; font-feature-settings:'tnum' 1}

/* --------------------------------------------------------- 3. structure */
.shell{width:min(100% - 2.6rem, var(--shell)); margin-inline:auto}
.etroit{max-width:var(--etroit)}
.pli{padding-block:var(--sp-pli)}
.pli-court{padding-block:var(--sp-l)}

/* Plis gorgés de bleu : la couleur porte la marque, sans neutres autour. */
.drench{background:var(--azul-900); color:#fff}
.drench h1,.drench h2,.drench h3{color:#fff}
.drench p{color:color-mix(in oklch, #fff 82%, var(--azul-300))}
.drench .lede{color:color-mix(in oklch, #fff 86%, var(--azul-300)); line-height:1.56}
.drench .fine{color:color-mix(in oklch, #fff 70%, var(--azul-300))}
.drench .legende{color:var(--azul-300)}
.drench .accent{color:oklch(0.760 0.115 48)}
.drench-noir{background:var(--azul-950); color:#fff}

/* ------------------------------------------------ 4. navigation */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:var(--z-nav);
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:0.95rem clamp(1.3rem, 4vw, 2.6rem);
  color:#fff;
  transition:background .45s var(--e-quart), backdrop-filter .45s var(--e-quart),
             color .45s var(--e-quart), box-shadow .45s var(--e-quart);
}
.nav[data-pose="pose"]{
  background:color-mix(in oklch, var(--clair) 88%, transparent);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  color:var(--ink);
  box-shadow:0 1px 0 var(--ligne);
}
.marque{display:flex; align-items:center; gap:0.62rem; text-decoration:none; color:inherit}
.marque svg{width:29px; height:29px; flex:none}
.marque b{
  font-size:1.245rem; font-weight:700;
  font-variation-settings:'wdth' 108;
  letter-spacing:-0.018em;
}
.nav-liens{display:flex; align-items:center; gap:1.7rem}
.nav-liens a{
  text-decoration:none; font-size:0.925rem; font-weight:500;
  opacity:.86; transition:opacity .2s var(--e-quart);
}
.nav-liens a:hover{opacity:1}

.langue{display:flex; gap:0.1rem; align-items:center; font-size:0.8rem; font-weight:600}
.langue a{
  text-decoration:none; padding:0.24rem 0.44rem; border-radius:5px;
  opacity:.6; transition:opacity .2s var(--e-quart), background .2s var(--e-quart);
}
.langue a:hover{opacity:1; background:color-mix(in oklch, currentColor 12%, transparent)}
.langue a[aria-current="true"]{opacity:1; background:color-mix(in oklch, currentColor 15%, transparent)}

.nav:not([data-pose="pose"]) .btn-plein{
  background:transparent; box-shadow:inset 0 0 0 1.5px color-mix(in oklch, #fff 46%, transparent);
}
.nav:not([data-pose="pose"]) .btn-plein:hover{background:color-mix(in oklch, #fff 14%, transparent)}
.burger{display:none; background:none; border:0; color:inherit; padding:.4rem; cursor:pointer}
.burger svg{width:24px; height:24px; display:block}

/* ------------------------------------------------------- 5. le pli hero */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:flex-end;
  padding-block:clamp(6rem, 14vh, 9rem) clamp(3rem, 8vh, 5.4rem);
  color:#fff; overflow:hidden; isolation:isolate;
}
.hero-img{
  position:absolute; inset:0; z-index:var(--z-fond);
  width:100%; height:100%; object-fit:cover; object-position:center 38%;
}
.hero::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to top,
      color-mix(in oklch, var(--azul-950) 90%, transparent) 0%,
      color-mix(in oklch, var(--azul-950) 84%, transparent) 22%,
      color-mix(in oklch, var(--azul-950) 73%, transparent) 42%,
      color-mix(in oklch, var(--azul-950) 52%, transparent) 62%,
      color-mix(in oklch, var(--azul-950) 20%, transparent) 84%,
      color-mix(in oklch, var(--azul-950) 42%, transparent) 100%);
}
.hero > .shell{position:relative; z-index:var(--z-contenu)}
.hero h1{
  max-width:none; text-wrap:initial;
  text-shadow:0 2px 30px color-mix(in oklch, var(--azul-950) 62%, transparent);
}
/* Terre cuite plus claire sur le hero : elle se pose sur de la photo, pas sur du blanc. */
.hero .accent{color:oklch(0.700 0.140 47)}
.hero .lede{
  color:color-mix(in oklch, #fff 90%, var(--azul-300));
  margin-top:1.5rem; max-width:54ch;
  text-shadow:0 1px 18px color-mix(in oklch, var(--azul-950) 45%, transparent);
}
.hero-actions{display:flex; flex-wrap:wrap; gap:0.85rem; margin-top:2.15rem; align-items:center}
.hero-pied{
  display:flex; flex-wrap:wrap; gap:0.5rem 1.6rem;
  margin-top:2.6rem; padding-top:1.35rem;
  border-top:1px solid color-mix(in oklch, #fff 26%, transparent);
  font-size:var(--t-micro); font-weight:550; letter-spacing:0.04em;
  text-transform:uppercase; color:color-mix(in oklch, #fff 80%, var(--azul-300));
}

/* --------------------------------------------- 6. plis photographiques */
.pli-photo{
  position:relative; min-height:clamp(420px, 74vh, 680px);
  display:flex; align-items:center;
  overflow:hidden; isolation:isolate; color:#fff;
}
.pli-photo img{
  position:absolute; inset:0; z-index:var(--z-fond);
  width:100%; height:100%; object-fit:cover;
}
.pli-photo::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(105deg,
    color-mix(in oklch, var(--azul-950) 88%, transparent) 0%,
    color-mix(in oklch, var(--azul-950) 62%, transparent) 42%,
    color-mix(in oklch, var(--azul-950) 12%, transparent) 88%);
}
.pli-photo > .shell{position:relative; z-index:var(--z-contenu)}
.pli-photo h2{max-width:15ch}
.pli-photo p{
  color:color-mix(in oklch, #fff 88%, var(--azul-300));
  max-width:46ch; margin-top:1.2rem; font-size:var(--t-lede); line-height:1.5;
}
.credit{
  position:absolute; right:0.85rem; bottom:0.7rem; z-index:var(--z-contenu);
  font-size:0.66rem; letter-spacing:0.03em;
  color:color-mix(in oklch, #fff 52%, transparent);
}

/* --------------------------------------------------------- 7. boutons */
.btn{
  display:inline-flex; align-items:center; gap:0.55rem;
  padding:0.92rem 1.65rem; border-radius:9px;
  font-size:1.005rem; font-weight:600; font-variation-settings:'wdth' 102;
  letter-spacing:-0.005em; text-decoration:none; border:0; cursor:pointer;
  transition:transform .35s var(--e-expo), background .25s var(--e-quart),
             box-shadow .35s var(--e-expo);
}
.btn-plein{background:var(--teja-600); color:#fff; box-shadow:0 2px 8px color-mix(in oklch, var(--teja-700) 34%, transparent)}
.btn-plein:hover{background:var(--teja-500); transform:translateY(-2px); box-shadow:0 6px 16px color-mix(in oklch, var(--teja-700) 38%, transparent)}
.btn-clair{background:#fff; color:var(--azul-900)}
.btn-clair:hover{transform:translateY(-2px); background:var(--clair)}
.btn-fant{background:transparent; color:inherit; box-shadow:inset 0 0 0 1.5px color-mix(in oklch, currentColor 42%, transparent)}
.btn-fant:hover{background:color-mix(in oklch, currentColor 11%, transparent); transform:translateY(-2px)}
.btn:focus-visible{outline:2.5px solid var(--teja-500); outline-offset:3px}
@media (prefers-reduced-motion: reduce){.btn:hover{transform:none}}

.lien-fleche{
  display:inline-flex; align-items:center; gap:0.42rem;
  text-decoration:none; font-weight:600; color:var(--teja-700);
  border-bottom:1.5px solid color-mix(in oklch, var(--teja-600) 34%, transparent);
  padding-bottom:1px; transition:border-color .25s var(--e-quart), gap .3s var(--e-expo);
}
.lien-fleche:hover{border-color:var(--teja-600); gap:0.66rem}
.drench .lien-fleche{color:oklch(0.780 0.110 50); border-bottom-color:color-mix(in oklch, oklch(0.780 0.110 50) 40%, transparent)}

/* ------------------------------------------------- 8. en-tête de pli */
.tete{max-width:22ch}
.tete + .lede{margin-top:1.35rem}

/* --------------------------------------------------- 9. les situations */
.situ{
  display:grid; gap:0; margin-top:var(--sp-l);
  border-top:1px solid color-mix(in oklch, currentColor 20%, transparent);
}
.situ > div{
  padding:1.5rem 0;
  border-bottom:1px solid color-mix(in oklch, currentColor 20%, transparent);
  display:grid; grid-template-columns:2.3rem 1fr; gap:0 1.15rem; align-items:start;
}
.situ .q{
  font-size:0.78rem; font-weight:700; letter-spacing:0.06em;
  color:color-mix(in oklch, currentColor 55%, transparent); padding-top:0.42rem;
}
.situ p{margin:0; font-size:var(--t-h3); font-weight:450; line-height:1.34; letter-spacing:-0.012em; max-width:34ch}

/* ------------------------------------------- 10. le déroulé en 3 temps */
.flow{display:grid; gap:var(--sp-l); margin-top:var(--sp-l); grid-template-columns:1fr}
@media (min-width:880px){.flow{grid-template-columns:repeat(3, 1fr); gap:clamp(2rem,4vw,3.4rem)}}
.flow > div{position:relative; padding-top:1.5rem; border-top:2.5px solid var(--teja-600)}
.flow .n{
  font-size:0.755rem; font-weight:700; letter-spacing:0.07em;
  color:var(--teja-700); display:block; margin-bottom:0.7rem;
}
.drench .flow > div{border-top-color:oklch(0.760 0.115 48)}
.drench .flow .n{color:oklch(0.780 0.110 50)}
.flow h3{margin-bottom:0.6rem}
.flow p{font-size:var(--t-fine); color:var(--ink-2); max-width:38ch}
.drench .flow p{color:color-mix(in oklch, #fff 78%, var(--azul-300))}

/* ------------------------------------ 11. le rapport, artefact produit */
.rapport-pli{position:relative; overflow:hidden}
.rapport-fond{
  position:absolute; inset:0; z-index:var(--z-fond);
  width:100%; height:100%; object-fit:cover; opacity:.34;
  mask-image:linear-gradient(to bottom, transparent 0%, #000 18%, #000 62%, transparent 100%);
  filter:saturate(.55);
}
.rapport-pli > .shell{position:relative; z-index:var(--z-contenu)}
.rapport-grille{display:grid; gap:var(--sp-l); align-items:start; margin-top:var(--sp-l)}
@media (min-width:960px){.rapport-grille{grid-template-columns:1.12fr 0.88fr; gap:clamp(2.6rem,5vw,4.6rem); align-items:start}}

.doc{
  background:#fff; border-radius:12px; overflow:hidden;
  box-shadow:0 22px 54px -20px color-mix(in oklch, var(--azul-950) 34%, transparent),
             0 2px 5px color-mix(in oklch, var(--azul-950) 9%, transparent);
  transform-origin:center;
}
.doc-tete{
  background:var(--azul-900); color:#fff; padding:1.05rem 1.35rem;
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.doc-tete b{font-size:1.02rem; font-weight:650; font-variation-settings:'wdth' 106; letter-spacing:-0.012em}
.doc-tete span{font-size:0.755rem; color:var(--azul-300); letter-spacing:0.045em; text-transform:uppercase; font-weight:550}
.doc-corps{padding:0.4rem 1.35rem 1.15rem}
.doc-ligne{
  display:grid; grid-template-columns:1fr auto; gap:0.7rem; align-items:center;
  padding:0.68rem 0; border-bottom:1px solid var(--ligne);
  font-size:0.895rem; color:var(--ink-2);
}
.doc-ligne:last-of-type{border-bottom:0}
.doc-ligne i{
  font-style:normal; font-size:0.735rem; font-weight:650; letter-spacing:0.035em;
  padding:0.2rem 0.52rem; border-radius:99px; white-space:nowrap;
}
.ok{background:color-mix(in oklch, oklch(0.560 0.115 152) 15%, transparent); color:oklch(0.400 0.100 152)}
.att{background:color-mix(in oklch, var(--teja-600) 16%, transparent); color:var(--teja-700)}
.doc-photo{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:4px;
  padding:0.4rem 1.35rem 1.35rem;
}
.doc-photo img{aspect-ratio:4/3; object-fit:cover; border-radius:4px}
.doc-pied{
  background:var(--clair-2); padding:0.82rem 1.35rem;
  font-size:0.755rem; color:var(--ink-3); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}

/* ------------------------------------------------------- 12. les preuves */
.preuves{
  display:grid; gap:0; margin-top:var(--sp-l);
  grid-template-columns:1fr;
  border-top:1px solid color-mix(in oklch, currentColor 22%, transparent);
}
@media (min-width:760px){.preuves{grid-template-columns:repeat(3, 1fr)}}
.preuves > div{
  padding:1.85rem 0;
  border-bottom:1px solid color-mix(in oklch, currentColor 22%, transparent);
}
@media (min-width:760px){
  .preuves > div{padding:2.1rem clamp(1.2rem,2.6vw,2.2rem) 2.1rem 0}
  .preuves > div + div{border-left:1px solid color-mix(in oklch, currentColor 22%, transparent); padding-left:clamp(1.2rem,2.6vw,2.2rem)}
}
.preuves .v{
  display:block; font-size:clamp(2.5rem, 1.5rem + 3.4vw, 4rem);
  font-weight:700; font-variation-settings:'wdth' 114;
  letter-spacing:-0.035em; line-height:0.94; margin-bottom:0.6rem;
  font-variant-numeric:tabular-nums;
}
.preuves .k{font-size:var(--t-fine); line-height:1.5; max-width:30ch; margin:0}

/* --------------------------------------------------------- 13. l'équipe */
.equipe{display:grid; gap:var(--sp-l); margin-top:var(--sp-l)}
@media (min-width:820px){.equipe{grid-template-columns:1fr 1fr; gap:clamp(2rem,4.5vw,4rem)}}
.pers .r{
  font-size:var(--t-micro); font-weight:600; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--teja-700); display:block; margin-bottom:0.5rem;
}
.pers h3{margin-bottom:0.75rem}
.pers p{font-size:var(--t-fine); color:var(--ink-2)}

/* ------------------------------------------------------- 14. les prix */
.prix{width:100%; border-collapse:collapse; margin-top:var(--sp-l); font-size:0.925rem}
.prix caption{text-align:left; font-size:var(--t-fine); color:var(--ink-3); padding-bottom:0.9rem}
.prix th,.prix td{padding:1.05rem 0.9rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--ligne)}
.prix thead th{
  border-bottom:1.5px solid var(--ligne-f); font-size:var(--t-micro);
  letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-3); font-weight:600;
}
.prix th:first-child,.prix td:first-child{padding-left:0}
.prix tbody th{
  font-size:1.08rem; font-weight:650; font-variation-settings:'wdth' 106;
  letter-spacing:-0.012em; color:var(--ink);
}
.prix tbody th small{display:block; font-size:var(--t-fine); font-weight:400; color:var(--ink-3); margin-top:0.28rem; letter-spacing:0}
.prix .p{
  font-size:1.42rem; font-weight:700; font-variation-settings:'wdth' 110;
  letter-spacing:-0.028em; white-space:nowrap; font-variant-numeric:tabular-nums;
}
.prix .p em{display:block; font-style:normal; font-size:var(--t-micro); font-weight:500; color:var(--ink-3); letter-spacing:0.02em; margin-top:0.2rem}
.prix tr[data-phare]{background:color-mix(in oklch, var(--teja-600) 7%, transparent)}
.prix tr[data-phare] th:first-child,.prix tr[data-phare] td:first-child{
  box-shadow:-1.1rem 0 0 color-mix(in oklch, var(--teja-600) 7%, transparent);
}
.prix tr[data-phare] td:last-child{box-shadow:1.1rem 0 0 color-mix(in oklch, var(--teja-600) 7%, transparent)}
.prix tr[data-phare] .p{color:var(--teja-700)}

/* --------------------------------------------------- 15. zones, langues */
.zones{display:flex; flex-wrap:wrap; gap:0.55rem; margin-top:var(--sp-m)}
.zones span{
  padding:0.44rem 0.86rem; border-radius:7px;
  background:color-mix(in oklch, currentColor 10%, transparent);
  font-size:0.885rem; font-weight:500;
}
.langs{display:grid; gap:0; margin-top:var(--sp-l); border-top:1px solid var(--ligne)}
.lang{
  display:grid; grid-template-columns:8.5rem auto 1fr; gap:0.6rem 1.15rem;
  align-items:baseline; padding:1.1rem 0; border-bottom:1px solid var(--ligne);
}
@media (max-width:640px){.lang{grid-template-columns:1fr auto}.lang .d{grid-column:1/-1}}
.lang .n{font-size:1.08rem; font-weight:650; font-variation-settings:'wdth' 106}
.lang .s{font-size:0.735rem; font-weight:650; letter-spacing:0.04em; padding:0.2rem 0.55rem; border-radius:99px; white-space:nowrap}
.lang .s[data-ok]{background:color-mix(in oklch, oklch(0.560 0.115 152) 16%, transparent); color:oklch(0.395 0.100 152)}
.lang .s[data-part]{background:color-mix(in oklch, var(--teja-600) 17%, transparent); color:var(--teja-700)}
.lang .s[data-no]{background:var(--sur-1); color:var(--ink-3)}
.lang .d{font-size:var(--t-fine); color:var(--ink-2); margin:0; max-width:52ch}

/* ------------------------------------------------------ 16. pied de page */
.pied{background:var(--azul-950); color:color-mix(in oklch, #fff 76%, var(--azul-300)); padding-block:var(--sp-l) var(--sp-m)}
.pied a{color:inherit; text-decoration:none; opacity:.82}
.pied a:hover{opacity:1; text-decoration:underline; text-underline-offset:3px}
.pied-haut{display:grid; gap:var(--sp-m); padding-bottom:var(--sp-m); border-bottom:1px solid color-mix(in oklch, #fff 15%, transparent)}
@media (min-width:760px){.pied-haut{grid-template-columns:1.5fr 1fr 1fr; gap:2.4rem}}
.pied h4{margin:0 0 0.8rem; font-size:var(--t-micro); letter-spacing:0.055em; text-transform:uppercase; color:var(--azul-300); font-weight:600}
.pied ul{list-style:none; margin:0; padding:0; display:grid; gap:0.5rem; font-size:0.895rem}
.pied-bas{display:flex; flex-wrap:wrap; gap:0.6rem 1.6rem; justify-content:space-between; padding-top:var(--sp-m); font-size:var(--t-micro); color:color-mix(in oklch, #fff 55%, var(--azul-300))}
.pied .marque b{color:#fff}

/* ---------------------------------------------------------- 17. mouvement
   Règle : le contenu est visible par défaut. Les révélations n'améliorent
   qu'un état déjà lisible, et ne s'activent que si le JS a posé .js-mo.    */
@media (prefers-reduced-motion: no-preference){
  /* Le hero : animation, pas transition. Une animation se joue toujours, meme si
     l'onglet est cache ou si le rendu est sans fenetre. Le contenu ne peut donc
     jamais rester bloque a zero. */
  .js-mo .hero h1,
  .js-mo .hero .lede,
  .js-mo .hero .hero-actions,
  .js-mo .hero .hero-pied{animation:monte .9s var(--e-expo) backwards}
  .js-mo .hero .lede{animation-delay:.12s}
  .js-mo .hero .hero-actions{animation-delay:.22s}
  .js-mo .hero .hero-pied{animation-delay:.32s}
  @keyframes monte{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}

  .js-mo [data-mo]{opacity:0; transform:translateY(20px); transition:opacity .85s var(--e-quart), transform .85s var(--e-quart)}
  .js-mo [data-mo].vu{opacity:1; transform:none}
  .js-mo [data-mo][data-d="1"]{transition-delay:.10s}
  .js-mo [data-mo][data-d="2"]{transition-delay:.20s}
  .js-mo [data-mo][data-d="3"]{transition-delay:.30s}

  /* Le hero : la photo se pose, elle n'apparaît pas. */
  .js-mo .hero-img{transform:scale(1.075); transition:transform 2.4s var(--e-expo)}
  .js-mo .hero-img.vu{transform:scale(1)}

  /* Le document : il se redresse, comme une feuille qu'on pose à plat. */
  .js-mo .doc{opacity:0; transform:perspective(1400px) rotateX(7deg) translateY(26px); transition:opacity 1s var(--e-expo), transform 1.1s var(--e-expo)}
  .js-mo .doc.vu{opacity:1; transform:none}
}
@media (prefers-reduced-motion: reduce){
  .js-mo [data-mo],.js-mo .doc{opacity:1; transform:none}
}

/* ------------------------------------------------------- 18. accessoires */
.saut{
  position:absolute; left:-9999px; top:0; z-index:var(--z-menu);
  background:var(--azul-900); color:#fff; padding:0.8rem 1.2rem; border-radius:0 0 8px 0;
}
.saut:focus{left:0}
:focus-visible{outline:2.5px solid var(--teja-500); outline-offset:2px}
::selection{background:color-mix(in oklch, var(--teja-500) 30%, transparent)}

/* ------------------------------------------------------- 19. petit écran */
@media (max-width:880px){
  .burger{display:block}
  .nav-liens{
    position:fixed; inset:var(--navh, 60px) 0 auto 0; z-index:var(--z-menu);
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--clair); color:var(--ink);
    box-shadow:0 18px 40px -14px color-mix(in oklch, var(--azul-950) 26%, transparent);
    padding:0.5rem 1.4rem 1.4rem;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .28s var(--e-quart), transform .28s var(--e-quart);
  }
  .nav-liens[data-ouvert="1"]{opacity:1; transform:none; pointer-events:auto}
  .nav-liens a{padding:0.85rem 0; border-bottom:1px solid var(--ligne); font-size:1.04rem; opacity:1}
  .nav-liens .langue{border-bottom:0; padding-top:0.9rem; justify-content:flex-start}
  .hero{min-height:92svh}
  .marque b{font-size:1.14rem}
}
@media (max-width:520px){
  .shell{width:min(100% - 2.1rem, var(--shell))}
  .hero-pied{gap:0.4rem 1.1rem; font-size:0.7rem}
  .doc-tete,.doc-corps,.doc-photo,.doc-pied{padding-inline:1rem}
}

/* Tableau des prix converti en fiches sous 720 px : chaque cellule porte son
   libellé via data-l, injecté par le JS depuis le thead. */
@media (max-width:720px){
  .prix,.prix tbody,.prix tr,.prix th,.prix td{display:block; width:100%}
  .prix thead{display:none}
  .prix tbody tr{padding:1.3rem 0; border-bottom:1px solid var(--ligne-f)}
  .prix th,.prix td{border:0; padding:0.34rem 0}
  .prix td::before{
    content:attr(data-l) ' '; font-size:var(--t-micro); letter-spacing:0.045em;
    text-transform:uppercase; color:var(--ink-3); font-weight:600; display:block; margin-bottom:0.15rem;
  }
  .prix .p{font-size:1.62rem}
}

@media print{
  .nav,.burger,.hero-actions{display:none}
  body{background:#fff; color:#000}
  .drench,.pli-photo{background:#fff; color:#000}
}

/* ==========================================================================
   20. SELECTEUR DE LANGUE
   <details> natif : fonctionne au clavier et sans JS. Le JS n'ajoute que la
   fermeture au clic exterieur et a la touche Echap.
   ========================================================================== */
.lsel{position:relative}
.lsel summary{
  list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:0.42rem;
  padding:0.5rem 0.7rem; border-radius:8px;
  font-size:0.875rem; font-weight:550;
  min-height:44px;                      /* cible tactile conforme */
  transition:background .2s var(--e-quart);
}
.lsel summary::-webkit-details-marker{display:none}
.lsel summary:hover{background:color-mix(in oklch, currentColor 12%, transparent)}
.lsel summary:focus-visible{outline:2.5px solid var(--teja-500); outline-offset:2px}
.lsel summary svg{width:17px; height:17px; flex:none; opacity:.8}
.lsel summary b{font-weight:600; letter-spacing:-0.005em}
.lsel summary .chev{width:13px; height:13px; transition:transform .28s var(--e-expo)}
.lsel[open] summary .chev{transform:rotate(180deg)}

.lsel-menu{
  position:absolute; top:calc(100% + 0.45rem); right:0; z-index:var(--z-menu);
  min-width:11.5rem; padding:0.35rem;
  background:var(--clair); color:var(--ink);
  border-radius:11px;
  box-shadow:0 14px 38px -12px color-mix(in oklch, var(--azul-950) 40%, transparent),
             0 0 0 1px var(--ligne);
  animation:lselOuvre .22s var(--e-expo);
}
@keyframes lselOuvre{from{opacity:0; transform:translateY(-6px) scale(.97)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){.lsel-menu{animation:none}}

.lsel-menu a{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:0.66rem 0.72rem; border-radius:7px;
  text-decoration:none; font-size:0.94rem; font-weight:500; min-height:44px;
  transition:background .16s var(--e-quart);
}
.lsel-menu a:hover{background:var(--sur-1)}
.lsel-menu a svg{width:17px; height:17px; opacity:0; color:var(--teja-600); flex:none}
.lsel-menu a[aria-current="page"]{font-weight:650}
.lsel-menu a[aria-current="page"] svg{opacity:1}

/* Bandeau de suggestion de langue. Aucune redirection automatique : elle casse
   le referencement et prive l'utilisateur du choix. */
.sug{
  position:fixed; inset:auto 1rem 1rem auto; z-index:var(--z-voile);
  display:flex; flex-wrap:wrap; align-items:center; gap:0.6rem 0.85rem;
  max-width:min(28rem, calc(100vw - 2rem));
  padding:0.85rem 1rem; border-radius:12px;
  background:var(--azul-900); color:#fff;
  box-shadow:0 16px 40px -12px color-mix(in oklch, var(--azul-950) 55%, transparent);
  font-size:0.9rem;
  animation:sugEntre .5s var(--e-expo) .8s backwards;
}
@keyframes sugEntre{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){.sug{animation:none}}
.sug[hidden]{display:none}
.sug-t{flex:1 1 12rem}
.sug-oui{
  color:#fff; font-weight:600; text-decoration:none; white-space:nowrap;
  padding:0.42rem 0.8rem; border-radius:7px; background:var(--teja-600); min-height:38px;
  display:inline-flex; align-items:center;
}
.sug-oui:hover{background:var(--teja-500)}
.sug-non{
  background:none; border:0; color:var(--azul-300); cursor:pointer;
  font:inherit; text-decoration:underline; text-underline-offset:3px; padding:0.42rem 0.2rem;
}
.sug-non:hover{color:#fff}

/* ============================== 21. FORMULAIRE ============================= */
.form{
  display:grid; gap:1.15rem 1.5rem; margin-top:var(--sp-l);
  grid-template-columns:1fr; max-width:46rem;
}
@media (min-width:680px){.form{grid-template-columns:1fr 1fr}}
.champ{margin:0; display:grid; gap:0.4rem}
.champ.large{grid-column:1/-1}
.champ label{font-size:0.925rem; font-weight:600; color:var(--ink)}
.champ input,.champ textarea{
  font:inherit; font-size:1.02rem; color:var(--ink);
  padding:0.78rem 0.9rem; border-radius:9px;
  background:#fff; border:1.5px solid var(--ligne-f);
  transition:border-color .18s var(--e-quart), box-shadow .18s var(--e-quart);
  width:100%;
}
.champ input::placeholder,.champ textarea::placeholder{color:var(--ink-3)}
.champ input:focus,.champ textarea:focus{
  outline:0; border-color:var(--teja-600);
  box-shadow:0 0 0 3px color-mix(in oklch, var(--teja-600) 20%, transparent);
}
.champ input:user-invalid{border-color:oklch(0.500 0.170 26)}
.champ small{font-size:0.845rem; color:var(--ink-3); line-height:1.45}
.form-pied{display:grid; gap:0.9rem; justify-items:start}
.form-pied small{max-width:52ch}
.btn-vert{background:oklch(0.520 0.130 152); color:#fff}
.btn-vert:hover{background:oklch(0.575 0.140 152)}
.voies{display:flex; flex-wrap:wrap; gap:0.8rem; margin-top:2rem; align-items:center}

/* Titres de colonnes du pied : h3 pour ne pas sauter de niveau, taille de label. */
.pied-t{
  margin:0 0 0.8rem; font-size:var(--t-micro); font-weight:600;
  font-variation-settings:'wdth' 100; letter-spacing:0.055em; line-height:1.4;
  text-transform:uppercase; color:var(--azul-300);
}
/* Cibles tactiles du pied : 14 px de haut, c'etait sous le minimum de 24 px. */
.pied ul a,.pied-bas a{display:inline-block; padding:0.28rem 0; min-height:24px}

@media (max-width:880px){
  .lsel{width:100%}
  .lsel summary{width:100%; justify-content:space-between; padding-inline:0}
  .lsel-menu{position:static; box-shadow:none; background:transparent; padding:0 0 0.4rem}
  .lsel-menu a{padding-inline:0}
  .sug{inset:auto 0.75rem 0.75rem 0.75rem; max-width:none}
}

/* ============================ 22. PAGES PAR COMMUNE ======================== */
.fil{font-size:0.82rem; display:flex; flex-wrap:wrap; gap:0.45rem; align-items:center;
  color:color-mix(in oklch, #fff 74%, var(--azul-300))}
.fil a{text-decoration:none; opacity:.85} .fil a:hover{opacity:1; text-decoration:underline; text-underline-offset:3px}
.fil b{font-weight:600; color:#fff}
.fil span{opacity:.5}

.faits{display:grid; gap:0; grid-template-columns:1fr; border-top:1px solid var(--ligne)}
@media (min-width:760px){.faits{grid-template-columns:repeat(3,1fr)}}
.faits > div{padding:1.7rem 0; border-bottom:1px solid var(--ligne)}
@media (min-width:760px){
  .faits > div{padding:1.9rem clamp(1rem,2.4vw,2rem) 1.9rem 0}
  .faits > div + div{border-left:1px solid var(--ligne); padding-left:clamp(1rem,2.4vw,2rem)}
}
.faits .v{display:block; font-size:clamp(2rem,1.3rem+2.4vw,3rem); font-weight:700;
  font-variation-settings:'wdth' 114; letter-spacing:-0.03em; line-height:1; margin-bottom:0.55rem;
  font-variant-numeric:tabular-nums; color:var(--teja-700)}
.faits .k{font-size:var(--t-fine); color:var(--ink-2); line-height:1.5; max-width:32ch; margin:0}

.communes{display:grid; gap:1px; margin-top:var(--sp-l); background:var(--ligne);
  border-block:1px solid var(--ligne); grid-template-columns:1fr}
@media (min-width:640px){.communes{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.communes{grid-template-columns:repeat(3,1fr)}}
.commune{background:var(--clair); padding:1.6rem 1.4rem 1.5rem; text-decoration:none; display:grid;
  gap:0.5rem; align-content:start; transition:background .22s var(--e-quart)}
.commune:hover{background:#fff}
.commune h2{font-size:1.42rem; letter-spacing:-0.02em}
.commune .fine{margin:0}
.commune .lien-fleche{border:0; padding:0; margin-top:0.5rem; font-size:0.9rem}
.commune:hover .lien-fleche{gap:0.66rem}

/* ============================ 23. AVIS CLIENTS ============================ */
.avis{display:grid; gap:0; margin-top:var(--sp-l); grid-template-columns:1fr;
  border-top:1px solid color-mix(in oklch, currentColor 22%, transparent)}
@media (min-width:900px){.avis{grid-template-columns:repeat(3,1fr)}}
.avis figure{margin:0; padding:2rem 0;
  border-bottom:1px solid color-mix(in oklch, currentColor 22%, transparent)}
@media (min-width:900px){
  .avis figure{padding:2.2rem clamp(1.2rem,2.6vw,2.2rem) 2.2rem 0}
  .avis figure + figure{border-left:1px solid color-mix(in oklch, currentColor 22%, transparent);
    padding-left:clamp(1.2rem,2.6vw,2.2rem)}
}
.et5{display:flex; gap:2px; margin-bottom:1.1rem; color:oklch(0.780 0.130 72)}
.et5 svg{width:15px; height:15px}
.avis blockquote{margin:0 0 1.3rem; font-size:1.03rem; line-height:1.56;
  color:color-mix(in oklch, #fff 90%, var(--azul-300)); max-width:38ch}
.avis blockquote::before{content:'\201C'}
.avis blockquote::after{content:'\201D'}
.avis figcaption{display:grid; gap:0.18rem; font-size:0.855rem;
  color:color-mix(in oklch, #fff 62%, var(--azul-300))}
.avis figcaption b{font-size:0.97rem; font-weight:650; color:#fff;
  font-variation-settings:'wdth' 104}

/* Le numero dans la barre de navigation et le pied. */
.tel-nav{display:inline-flex; align-items:center; gap:0.45rem; text-decoration:none;
  font-size:0.925rem; font-weight:600; padding:0.5rem 0.55rem; border-radius:8px; min-height:44px;
  transition:background .2s var(--e-quart)}
.tel-nav:hover{background:color-mix(in oklch, currentColor 12%, transparent)}
.tel-nav svg{width:16px; height:16px; opacity:.8; flex:none}
.tel-nav b{font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-0.005em}
@media (max-width:1180px){.tel-nav b{display:none} .tel-nav{padding-inline:0.5rem}}
@media (max-width:880px){.tel-nav b{display:inline}}
.pied-tel{margin-top:1.1rem; font-size:0.925rem; line-height:1.8}
.pied-tel a{text-decoration:none; color:#fff; font-variant-numeric:tabular-nums}
.pied-tel a:hover{text-decoration:underline; text-underline-offset:3px}