/* ============================================================
   POLICE — Montserrat, hébergée sur le site
   Un seul fichier variable par sous-ensemble couvre les graisses
   400 à 700. Auparavant la police venait de Google Fonts, chargée
   seulement après acceptation des cookies : un visiteur qui refusait
   voyait tout le site dans la police système, et celui qui acceptait
   subissait un changement de police en cours de navigation.
   Hébergée ici, elle s'applique à tout le monde, immédiatement.
   Montserrat est publiée sous SIL Open Font License.
   ============================================================ */
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:400 700;          /* fichier variable */
  font-display:swap;
  src:url('../medias/polices/montserrat-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../medias/polices/montserrat-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   MOOD INSIDE — nouveau site 2026
   Direction : typographie surdimensionnée, pleine page,
   coque arrondie, médias en vedette.
   Implémentation originale.
   ============================================================ */

/* ---------- 1. Fondations ---------- */
:root{
  --canvas:#e8e3dd;      /* fond hors coque */
  --paper:#fbfaf8;       /* fond de la coque */
  --ink:#1a1a1a;
  --ink-soft:#5b5651;
  --terra:#d57b5b;
  --terra-dark:#bd6444;

  --r-sm:12px;
  --r:20px;
  --r-lg:32px;
  --r-xl:44px;

  --pad:clamp(1.25rem, 4vw, 5rem);
  --gap:clamp(2.5rem, 7vw, 8rem);

  /* marge extérieure de la coque : la barre du haut s'y aligne
     pour que le logo tombe sur la même verticale que le contenu */
  --marge-coque:10px;

  --ease:cubic-bezier(.16,1,.3,1);
  --shadow:0 2px 6px rgba(26,26,26,.05), 0 18px 50px rgba(26,26,26,.10);
  --shadow-lg:0 4px 10px rgba(26,26,26,.06), 0 34px 80px rgba(26,26,26,.16);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

/* Les champs, boutons et listes déroulantes n'héritent pas de la
   police du document : sans cette règle ils restent dans la police
   du système, ce qui faisait coexister deux typographies. */
input, button, select, textarea, optgroup{
  font-family:inherit;
  font-size:inherit;
  line-height:inherit;
}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  background:var(--canvas);
  color:var(--ink);
  font-family:'Montserrat', system-ui, sans-serif;
  font-size:17px;
  line-height:1.7;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,video{ display:block; max-width:100%; }

a{ color:inherit; text-decoration:none; }

::selection{ background:rgba(213,123,91,.25); }

:focus-visible{ outline:2px solid var(--terra); outline-offset:4px; border-radius:6px; }
:focus:not(:focus-visible){ outline:none; }

::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:var(--canvas); }
::-webkit-scrollbar-thumb{
  background:rgba(26,26,26,.25);
  border:3px solid var(--canvas);
  border-radius:99px;
}

/* ---------- 2. Typographie ---------- */
.display{
  font-size:clamp(2rem, 5.2vw, 5rem);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:700;
  text-wrap:balance;
  color:#fff;
}

.display-dark{ color:var(--ink); }

h2{ font-size:clamp(1.6rem, 3.2vw, 2.9rem); line-height:1.06; letter-spacing:-.03em; font-weight:700; text-wrap:balance; }
h3{ font-size:clamp(1.15rem, 1.7vw, 1.6rem); line-height:1.18; letter-spacing:-.02em; font-weight:700; text-wrap:balance; }
h4{ font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; }

p{ max-width:64ch; }

.eyebrow{
  font-size:.74rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:600;
  opacity:.75;
}

/* (les vignettes insérées dans les titres ont été retirées) */

/* ---------- 3. Boutons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  white-space:nowrap;
  padding:1.05em 2.2em;
  border-radius:999px;
  font-size:.92rem;
  font-weight:600;
  letter-spacing:.02em;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .4s var(--ease), background-color .35s var(--ease),
             color .35s var(--ease), border-color .35s var(--ease);
}
.btn .arrow{ transition:transform .4s var(--ease); }
.btn:hover .arrow{ transform:translate(3px,-3px); }
.btn:active{ transform:scale(.98); }

.btn-solid{ background:var(--ink); color:var(--paper); }
.btn-solid:hover{ background:var(--terra); }

.btn-line{ border-color:rgba(255,255,255,.45); color:#fff; }
.btn-line:hover{ background:#fff; color:var(--ink); border-color:#fff; }

.btn-ghost{
  border-color:rgba(255,255,255,.45); color:#fff;
  padding:.8em 1.5em; font-size:.86rem; font-weight:600;
  background:rgba(20,20,20,.42);
  -webkit-backdrop-filter:blur(14px);
          backdrop-filter:blur(14px);
}
.btn-ghost:hover{ background:#fff; color:var(--ink); }

.btn-plain{ color:var(--ink); padding:1.05em 1.2em; }
.btn-plain:hover{ color:var(--terra); }

.btn-wide{ background:var(--paper); color:var(--ink); border-color:rgba(26,26,26,.14); width:100%; max-width:520px; }
.btn-wide:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ---------- 4. Coque ---------- */
.shell{
  background:var(--paper);
  border-radius:var(--r-xl);
  margin:10px;
  overflow:hidden;
  position:relative;
}

/* ---------- 5. En-tête ---------- */
.head{
  position:fixed;
  top:22px;
  left:34px;
  right:34px;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  padding:.5rem 0;
  transition:top .45s var(--ease), left .45s var(--ease), right .45s var(--ease),
             padding .45s var(--ease), background-color .45s var(--ease),
             box-shadow .45s var(--ease), border-color .45s var(--ease);
}
/* La barre ne disparaît plus au défilement : elle se pose dans un
   bloc blanc translucide, lisible sur n'importe quel fond. Il n'est
   donc plus nécessaire de remonter en haut pour retrouver le menu. */
.head.scrolled{
  top:12px;
  left:12px;
  right:12px;
  padding:.55rem 1.4rem;
  background:rgba(251,250,248,.72);
  -webkit-backdrop-filter:blur(20px) saturate(1.7);
          backdrop-filter:blur(20px) saturate(1.7);
  border:1px solid rgba(255,255,255,.55);
  border-radius:var(--r-lg);
  box-shadow:0 2px 10px rgba(26,26,26,.06), 0 16px 44px rgba(26,26,26,.12);
}

/* Une fois défilé, le groupe de liens se détache dans sa propre
   pastille grise translucide, à l'intérieur de la barre blanche. */
.head.scrolled .head-nav{
  background:rgba(26,26,26,.075);
  border-color:rgba(26,26,26,.06);
  -webkit-backdrop-filter:blur(6px);
          backdrop-filter:blur(6px);
  border:1px solid rgba(26,26,26,.06);
  border-radius:999px;
  padding:.32rem 1.25rem;
  transition:background-color .45s var(--ease), padding .45s var(--ease);
}

/* dans ce bloc clair, tout passe en encre sombre */
.head.scrolled .nav-link,
.head.scrolled .head-nav a{ color:var(--ink); }
.head.scrolled .head-logo img{ filter:none; }
.head.scrolled .btn-ghost{
  border-color:rgba(26,26,26,.22); color:var(--ink);
  background:transparent;
}
.head.scrolled .btn-ghost:hover{ background:var(--ink); color:var(--paper); }
.head.scrolled .burger{ background:rgba(26,26,26,.06); border-color:rgba(26,26,26,.15); }
.head.scrolled .burger span{ background:var(--ink); }

/* repli sans verre dépoli */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .head.scrolled{ background:rgba(251,250,248,.96); }
}

/* Deux versions du logo superposées : la claire (mot « INSIDE » en
   blanc) au-dessus des photos, la sombre dès que la barre passe sur
   fond clair. Sans cela, « INSIDE » disparaissait — blanc sur blanc. */
.head-logo{
  position:relative;
  display:block;
  width:118px;
  line-height:0;
}
.head-logo img{
  width:118px;
  transition:opacity .4s var(--ease);
}
.head-logo .logo-sombre{
  position:absolute;
  inset:0;
  opacity:0;
}
.head-logo .logo-clair{ filter:brightness(0) invert(1); }

/* barre posée sur fond clair : on montre la version sombre */
.head.scrolled .head-logo .logo-clair,
.head.on-light .head-logo .logo-clair{ opacity:0; }
.head.scrolled .head-logo .logo-sombre,
.head.on-light .head-logo .logo-sombre{ opacity:1; }

.head-nav{ display:flex; gap:2.2rem; font-size:.92rem; font-weight:600; }
.head-nav a{ color:#fff; position:relative; padding:.2em 0; transition:color .3s var(--ease); }
.head-nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1.5px;
  background:currentColor; transition:width .4s var(--ease);
}
.head-nav a:hover::after{ width:100%; }
.head.on-light .head-nav a{ color:var(--ink); }
.head.on-light .head-nav{ background:rgba(26,26,26,.07); border-color:rgba(26,26,26,.07); }
.head.on-light .btn-ghost{
  border-color:rgba(26,26,26,.25); color:var(--ink);
  background:transparent;
}
.head.on-light .btn-ghost:hover{ background:var(--ink); color:var(--paper); }

.head-right{ display:flex; align-items:center; gap:1rem; }

/* Burger : 52px de côté — au-dessus des 44px recommandés pour une
   cible tactile — trois barres lisibles, et une croix franche à
   l'ouverture. */
.burger{
  display:none;
  width:52px; height:52px;
  /* sans base fixe, le conteneur flex de l'en-tête l'écrase en ovale */
  flex:0 0 52px;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.34);
  position:relative;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .3s var(--ease), transform .25s var(--ease);
}
.burger:active{ transform:scale(.93); }
.burger span{
  position:absolute; left:16px; width:20px; height:2px;
  border-radius:2px; background:#fff;
  transition:transform .38s var(--ease), opacity .22s var(--ease),
             width .38s var(--ease);
}
.burger span:nth-child(1){ top:19px; }
.burger span:nth-child(2){ top:25px; }
.burger span:nth-child(3){ top:31px; width:13px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; transform:scaleX(.2); }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); width:20px; }
.head.on-light .burger{ background:rgba(26,26,26,.06); border-color:rgba(26,26,26,.15); }
.head.on-light .burger span{ background:var(--ink); }

/* ---------- 6. Menu plein écran ---------- */
.menu{
  position:fixed; inset:10px;
  z-index:55;
  background:var(--ink);
  border-radius:var(--r-xl);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:.4rem;
  opacity:0; pointer-events:none;
  transition:opacity .45s var(--ease);
}
.menu.open{ opacity:1; pointer-events:auto; }
.menu a{
  color:#fff;
  font-size:clamp(1.6rem, 3.6vw, 2.6rem);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.25;
  transition:color .3s var(--ease);
}
.menu a:hover{ color:var(--terra); }
.menu-foot{
  margin-top:2.5rem; display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:center;
}
.menu-foot a{ font-size:.95rem; font-weight:500; color:rgba(255,255,255,.6); }

/* ---------- 7. Hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column;
  /* le bloc titre se pose en bas de l'image plutôt qu'en son centre :
     le visuel respire et le regard descend naturellement vers la
     suite de la page */
  justify-content:flex-end;
  padding:clamp(7rem,14vh,10rem) var(--pad) clamp(3.5rem,9vh,6rem);
  overflow:hidden;
  isolation:isolate;
}
.hero-media{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:-2;
}
.hero-veil{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(26,26,26,.55) 0%, rgba(26,26,26,.30) 40%, rgba(26,26,26,.72) 100%);
}
.hero-inner{ color:#fff; max-width:1500px; }
.hero-inner .eyebrow{ margin-bottom:1.6rem; }
.hero-sub{
  margin-top:1.8rem;
  font-size:clamp(1.05rem,1.7vw,1.4rem);
  color:rgba(255,255,255,.85);
  max-width:44ch;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.6rem; }


/* ---------- 8. Bandeau défilant ---------- */
.marquee{
  background:var(--ink);
  color:var(--paper);
  padding:1.5rem 0;
  overflow:hidden;
  white-space:nowrap;
}
.marquee-track{
  display:inline-flex; align-items:center; gap:2.5rem;
  animation:slide 42s linear infinite;
  font-size:clamp(1rem,1.6vw,1.5rem);
  font-weight:700; letter-spacing:-.02em;
}
.marquee-track i{ color:var(--terra); font-style:normal; font-size:.7em; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ---------- 9. Manifeste ---------- */
.intro{ padding:var(--gap) var(--pad); }
.intro-cols{
  display:grid; grid-template-columns:1.45fr .55fr;
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
  margin-top:clamp(2.5rem,5vw,4rem);
}
.intro-text p + p{ margin-top:1.2rem; }
.intro-text p{ color:var(--ink-soft); }
.intro-cta{ display:flex; flex-direction:column; align-items:flex-start; gap:.4rem; margin-top:2.5rem; }
/* portrait volontairement discret : il accompagne le texte sans lui
   disputer la place */
.intro-media{
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow);
  max-width:300px;
  margin-left:auto;
  align-self:start;
}
.intro-media img{ width:100%; aspect-ratio:3/4; object-fit:cover; }

.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px;
  margin-top:clamp(3rem,7vw,6rem);
  background:rgba(26,26,26,.12);
  border-radius:var(--r);
  overflow:hidden;
}
.stats div{ background:var(--paper); padding:1.8rem 1.4rem; }
.stats strong{ display:block; font-size:clamp(1.8rem,3vw,2.6rem); line-height:1; letter-spacing:-.04em; }
.stats span{ display:block; margin-top:.6rem; font-size:.82rem; color:var(--ink-soft); line-height:1.45; }

/* ---------- 10. Réalisations ---------- */
.work{
  background:var(--ink);
  color:var(--paper);
  border-radius:var(--r-xl);
  margin:0 10px;
  padding:var(--gap) var(--pad);
}
.work-head{ display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:1.5rem; }
.work-head p{ color:rgba(251,250,248,.6); max-width:38ch; }

/* Les quatre accès se lisent d'un coup d'œil, côte à côte, au lieu
   de deux pleines largeurs qui écrasaient la section. */
.work-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(.7rem,1.2vw,1.1rem);
  margin-top:clamp(2.5rem,5vw,4rem);
}
.card{
  position:relative;
  display:block;
  border-radius:var(--r-lg);
  overflow:hidden;
  aspect-ratio:3/4;
  background:#2a2a2a;
}
/* plus de carte pleine largeur : toutes au même format */
.card-lg{ grid-column:auto; aspect-ratio:3/4; }
.card img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease), filter .55s var(--ease);
}
/* au survol, la photo passe en arrière-plan flouté : l'étiquette
   et le libellé de la catégorie ressortent nettement */
.card:hover img{ transform:scale(1.05); filter:blur(5px) brightness(.82); }

.pill{
  position:absolute; top:.8rem; right:.8rem;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.62em 1.1em;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.28);
  font-size:.72rem; font-weight:600; color:#fff;
}
.pill em{ font-style:normal; opacity:.65; font-weight:400; }

.card-label{
  position:absolute; left:1.1rem; right:1.1rem; bottom:1.1rem; color:#fff;
  text-shadow:0 2px 20px rgba(0,0,0,.5);
}
.card-label small{ display:block; font-size:.75rem; opacity:.7; letter-spacing:.06em; }
.card-label strong{ display:block; font-size:clamp(1.1rem,1.8vw,1.5rem); letter-spacing:-.02em; line-height:1.1; }

.strip{
  display:flex; gap:.8rem;
  /* sans cela, l'étirement vertical par défaut prend le pas sur le
     ratio et les vignettes deviennent gigantesques */
  align-items:flex-start;
  margin-top:clamp(1.5rem,3vw,2.5rem);
  overflow-x:auto;
  padding-bottom:.6rem;
  scrollbar-width:none;
}
.strip::-webkit-scrollbar{ display:none; }
.strip img{
  flex:0 0 auto;
  width:clamp(180px,22vw,300px);
  height:clamp(180px,22vw,300px);
  object-fit:cover;
  border-radius:var(--r);
  transition:transform .6s var(--ease);
}
.strip img:hover{ transform:scale(1.03); }

/* ---------- 11. Savoir-faire ---------- */
.skills{ padding:var(--gap) var(--pad); }
.skill{
  display:grid; grid-template-columns:.9fr 1.1fr;
  gap:clamp(1.5rem,4vw,4rem);
  align-items:center;
  padding:clamp(2rem,4vw,3.5rem) 0;
  border-top:1px solid rgba(26,26,26,.12);
}
.skills h2.display{ margin-bottom:clamp(1.5rem,4vw,3rem); }
.skill:nth-child(even) figure{ order:2; }
.skill figure{ border-radius:var(--r-lg); overflow:hidden; }
.skill figure img{
  width:100%; aspect-ratio:5/4; object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.skill:hover figure img{ transform:scale(1.04); }
.skill .num{
  display:block; font-size:.78rem; letter-spacing:.18em;
  color:var(--terra); font-weight:700; margin-bottom:.9rem;
}
.skill h3{ margin-bottom:1rem; }
.skill p{ color:var(--ink-soft); }

/* ---------- 12. Méthode ---------- */
.method{
  background:var(--canvas);
  border-radius:var(--r-xl);
  margin:0 10px;
  padding:var(--gap) var(--pad);
}
.method-head{ display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:1.5rem; }
.method-head p{ color:var(--ink-soft); }

.steps{
  list-style:none;
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(1rem,2vw,1.6rem);
  margin-top:clamp(2.5rem,5vw,4rem);
  counter-reset:step;
}
.steps li{
  background:#fff;
  border-radius:var(--r-lg);
  padding:clamp(1.5rem,2.6vw,2.2rem);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.steps li:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.steps .num{
  display:block; font-size:.78rem; letter-spacing:.18em;
  color:var(--terra); font-weight:700; margin-bottom:1rem;
}
.steps h3{ margin-bottom:.9rem; }
.steps p{ color:var(--ink-soft); font-size:.96rem; }
.steps p + p{ margin-top:.9rem; }

/* ---------- 13. Avis ---------- */
.reviews{
  background:var(--terra);
  color:#fff;
  border-radius:var(--r-xl);
  margin:10px;
  padding:var(--gap) var(--pad);
}
.reviews-head p{ margin-top:1rem; color:rgba(255,255,255,.85); font-size:1.15rem; }
.reviews-grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(1rem,2vw,1.6rem);
  margin-top:clamp(2.5rem,5vw,4rem);
}
.reviews blockquote{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-lg);
  padding:clamp(1.6rem,3vw,2.4rem);
  transition:background-color .45s var(--ease), transform .45s var(--ease);
}
.reviews blockquote:hover{ background:rgba(255,255,255,.2); transform:translateY(-4px); }
.reviews blockquote p{ font-size:1rem; max-width:none; }
.reviews cite{
  display:block; margin-top:1.4rem;
  font-style:normal; font-weight:700; font-size:.88rem;
  letter-spacing:.06em;
}

/* ---------- 14. Contact ---------- */
.contact{ padding:var(--gap) var(--pad); text-align:center; }
.contact .display{ color:var(--ink); }
.contact-sub{ margin:1.8rem auto 0; color:var(--ink-soft); font-size:1.1rem; }
.contact-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1rem;
  margin-top:clamp(2.5rem,5vw,4rem);
  text-align:left;
}
.ccard{
  position:relative;
  border:1px solid rgba(26,26,26,.14);
  border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.2rem);
  transition:background-color .4s var(--ease), color .4s var(--ease),
             border-color .4s var(--ease), transform .4s var(--ease);
}
.ccard:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); transform:translateY(-4px); }
.ccard small{ display:block; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; opacity:.6; }
.ccard strong{ display:block; margin-top:.7rem; font-size:clamp(1.05rem,1.8vw,1.45rem); letter-spacing:-.02em; line-height:1.3; }
.ccard .arrow{ position:absolute; top:1.5rem; right:1.5rem; transition:transform .4s var(--ease); }
.ccard:hover .arrow{ transform:translate(3px,-3px); }

/* ---------- 15. Pied de page ---------- */
.foot{
  background:var(--ink);
  color:var(--paper);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  margin:0 10px;
  padding:var(--gap) var(--pad) 2.5rem;
}
.foot-logo{ width:150px; filter:brightness(0) invert(1); }
.foot-cols{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:2.5rem;
  margin-top:clamp(2.5rem,5vw,4rem);
}
.foot-cols h4{ color:rgba(251,250,248,.45); margin-bottom:1.2rem; }
.foot-cols a{
  display:block; padding:.35rem 0; font-size:.95rem;
  color:rgba(251,250,248,.85);
  transition:color .3s var(--ease), transform .3s var(--ease);
}
.foot-cols a:hover{ color:var(--terra); transform:translateX(4px); }
.foot-bar{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  margin-top:clamp(2.5rem,5vw,4rem);
  padding-top:1.6rem;
  border-top:1px solid rgba(251,250,248,.15);
  font-size:.82rem; color:rgba(251,250,248,.5);
}
.foot-bar a{ color:rgba(251,250,248,.8); text-decoration:underline; text-underline-offset:3px; }
.foot-bar a:hover{ color:var(--terra); }

/* ---------- 16. Apparition des visuels ---------- */
/* Les textes ne sont jamais animés : ils s'affichent immédiatement. */
/* La transition n'est déclarée que sur l'état visible : en retirant
   la classe, la propriété disparaît en même temps que les valeurs,
   donc la remise à zéro est instantanée. Sans cela, un élément
   surpris hors champ se verrait repartir en fondu à l'envers. */
.reveal{
  opacity:0;
  transform:translateY(28px);
}
.reveal.seen{
  opacity:1;
  transform:none;
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d,0ms);
}

/* ---------- 17. Écran de chargement ---------- */
#loader{
  position:fixed; inset:0; z-index:999;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:32px;
  background:radial-gradient(120% 90% at 50% 40%, #2a2a2a 0%, #1a1a1a 65%, #141414 100%);
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
#loader.done{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-logo{ width:min(300px,58vw); animation:logoIn .8s var(--ease) both; }
@keyframes logoIn{ from{opacity:0;transform:translateY(12px) scale(.96)} to{opacity:1;transform:none} }
.loader-bar{ width:min(280px,52vw); height:3px; border-radius:99px; background:rgba(255,255,255,.13); overflow:hidden; }
.loader-bar span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--terra-dark),var(--terra));
  box-shadow:0 0 14px rgba(213,123,91,.6);
  border-radius:99px;
  transition:width .35s var(--ease);
}
.loader-pct{
  margin-top:-18px; font-size:.7rem; letter-spacing:.24em;
  color:rgba(255,255,255,.5); font-variant-numeric:tabular-nums;
}
html.loading, html.loading body{ overflow:hidden; }

/* ---------- 18. Adaptatif ---------- */
@media (max-width:1000px){
  .head{ left:20px; right:20px; top:16px; }
  .head-nav, .head-cta{ display:none; }
  .burger{ display:block; }
  .intro-cols{ grid-template-columns:1fr; }
  .intro-media img{ aspect-ratio:16/10; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .skill{ grid-template-columns:1fr; }
  .skill:nth-child(even) figure{ order:0; }
  .steps{ grid-template-columns:1fr; }
  .reviews-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .foot-cols{ grid-template-columns:1fr; gap:2rem; }
}

@media (max-width:640px){
  body{ font-size:16px; }
  :root{ --marge-coque:6px; }
  .shell{ margin:var(--marge-coque); border-radius:var(--r-lg); }
  .work, .method, .foot{ margin:0 6px; border-radius:var(--r-lg); }
  .reviews{ margin:6px; border-radius:var(--r-lg); }
  .work-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- 19. Accessibilité ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ============================================================
   20. NAVIGATION — sous-menus déroulants
   ============================================================ */
.head-nav{
  gap:1.6rem;
  align-items:center;
  /* Pastille sombre translucide tant que la barre survole un visuel :
     le blanc sur blanc des zones claires rendait le menu illisible. */
  background:rgba(20,20,20,.42);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
          backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:.42rem 1.3rem;
  transition:background-color .45s var(--ease), padding .45s var(--ease),
             border-color .45s var(--ease);
}

/* repli sans verre dépoli : on compense par un fond plus opaque */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .head-nav{ background:rgba(20,20,20,.72); }
}
.nav-item{
  position:relative;
  display:flex;
  align-items:center;
}
/* bouton et lien doivent partager exactement la même boîte, sinon
   les deux entrées à sous-menu flottent au-dessus des autres */
.head-nav .nav-link{
  display:inline-flex;
  align-items:center;
  line-height:1.4;
  padding:.2em 0;
  margin:0;
}
.nav-link{
  background:none; border:none; cursor:pointer;
  font:inherit; font-size:.92rem; font-weight:600; letter-spacing:.005em;
  color:#fff; padding:.2em 0; display:inline-flex; align-items:center; gap:.35em;
  position:relative; transition:color .3s var(--ease);
}
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:1.5px;
  background:currentColor; transition:width .4s var(--ease);
}
.nav-link:hover::after, .nav-link.current::after{ width:100%; }
.caret{ font-size:.7em; opacity:.7; transition:transform .3s var(--ease); }
.nav-item.open .caret{ transform:rotate(180deg); }
.head.on-light .nav-link{ color:var(--ink); }

.sub{
  position:absolute; top:100%; left:50%;
  margin-top:14px;
  transform:translateX(-50%) translateY(-6px);
  min-width:230px; padding:.45rem;
  background:var(--paper); border-radius:var(--r);
  box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s var(--ease), transform .35s var(--ease), visibility .3s;
}
/* Passerelle invisible qui comble le vide entre l'intitulé et le
   panneau : sans elle, la souris quitte .nav-item en descendant et
   le sous-menu se referme avant qu'on ait pu cliquer.
   Elle est portée par .nav-item (et non par .sub) pour rester
   contiguë à l'intitulé quel que soit le décalage du panneau. */
.nav-item.has-sub.open::after{
  content:'';
  position:absolute;
  left:0; right:0;
  top:100%;
  height:20px;
}
.nav-item.open .sub{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }

/* Pas de padding ici : il rendait les intitulés à sous-menu plus
   hauts que les autres et désalignait leur texte de 3px. La
   passerelle ::before ci-dessus suffit à couvrir le vide. */
.sub a{
  display:block; padding:.65rem .9rem; border-radius:10px;
  font-size:.88rem; color:var(--ink); white-space:nowrap;
  transition:background-color .25s var(--ease), padding-left .25s var(--ease);
}
.sub a:hover{ background:rgba(213,123,91,.12); padding-left:1.25rem; }

.menu-group{
  display:block; margin-top:1.2rem;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.4); font-weight:700;
}
.menu a{ font-size:clamp(1.3rem,2.8vw,2rem); }
.menu .menu-sub{ font-size:clamp(1rem,1.8vw,1.2rem); color:rgba(255,255,255,.72); font-weight:500; }
.menu{ justify-content:flex-start; padding:clamp(5rem,14vh,8rem) var(--pad) 3rem; overflow-y:auto; align-items:flex-start; }

/* ============================================================
   21. RIDEAU DE TRANSITION ENTRE PAGES
   ============================================================ */
.curtain{
  position:fixed; inset:0; z-index:200;
  background:var(--ink);
  transform:translateY(100%);
  pointer-events:none;
}
.curtain.in{ animation:curtainIn .55s var(--ease) forwards; }
.curtain.out{ animation:curtainOut .6s var(--ease) forwards; }
@keyframes curtainIn{ from{transform:translateY(100%)} to{transform:translateY(0)} }
@keyframes curtainOut{ from{transform:translateY(0)} to{transform:translateY(-100%)} }

/* ============================================================
   22. EN-TÊTE DE PAGE INTÉRIEURE
   ============================================================ */
/* En-tête de page intérieure : bandeau noir compact, sans photo.
   Il occupait auparavant 78svh avec une image de fond ; le contenu
   de la page commençait donc très bas. Sa hauteur est désormais
   dictée par son seul contenu. */
.phero{
  position:relative;
  background:var(--ink);
  color:var(--paper);
  min-height:0;
  display:flex; align-items:flex-end;
  padding:clamp(6.5rem,11vh,8rem) var(--pad) clamp(2rem,4vh,2.8rem);
}
.phero-sm,
.phero-xs{ min-height:0; }
.phero-inner .eyebrow{ color:rgba(255,255,255,.7); margin-bottom:.8rem; }

/* ============================================================
   23. CHAPÔ + BLOCS DE CONTENU
   ============================================================ */
.lede{ padding:var(--gap) var(--pad) clamp(1.5rem,4vw,3rem); }
.lede h2{ margin-bottom:1.8rem; }
.lede p{ font-size:clamp(1.02rem,1.4vw,1.2rem); color:var(--ink-soft); }
.lede p + p{ margin-top:1.1rem; }

.blocks{ padding:0 var(--pad) var(--gap); }
.block{
  display:grid; grid-template-columns:.9fr 1.1fr;
  gap:clamp(1.5rem,4vw,4rem); align-items:center;
  padding:clamp(2rem,4vw,3.5rem) 0;
  border-top:1px solid rgba(26,26,26,.12);
}
.block:nth-child(even) figure{ order:2; }
.block figure{ border-radius:var(--r-lg); overflow:hidden; }
.block figure img{ width:100%; aspect-ratio:5/4; object-fit:cover; height:114%; }
.block .num{ display:block; font-size:.78rem; letter-spacing:.18em; color:var(--terra); font-weight:700; margin-bottom:.9rem; }
.block h3{ margin-bottom:1rem; }
.block p{ color:var(--ink-soft); }
.block p + p{ margin-top:.9rem; }

/* ============================================================
   24. BANDEAU D'APPEL
   ============================================================ */
.cta-band{
  background:var(--ink); color:var(--paper);
  border-radius:var(--r-xl); margin:0 10px;
  padding:var(--gap) var(--pad); text-align:center;
}
.cta-band p{ margin:1.4rem auto 2.4rem; color:rgba(251,250,248,.7); }
.cta-band .btn-solid{ background:var(--paper); color:var(--ink); }
.cta-band .btn-solid:hover{ background:var(--terra); color:#fff; }

/* ============================================================
   25. GALERIE + FILTRES + VISIONNEUSE
   ============================================================ */
.filters{
  position:sticky; top:12px; z-index:40;
  display:flex; flex-wrap:wrap; gap:.5rem;
  padding:0 var(--pad) clamp(1.5rem,3vw,2.5rem);
}
.filter{
  border:1px solid rgba(26,26,26,.16); background:var(--paper);
  border-radius:999px; padding:.62em 1.2em;
  font:inherit; font-size:.85rem; font-weight:600; cursor:pointer;
  display:inline-flex; gap:.5rem; align-items:center;
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.filter em{ font-style:normal; opacity:.5; font-weight:400; }
.filter:hover{ border-color:var(--ink); }
.filter.on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.filter.on em{ opacity:.6; }

.gallery{ padding:0 var(--pad) var(--gap); }
.gal-title{
  font-size:clamp(1.2rem,2vw,1.7rem); margin:clamp(2rem,4vw,3rem) 0 1.4rem;
  scroll-margin-top:110px;
}
.gal-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:.8rem;
}
.gal-grid.hide{ display:none; }
.gal-item{ border-radius:var(--r); overflow:hidden; cursor:zoom-in; background:#e0dbd5; }
.gal-item img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  transition:transform .8s var(--ease), filter .55s var(--ease);
}
.gal-item:hover img{ transform:scale(1.06); filter:blur(5px) brightness(.85); }

/* petite loupe qui apparaît par-dessus le flou */
.gal-item{ position:relative; }
.gal-item::after{
  content:'⤢';
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; color:#fff;
  opacity:0; transform:scale(.85);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
  pointer-events:none;
  text-shadow:0 2px 14px rgba(0,0,0,.5);
}
.gal-item:hover::after{ opacity:1; transform:scale(1); }

/* Sans cette règle, `display:flex` ci-dessous l'emporte sur la
   règle navigateur [hidden]{display:none} : la visionneuse restait
   étendue sur toute la page, invisible mais interceptant chaque
   clic — menu du haut et vignettes compris. */
.lightbox[hidden]{ display:none !important; }

.lightbox{
  position:fixed; inset:0; z-index:210;
  pointer-events:none;
  background:rgba(20,20,20,.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .35s var(--ease);
}
.lightbox.on{ opacity:1; pointer-events:auto; }
.lightbox img{ max-width:90vw; max-height:84vh; border-radius:var(--r); }
.lightbox button{
  position:absolute; background:rgba(255,255,255,.14); color:#fff;
  border:1px solid rgba(255,255,255,.25); border-radius:50%;
  width:52px; height:52px; font-size:1.5rem; cursor:pointer;
  transition:background-color .25s var(--ease);
}
.lightbox button:hover{ background:rgba(255,255,255,.28); }
.lb-close{ top:22px; right:22px; font-size:1.1rem !important; }
.lb-prev{ left:22px; }
.lb-next{ right:22px; }
.lb-count{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.65); font-size:.85rem; letter-spacing:.1em;
}

/* ============================================================
   26. ACTUALITÉS
   ============================================================ */
.posts{ padding:0 var(--pad) var(--gap); }
.post{
  display:grid; grid-template-columns:.8fr 1.2fr;
  gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
  padding:clamp(2rem,4vw,3rem) 0;
  border-top:1px solid rgba(26,26,26,.12);
}
.post figure{ border-radius:var(--r-lg); overflow:hidden; }
.post figure img{ width:100%; aspect-ratio:4/3; object-fit:cover; height:112%; }
.post .num{ display:block; font-size:.75rem; letter-spacing:.18em; color:var(--terra); font-weight:700; margin-bottom:.8rem; }
.post h3{ margin-bottom:.8rem; }
.post p{ color:var(--ink-soft); }

/* ============================================================
   27. CONTACT — page
   ============================================================ */
.contact-page{ padding:0 var(--pad) var(--gap); }
.form{ margin-top:clamp(2.5rem,5vw,4rem); max-width:820px; }
.form label{ display:block; margin-bottom:1.4rem; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; }
.form .row2{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.form input[type=text],.form input[type=email],.form input[type=tel],.form textarea{
  display:block; width:100%; margin-top:.6rem;
  font:inherit; font-size:1rem; letter-spacing:normal; text-transform:none; color:var(--ink);
  background:transparent; border:none; border-bottom:1px solid rgba(26,26,26,.25);
  padding:.7rem 0; border-radius:0;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.form input:focus,.form textarea:focus{
  outline:none; border-bottom-color:var(--terra); border-bottom-width:2px;
  background:rgba(213,123,91,.05);
}
.form textarea{ resize:vertical; }
.form .check{ display:flex; gap:.8rem; align-items:flex-start; text-transform:none; letter-spacing:normal; font-size:.9rem; }
.form .check input{ margin-top:.35rem; accent-color:var(--terra); }
.form-note{ margin-top:1.2rem; font-size:.9rem; color:var(--terra); min-height:1.4em; }

/* ============================================================
   28. MENTIONS LÉGALES
   ============================================================ */
.legal{ padding:clamp(2rem,5vw,4rem) var(--pad) var(--gap); max-width:900px; }
.legal h2{ font-size:clamp(1.15rem,2vw,1.6rem); margin:2.4rem 0 1rem; }
.legal h2:first-child{ margin-top:0; }
.legal p{ color:var(--ink-soft); font-size:.98rem; }
.legal p + p{ margin-top:.9rem; }

/* ============================================================
   29. CARTES EMPILÉES (méthode)
   ============================================================ */
@supports (position:sticky){
  @media (min-width:1001px){
    .steps.stack{ display:block; }
    .steps.stack li{
      position:sticky;
      top:calc(90px + var(--i,0) * 18px);
      margin-bottom:1.2rem;
      box-shadow:var(--shadow);
    }
  }
}

/* ============================================================
   30. APPARITION EN CASCADE
   (le délai est porté par .reveal.seen, section 16)
   ============================================================ */


/* ============================================================
   31. ADAPTATIF — compléments
   ============================================================ */
@media (max-width:1000px){
  .work-grid{ grid-template-columns:repeat(2,1fr); }
  .block, .post{ grid-template-columns:1fr; }
  .block:nth-child(even) figure{ order:0; }
  .form .row2{ grid-template-columns:1fr; gap:0; }
  .filters{ top:8px; }
  .gal-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
}
@media (max-width:640px){
  .cta-band{ margin:0 6px; border-radius:var(--r-lg); }
  .lightbox button{ width:44px; height:44px; }
  .lb-prev{ left:10px; } .lb-next{ right:10px; }
}

/* ============================================================
   32. ARTICLES + ZONES D'INTERVENTION
   ============================================================ */
.article-body .back{ display:inline-block; margin-bottom:1.6rem; padding-left:0; }
.article-body p:first-of-type{ font-size:1.12rem; color:var(--ink); }
.post h3 a{ transition:color .3s var(--ease); }
.post h3 a:hover{ color:var(--terra); }

.nearby{ padding:0 var(--pad) var(--gap); }
.nearby h2{ font-size:clamp(1.1rem,1.8vw,1.5rem); margin-bottom:1.4rem; }
.nearby-list{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.nearby-list a{
  border:1px solid rgba(26,26,26,.16);
  border-radius:999px; padding:.55em 1.1em;
  font-size:.86rem; font-weight:500;
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.nearby-list a:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.zones-hub h2{ margin-top:2.6rem; }
.zones-hub h2:first-of-type{ margin-top:1.5rem; }

/* ============================================================
   33. TITRES : APPARITION LETTRE PAR LETTRE
   Chaque lettre est enveloppée par refonte/app.js dans un masque
   et remonte depuis le bas. Durée volontairement courte : le titre
   est entièrement lisible en moins de 0,5 s.
   ============================================================ */
.split{ display:inline-block; }
.split .word{ display:inline-block; white-space:nowrap; }
.split .ltr{
  display:inline-block;
  transform:translateY(105%);
  opacity:0;
}
.split.go .ltr{
  transform:translateY(0);
  opacity:1;
  transition:transform .5s var(--ease), opacity .3s linear;
  transition-delay:calc(var(--n) * 18ms);
}
/* le masque qui découpe la lettre pendant qu'elle remonte */
.split .line{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.06em; }

@media (prefers-reduced-motion:reduce){
  .split .ltr{ transform:none; opacity:1; }
}

/* ============================================================
   34. AVIS GOOGLE
   ============================================================ */
/* deux actions empilées en fin de page : rendez-vous puis avis */
.cta-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.7rem;
}

.btn-review{
  background:transparent;
  color:var(--paper);
  border-color:rgba(251,250,248,.35);
}
.btn-review:hover{
  background:var(--paper);
  color:var(--ink);
  border-color:var(--paper);
}
.btn-review .stars{ color:#f5b544; letter-spacing:.06em; font-size:.9em; }

/* sur fond clair (page Avis), le bouton s'inverse */
.lede .btn-review,
.avis-cta .btn-review{
  color:var(--ink);
  border-color:rgba(26,26,26,.2);
}
.lede .btn-review:hover,
.avis-cta .btn-review:hover{ background:var(--ink); color:var(--paper); }

.avis-actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:.8rem;
  margin-top:2.2rem;
}
.avis-actions .stars{ color:#f5b544; letter-spacing:.06em; }

.avis-page{ padding:0 var(--pad) var(--gap); }
.avis-page .reviews-grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(1rem,2vw,1.6rem);
  margin-top:0;
}
.avis-page blockquote{
  background:var(--paper);
  border:1px solid rgba(26,26,26,.12);
  border-radius:var(--r-lg);
  padding:clamp(1.6rem,3vw,2.4rem);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.avis-page blockquote:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.avis-page blockquote p{ color:var(--ink-soft); max-width:none; }

.avis-tete{ display:flex; align-items:center; gap:1rem; margin-bottom:1.2rem; }
.avis-tete .avatar{
  width:46px; height:46px; flex:0 0 46px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--terra); color:#fff;
  font-weight:700; font-size:1.15rem;
}
.avis-tete cite{
  display:block; font-style:normal; font-weight:700;
  font-size:.95rem; letter-spacing:.02em;
}
.avis-tete .stars{ color:#f5b544; font-size:.85rem; letter-spacing:.08em; }

.avis-cta{
  text-align:center;
  padding:0 var(--pad) var(--gap);
}
.avis-cta h2{ margin-bottom:1rem; }
.avis-cta p{ margin:0 auto 2rem; color:var(--ink-soft); }

/* ============================================================
   35. ÉTAPES ILLUSTRÉES
   ============================================================ */
/* Chaque étape est un encadré blanc en deux colonnes : le texte à
   gauche, la photo à droite, où l'espace restait vide. */
.steps li{
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(26,26,26,.10);
  display:grid;
  grid-template-columns:1fr minmax(220px,34%);
  gap:clamp(1.5rem,3vw,3rem);
  align-items:stretch;
  min-height:250px;
}

.step-media{
  /* la figure précède le texte dans le HTML : sans colonne explicite
     elle occuperait la large colonne de gauche */
  grid-column:2;
  border-radius:var(--r);
  overflow:hidden;
  margin:0;
  min-height:180px;
}
.step-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .9s var(--ease), filter .5s var(--ease);
}
.steps li:hover .step-media img{ transform:scale(1.05); }

.step-text{ grid-column:1; grid-row:1; min-width:0; align-self:center; }
.step-text .num{ margin-bottom:.45rem; }
.step-text h3{ margin-bottom:.9rem; }
.step-text p + p{ margin-top:.9rem; }

/* sur écran étroit, la photo repasse au-dessus du texte */
@media (max-width:820px){
  .steps li{
    grid-template-columns:1fr;
    min-height:0;
    gap:1.4rem;
  }
  .step-media{ grid-column:1; grid-row:1; min-height:0; }
  .step-text{ grid-column:1; grid-row:2; }
  .step-media img{ aspect-ratio:16/9; height:auto; }
}

@media (max-width:640px){
  .avis-page .reviews-grid{ grid-template-columns:1fr; }
  .avis-actions{ flex-direction:column; align-items:stretch; }
  .avis-actions .btn{ width:100%; }
}

/* ============================================================
   36. CONFORT MOBILE
   ============================================================ */
@media (max-width:820px){

  /* Cibles tactiles : 44px minimum sur tout ce qui se touche.
     On ne touche pas à `display` ici : ces éléments ont déjà la
     bonne valeur, et la redéclarer ferait réapparaître le bouton
     d'en-tête que la règle mobile masque. */
  .btn,
  .filter,
  .nearby-list a,
  .menu a,
  .lightbox button{
    min-height:44px;
    align-items:center;
    justify-content:center;
  }
  .foot-cols a{ min-height:44px; display:flex; align-items:center; padding:.55rem 0; }

  /* les boutons de fin de page prennent toute la largeur : plus
     faciles à viser, et la hiérarchie reste lisible */
  .cta-actions{ width:100%; }
  .cta-actions .btn,
  .hero-cta .btn{ width:100%; }
  .hero-cta{ flex-direction:column; align-items:stretch; gap:.6rem; }

  /* respiration : le texte ne colle plus aux bords */
  body{ font-size:16px; line-height:1.68; }
  p{ max-width:none; }

  /* barre de filtres : défilement horizontal plutôt qu'un pavé
     de boutons qui repousse la galerie hors de l'écran */
  .filters{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    padding-bottom:.8rem;
  }
  .filters::-webkit-scrollbar{ display:none; }
  .filter{ flex:0 0 auto; }

  /* évite le zoom automatique d'iOS à la mise au point d'un champ */
  .form input, .form textarea, .form select{ font-size:16px; }

  /* la visionneuse occupe tout l'écran, boutons au pouce */
  .lightbox img{ max-width:94vw; max-height:76vh; }
  .lb-close{ top:14px; right:14px; }
  .lb-prev, .lb-next{ top:auto; bottom:20px; }
  .lb-prev{ left:24%; }
  .lb-next{ right:24%; }
  .lb-count{ bottom:88px; }
}

/* ------- Menu plein écran : accordéon, tout atteignable ---------
   Avant : 17 entrées à plat. Sur un écran de 375x812, quatre d'entre
   elles — dont Contact, le téléphone et l'email — tombaient hors champ,
   sans aucun indice qu'il fallait faire défiler.
   Après : 9 entrées de premier niveau, les deux groupes se dépliant à
   la demande, et le bloc de contact sorti de la zone défilante pour
   rester visible en permanence. ------------------------------------ */
@media (max-width:1000px){
  .menu{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    padding:0;
    overflow:hidden;              /* le défilement est interne */
    overscroll-behavior:contain;
  }

  /* zone défilante : elle seule bouge */
  .menu-liens{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding:5rem var(--pad) 1rem;
    display:flex;
    flex-direction:column;
  }

  /* entrées de premier niveau */
  .menu-liens > a,
  .menu-group{
    width:100%;
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:.7rem 0;
    border-bottom:1px solid rgba(255,255,255,.10);
    font-size:clamp(1.2rem,4.6vw,1.6rem);
    font-weight:700;
    letter-spacing:-.02em;
    color:#fff;
    background:none;
    border-left:none; border-right:none; border-top:none;
    font-family:inherit;
    text-align:left;
    cursor:pointer;
    margin:0;
  }

  /* Bouton de groupe : exactement la même allure que les autres
     entrées. L'ancienne règle .menu-group (hors media query) le
     mettait en petites capitales espacées, ce qui le faisait passer
     pour un intertitre et non pour un élément cliquable. */
  .menu-group{
    justify-content:space-between;
    text-transform:none;
    letter-spacing:-.02em;
    margin-top:0;
    padding-bottom:.7rem;
  }
  .menu-chevron{
    font-size:1.1rem;
    opacity:.6;
    margin-left:.6rem;
  }
  .menu-chevron{ transition:transform .3s var(--ease); }
  .menu-group[aria-expanded="true"] .menu-chevron{ transform:rotate(180deg); }
  .menu-group[aria-expanded="true"]{ color:var(--terra); }

  /* sous-menu replié par défaut */
  .menu-sous{ display:none; }
  .menu-sous.ouvert{
    display:block;
    animation:menu-deplie .32s var(--ease) both;
  }
  @keyframes menu-deplie{
    from{ opacity:0; transform:translateY(-6px); }
    to  { opacity:1; transform:none; }
  }

  .menu-sous .menu-sub{
    width:100%;
    min-height:48px;
    display:flex;
    align-items:center;
    padding:.55rem 0 .55rem 1.1rem;
    font-size:clamp(.98rem,3.6vw,1.1rem);
    font-weight:500;
    letter-spacing:0;
    color:rgba(255,255,255,.72);
    border-bottom:1px solid rgba(255,255,255,.07);
  }
  .menu-sous .menu-sub:last-child{ border-bottom:none; }

  /* contact épinglé : toujours visible, hors de la zone défilante */
  .menu-foot{
    flex:0 0 auto;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:.55rem;
    padding:1rem var(--pad) max(1.1rem, env(safe-area-inset-bottom));
    background:rgba(255,255,255,.04);
    border-top:1px solid rgba(255,255,255,.12);
  }
  .menu-foot a{
    padding:.8rem 1.2rem;
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    text-align:center;
    color:#fff;
    font-size:.95rem;
    min-height:48px;
    display:flex; align-items:center; justify-content:center;
  }
  .menu-foot a:first-child{
    background:var(--terra);
    border-color:var(--terra);
    font-weight:600;
  }

  /* Dégradé de bas : signale qu'il reste du contenu sous le pli.
     Collé en bas de la zone défilante, il ne s'affiche que lorsque
     celle-ci déborde vraiment (classe posée par app.js). */
  .menu-liens::after{
    content:'';
    position:sticky;
    bottom:0;
    display:block;
    height:52px;
    margin-top:-52px;
    background:linear-gradient(transparent, var(--ink) 85%);
    pointer-events:none;
    opacity:0;
    transition:opacity .3s var(--ease);
  }
  .menu-liens.defile::after{ opacity:1; }
}

/* En haut de page sur mobile, la barre est transparente : le logo
   doit donc tomber sur la même verticale que le texte de la page.
   Il démarrait 18px plus à gauche, collé au bord. */
@media (max-width:1000px){
  .head:not(.scrolled){
    inset:8px var(--marge-coque) auto var(--marge-coque);
    padding:8px var(--pad);
  }
}

/* Sur très petit écran, le logo se resserre */
@media (max-width:400px){
  .head-logo, .head-logo img{ width:92px; }
}

/* ============================================================
   37. CONSENTEMENT COOKIES + FORMULAIRE PROTÉGÉ
   ============================================================ */
/* Piège à robots : hors de l'écran et hors du parcours clavier,
   jamais masqué par display:none (certains automates l'ignorent). */
.pot-de-miel{
  position:absolute !important;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}

.recaptcha-text{
  margin-top:1.2rem;
  font-size:.78rem;
  line-height:1.5;
  color:var(--ink-soft);
  max-width:52ch;
}
.recaptcha-text a{
  text-decoration:underline;
  text-underline-offset:2px;
}
.recaptcha-text a:hover{ color:var(--terra); }


/* ============================================================
   38. BANDEAU DE CONSENTEMENT
   ============================================================ */
.ck-racine{
  position:fixed; inset:auto 0 0 0;
  z-index:300;
  display:none;
  padding:0 10px 10px;
}
.ck-racine.ck-visible{ display:block; }

.ck-bandeau,
.ck-panneau{
  max-width:1180px;
  margin:0 auto;
  background:rgba(26,26,26,.97);
  -webkit-backdrop-filter:blur(16px);
          backdrop-filter:blur(16px);
  color:var(--paper);
  border-radius:var(--r-lg);
  box-shadow:0 -8px 60px rgba(0,0,0,.35);
  animation:ck-monte .5s var(--ease) both;
}
@keyframes ck-monte{ from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }

.ck-bandeau{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem;
  padding:1.5rem 1.8rem;
}
.ck-texte{ flex:1 1 380px; min-width:0; }
.ck-texte h2{ font-size:1.05rem; margin-bottom:.5rem; letter-spacing:-.01em; }
.ck-texte p{ font-size:.88rem; line-height:1.6; color:rgba(251,250,248,.75); max-width:70ch; }
.ck-texte a{ color:var(--terra); text-decoration:underline; text-underline-offset:2px; }

.ck-actions{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }

.ck-btn{
  font:inherit; font-size:.86rem; font-weight:600; letter-spacing:.02em;
  padding:.82em 1.6em; border-radius:999px; cursor:pointer;
  border:1px solid transparent;
  transition:background-color .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .2s var(--ease);
  min-height:44px;
}
.ck-btn:active{ transform:scale(.97); }
.ck-btn-principal{ background:var(--terra); color:#fff; }
.ck-btn-principal:hover{ background:#fff; color:var(--ink); }
.ck-btn-secondaire{ background:rgba(255,255,255,.13); color:#fff; border-color:rgba(255,255,255,.22); }
.ck-btn-secondaire:hover{ background:#fff; color:var(--ink); }
.ck-btn-lien{ background:transparent; color:rgba(251,250,248,.8); text-decoration:underline; text-underline-offset:3px; }
.ck-btn-lien:hover{ color:#fff; }

/* --- panneau détaillé --- */
.ck-panneau{ padding:1.5rem 1.8rem; max-height:78vh; overflow-y:auto; }
.ck-panneau-tete{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.2rem; }
.ck-panneau-tete h2{ font-size:1.1rem; letter-spacing:-.01em; }
.ck-fermer{
  background:rgba(255,255,255,.12); color:#fff; border:none;
  width:40px; height:40px; border-radius:50%; cursor:pointer; font-size:.95rem;
}
.ck-fermer:hover{ background:rgba(255,255,255,.24); }

.ck-service{
  display:flex; align-items:flex-start; gap:1.2rem;
  padding:1.1rem 0;
  border-top:1px solid rgba(255,255,255,.12);
}
.ck-service-infos{ flex:1; min-width:0; }
.ck-service-infos strong{ display:block; font-size:.95rem; margin-bottom:.3rem; }
.ck-service-infos p{ font-size:.85rem; color:rgba(251,250,248,.75); line-height:1.55; max-width:none; }
.ck-service-infos small{ display:block; margin-top:.35rem; font-size:.76rem; color:rgba(251,250,248,.5); }

/* interrupteur */
.ck-bascule{ position:relative; flex:0 0 52px; width:52px; height:30px; cursor:pointer; }
.ck-bascule input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.ck-piste{
  position:absolute; inset:0; border-radius:999px;
  background:rgba(255,255,255,.2);
  transition:background-color .3s var(--ease);
}
.ck-piste::after{
  content:''; position:absolute; top:3px; left:3px;
  width:24px; height:24px; border-radius:50%; background:#fff;
  transition:transform .3s var(--ease);
}
.ck-bascule input:checked + .ck-piste{ background:var(--terra); }
.ck-bascule input:checked + .ck-piste::after{ transform:translateX(22px); }
.ck-bascule input:disabled + .ck-piste{ opacity:.45; cursor:not-allowed; }
.ck-bascule input:focus-visible + .ck-piste{ outline:2px solid var(--terra); outline-offset:3px; }

.ck-panneau-pied{ margin-top:1.4rem; display:flex; justify-content:flex-end; }

/* pastille de réouverture */
.ck-pastille{
  position:fixed; left:14px; bottom:14px; z-index:290;
  width:46px; height:46px; border-radius:50%;
  background:rgba(26,26,26,.85); color:#fff;
  border:1px solid rgba(255,255,255,.2);
  font-size:1.15rem; cursor:pointer;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:transform .25s var(--ease), background-color .25s var(--ease);
}
.ck-pastille:hover{ transform:scale(1.08); background:var(--terra); }

/* message d'attente à la place d'un contenu bloqué */
.cookie-attente{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.9rem; padding:2rem; text-align:center;
  background:rgba(26,26,26,.06);
  border:1px dashed rgba(26,26,26,.2);
  border-radius:var(--r); min-height:200px;
  font-size:.9rem; color:var(--ink-soft);
}

@media (max-width:700px){
  /* Le bandeau occupait 44% de l'écran à la première visite. On le
     resserre sans toucher au texte, qui a une portée légale. */
  .ck-bandeau{ padding:1.1rem 1.1rem 1.2rem; gap:.85rem; }
  .ck-texte h2{ font-size:.98rem; margin-bottom:.35rem; }
  .ck-texte p{ font-size:.82rem; line-height:1.5; }
  .ck-actions{ width:100%; flex-direction:column-reverse; align-items:stretch; gap:.5rem; }
  .ck-actions .ck-btn{ width:100%; min-height:46px; padding:.7em 1.2em; }
  /* « Personnaliser » en lien discret plutôt qu'en gros bouton */
  .ck-actions .ck-btn-lien{ min-height:40px; padding:.4em; font-size:.82rem; }
  .ck-panneau{ padding:1.2rem 1.1rem; max-height:82vh; }
  .ck-service{ gap:.9rem; padding:.9rem 0; }
  .ck-pastille{ left:10px; bottom:10px; }
  /* la pastille ne doit pas masquer le bandeau de consentement */
  .ck-racine.ck-visible ~ .ck-pastille{ display:none; }
}

/* ============================================================
   39. PAGE D'ERREUR 404
   ============================================================ */
.erreur{ padding:var(--gap) var(--pad); }

.erreur-chapo{
  font-size:clamp(1.05rem,1.5vw,1.25rem);
  color:var(--ink-soft);
  max-width:58ch;
}

.erreur-liens{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  margin:clamp(2.5rem,5vw,3.5rem) 0;
}

.erreur-carte{
  position:relative;
  border:1px solid rgba(26,26,26,.14);
  border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.2rem);
  transition:background-color .4s var(--ease), color .4s var(--ease),
             border-color .4s var(--ease), transform .4s var(--ease);
}
.erreur-carte:hover{
  background:var(--ink); color:var(--paper);
  border-color:var(--ink); transform:translateY(-4px);
}
.erreur-carte small{
  display:block; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; opacity:.6;
}
.erreur-carte strong{
  display:block; margin-top:.7rem;
  font-size:clamp(1.05rem,1.8vw,1.35rem);
  letter-spacing:-.02em; line-height:1.3;
}
.erreur-carte .arrow{
  position:absolute; top:1.5rem; right:1.5rem;
  transition:transform .4s var(--ease);
}
.erreur-carte:hover .arrow{ transform:translate(3px,-3px); }

.erreur-titre{
  font-size:clamp(1.1rem,1.8vw,1.45rem);
  margin-bottom:1.2rem;
}

.erreur-aide{
  margin-top:2.5rem;
  padding-top:1.6rem;
  border-top:1px solid rgba(26,26,26,.12);
  color:var(--ink-soft);
}
.erreur-aide a{
  color:var(--ink); font-weight:600;
  text-decoration:underline; text-underline-offset:3px;
}
.erreur-aide a:hover{ color:var(--terra); }

@media (max-width:820px){
  .erreur-liens{ grid-template-columns:1fr; }
}

/* ============================================================
   40. TITRE D'ACCROCHE SOUS LE BANDEAU NOIR
   Sur les pages intérieures, le titre placé juste sous l'en-tête
   noir reprenait la taille d'affichage de l'accueil (jusqu'à 80px)
   et écrasait le reste de la page. Il passe à une échelle de
   lecture. L'accueil n'a pas de bloc .lede : ses propres titres
   ne sont pas touchés.
   ============================================================ */
.lede .display{
  font-size:clamp(1.5rem, 3vw, 2.6rem);
  line-height:1.14;
  letter-spacing:-.02em;
}

/* ============================================================
   41. LIEN D'ÉVITEMENT (accessibilité)
   Permet d'atteindre le contenu sans parcourir tout le menu au
   clavier. Masqué visuellement, il apparaît à la première
   tabulation — exigence du RGAA et de la norme EN 301 549.
   ============================================================ */
.saut-contenu{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:400;
  background:var(--ink);
  color:var(--paper);
  padding:.9rem 1.5rem;
  border-radius:0 0 var(--r) 0;
  font-size:.9rem;
  font-weight:600;
}
.saut-contenu:focus{
  left:0;
  outline:2px solid var(--terra);
  outline-offset:-4px;
}
#contenu:focus{ outline:none; }

/* ============================================================
   42. CORRECTIFS MOBILE — lisibilité et cibles tactiles
   Relevés à 375px : quatre écarts aux recommandations WCAG.
   ============================================================ */
@media (max-width:820px){

  /* Le lien du logo ne faisait que 39px de haut : juste sous le
     seuil de 44px, et c'est le retour à l'accueil. */
  .head-logo{
    display:flex;
    align-items:center;
    min-height:44px;
    padding:3px 0;
  }

  /* Sur-titre du hero et étiquettes des cartes passaient sous 12px,
     seuil en dessous duquel la lecture devient pénible sur écran. */
  .eyebrow{ font-size:.8rem; letter-spacing:.16em; }
  .pill{ font-size:.8rem; padding:.6em 1em; }
  .pill em{ opacity:.75; }

  /* Lien de crédit du pied de page : surface tactile élargie sans
     casser la phrase qui l'entoure. */
  .foot-bar a{
    display:inline-block;
    padding:.5rem .2rem;
  }

  /* Espacement minimal entre cibles voisines, pour éviter les
     appuis à côté. */
  .foot-cols a + a{ margin-top:.15rem; }
}