@charset "utf-8";

/* ══════════════════════════════════════════════════════════════════════
   ONLY IT — feuille de style unique
   Bleu nuit + orange de marque, titres Oswald, texte Poppins.
   Aucune requête externe : polices servies depuis /assets/fonts/.
   ══════════════════════════════════════════════════════════════════════ */

/* ---------------------------------------------------------- 1. polices */

@font-face {
  font-family: "Oswald";
  src: url("fonts/oswald-400-600-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Oswald";
  src: url("fonts/oswald-400-600-latin-ext.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-400-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-500-latin-ext.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-600-latin-ext.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------- 2. jetons */

:root {
  --nuit: #080e1a;
  --nuit-2: #0d1626;
  --surface: #121e33;
  --surface-2: #182741;
  --bord: #22334f;

  --feu: #ff7029;
  --feu-clair: #ff9142;
  --feu-sombre: #d9541a;

  --texte: #e9eff9;
  --texte-doux: #9fb0c9;
  --texte-faible: #6e819c;

  --ok: #35d07f;

  --large: 1200px;
  --etroit: 760px;

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;

  --ombre: 0 18px 50px -12px rgb(0 0 0 / 0.55);
  --ombre-feu: 0 14px 40px -10px rgb(255 112 41 / 0.45);

  --tempo: 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------------------------------------ 3. base */

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

/* `[hidden]` doit l'emporter. La règle du navigateur a la même spécificité
   qu'une classe : la moindre déclaration `display:` dans cette feuille la
   neutralise, et l'élément reste visible malgré l'attribut. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--nuit);
  color: var(--texte);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.03rem);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* halo de fond, fixe, très léger */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60rem 40rem at 12% -10%, rgb(255 112 41 / 0.13), transparent 60%),
    radial-gradient(50rem 36rem at 100% 4%, rgb(56 118 255 / 0.10), transparent 62%);
  pointer-events: none;
}

h1, h2, h3, h4 {
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0.005em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 1.5rem + 3.2vw, 4.1rem); text-transform: uppercase; }
h2 { font-size: clamp(1.65rem, 1.25rem + 1.9vw, 2.7rem); text-transform: uppercase; }
h3 { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--feu-clair); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--feu); }

img { max-width: 100%; height: auto; display: block; }

strong { font-weight: 600; color: #fff; }

::selection { background: var(--feu); color: #fff; }

:focus-visible {
  outline: 3px solid var(--feu-clair);
  outline-offset: 3px;
  border-radius: 4px;
}

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--feu);
  color: #fff;
  padding: 0.8rem 1.3rem;
  z-index: 200;
  border-radius: 0 0 var(--r-s) 0;
  font-weight: 600;
}
.saut-contenu:focus { left: 0; color: #fff; }

/* ------------------------------------------------------ 4. mise en page */

.enveloppe {
  width: min(100% - 2.5rem, var(--large));
  margin-inline: auto;
}
.enveloppe--etroite { width: min(100% - 2.5rem, var(--etroit)); }

section { position: relative; }

.bande {
  padding: clamp(3.5rem, 2rem + 6vw, 7rem) 0;
}
.bande--sombre { background: var(--nuit-2); }
.bande--relief {
  background: linear-gradient(180deg, var(--nuit-2), var(--nuit));
}

/* biseau décoratif entre deux bandes */
.bande--biseau::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto;
  height: 70px;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%);
}

.entete-bande {
  max-width: 720px;
  margin-bottom: clamp(2rem, 1rem + 3vw, 3.4rem);
}
.entete-bande--centre { margin-inline: auto; text-align: center; }

.surtitre {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: "Oswald", sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--feu);
  margin-bottom: 0.9rem;
}
.surtitre::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--feu);
}
.entete-bande--centre .surtitre::after {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--feu);
}

.chapeau {
  color: var(--texte-doux);
  font-size: 1.06rem;
  max-width: 62ch;
}
.entete-bande--centre .chapeau { margin-inline: auto; }

/* ---------------------------------------------------------- 5. boutons */

.bouton {
  --fond: var(--feu);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.92rem 1.7rem;
  border: 0;
  border-radius: 999px;
  background: var(--fond);
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-size: 0.98rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--tempo), box-shadow var(--tempo);
  box-shadow: var(--ombre-feu);
}
.bouton::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, var(--feu-clair), var(--feu-sombre));
  opacity: 0;
  transition: opacity var(--tempo);
}
.bouton:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 20px 46px -10px rgb(255 112 41 / 0.6);
}
.bouton:hover::after { opacity: 1; }
.bouton:active { transform: translateY(-1px); }

/* Pas de liseré : un fond translucide suffit à identifier le bouton
   secondaire, et le trait bleuté jurait sur les fonds photo. */
.bouton--fantome {
  background: rgb(255 255 255 / 0.09);
  border: 0;
  color: var(--texte);
  box-shadow: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.bouton--fantome::after { background: rgb(255 255 255 / 0.16); }
.bouton--fantome:hover {
  color: #fff;
  box-shadow: none;
}

.bouton--petit { padding: 0.62rem 1.15rem; font-size: 0.86rem; }

.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

/* -------------------------------------------------------- 6. en-tête */

.entete {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition: box-shadow var(--tempo), padding var(--tempo);
  padding: 0.85rem 0;
  background: transparent;
}

/* PIÈGE : `backdrop-filter` posé sur .entete en ferait le bloc conteneur de
   ses descendants en position:fixed — le tiroir de menu se retrouverait
   enfermé dans la hauteur de l'en-tête. Le flou vit donc sur un
   pseudo-élément, qui n'englobe rien. */
.entete::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(8 14 26 / 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity var(--tempo);
}
.entete.est-collee::before { opacity: 1; }
.entete.est-collee {
  box-shadow: 0 1px 0 var(--bord), 0 12px 30px -18px #000;
  padding: 0.45rem 0;
}

.entete__interieur {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.marque {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex-shrink: 0;
}
.marque img {
  height: 42px;
  width: auto;
  transition: height var(--tempo);
}
.entete.est-collee .marque img { height: 34px; }

.navigation {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.navigation a {
  position: relative;
  padding: 0.55rem 0.85rem;
  border-radius: var(--r-s);
  color: var(--texte-doux);
  font-family: "Oswald", sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.25s;
  white-space: nowrap;
}
.navigation a::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.3rem;
  height: 2px;
  background: var(--feu);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tempo);
}
.navigation a:hover,
.navigation a[aria-current] { color: #fff; }
.navigation a:hover::after,
.navigation a[aria-current]::after { transform: scaleX(1); }

/* sous-menu */
.menu-deroulant { position: relative; }
.menu-deroulant__panneau {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  min-width: 280px;
  padding: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--r-m);
  box-shadow: var(--ombre);
  display: grid;
  gap: 0.1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
}
.menu-deroulant:hover .menu-deroulant__panneau,
.menu-deroulant:focus-within .menu-deroulant__panneau {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.menu-deroulant__panneau a {
  font-family: "Poppins", sans-serif;
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: 0;
  padding: 0.5rem 0.7rem;
}
.menu-deroulant__panneau a::after { display: none; }
.menu-deroulant__panneau a:hover { background: var(--surface-2); }

.entete__actions { display: flex; align-items: center; gap: 0.6rem; }

.bascule-menu {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--bord);
  border-radius: var(--r-s);
  background: rgb(255 255 255 / 0.04);
  cursor: pointer;
  position: relative;
}
.bascule-menu span,
.bascule-menu span::before,
.bascule-menu span::after {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 2px;
  background: var(--texte);
  transform: translateX(-50%);
  transition: transform 0.3s, opacity 0.2s;
}
.bascule-menu span { top: 50%; margin-top: -1px; }
.bascule-menu span::before { content: ""; top: -6px; left: 0; transform: none; }
.bascule-menu span::after { content: ""; top: 6px; left: 0; transform: none; }
.bascule-menu[aria-expanded="true"] span { background: transparent; }
.bascule-menu[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.bascule-menu[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* ------------------------------------------------------------ 7. héros */

.heros {
  position: relative;
  min-height: min(94svh, 900px);
  display: flex;
  align-items: center;
  padding: 8rem 0 4rem;
  overflow: hidden;
}

.heros__fond {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.heros__fond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
  opacity: 0.62;
  transform: scale(1.06);
  animation: derive 26s ease-in-out infinite alternate;
}
.heros__fond::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, var(--nuit) 16%, rgb(8 14 26 / 0.92) 42%, rgb(8 14 26 / 0.42) 72%, rgb(8 14 26 / 0.25)),
    linear-gradient(0deg, var(--nuit) 2%, transparent 40%);
}

@keyframes derive {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-2%, -2%, 0); }
}

/* grille technique animée */
.heros__grille {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgb(255 112 41 / 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 112 41 / 0.07) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 60% at 30% 40%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 60% at 30% 40%, #000, transparent 75%);
  animation: glisse-grille 22s linear infinite;
}
@keyframes glisse-grille {
  to { background-position: 64px 64px; }
}

.heros__contenu { max-width: 700px; position: relative; }

.heros h1 { margin-bottom: 0.35em; }
.heros h1 .accent {
  color: transparent;
  background: linear-gradient(100deg, var(--feu-clair), var(--feu) 55%, #ffb37a);
  -webkit-background-clip: text;
  background-clip: text;
}

.heros__accroche {
  font-size: clamp(1.02rem, 0.95rem + 0.5vw, 1.22rem);
  color: var(--texte-doux);
  max-width: 54ch;
  margin-bottom: 2rem;
}

.pastille-dispo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.95rem 0.4rem 0.6rem;
  margin-bottom: 1.4rem;
  border: 1px solid var(--bord);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.04);
  font-size: 0.86rem;
  color: var(--texte-doux);
}
.pastille-dispo b { color: var(--texte); font-weight: 500; }
.point-vif {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 0 rgb(53 208 127 / 0.7);
  animation: pulsation 2.4s ease-out infinite;
}
@keyframes pulsation {
  70% { box-shadow: 0 0 0 12px rgb(53 208 127 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(53 208 127 / 0); }
}

.heros__pied {
  margin-top: 2.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 2.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--bord);
}
.heros__pied div { min-width: 140px; }
.heros__pied dt {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-faible);
  margin-bottom: 0.2rem;
}
.heros__pied dd {
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-size: 1.2rem;
  color: #fff;
}
.heros__pied a { color: #fff; text-decoration: none; }
.heros__pied a:hover { color: var(--feu-clair); }

/* ------------------------------------------------------------ 8. cartes */

.grille {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
}
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--r-l);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--tempo), border-color var(--tempo), box-shadow var(--tempo);
}
.carte::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, var(--feu), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--tempo);
  pointer-events: none;
}
a.carte:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: var(--ombre);
}
a.carte:hover::after { opacity: 1; }

.carte__visuel {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-2);
}
.carte__visuel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
a.carte:hover .carte__visuel img { transform: scale(1.07); }
.carte__visuel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgb(18 30 51 / 0.95));
}

.carte__etiquette {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 2;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: rgb(8 14 26 / 0.75);
  backdrop-filter: blur(6px);
  border: 1px solid var(--bord);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--feu-clair);
}

.carte__corps {
  padding: 1.3rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.55rem;
}
.carte__corps h3 { margin: 0; }
.carte__corps p { color: var(--texte-doux); font-size: 0.93rem; margin: 0; }

.carte__pied {
  margin-top: auto;
  padding-top: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.carte__prix {
  font-family: "Oswald", sans-serif;
  font-size: 1.05rem;
  color: #fff;
}
.carte__prix small {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-faible);
}
.fleche {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--bord);
  color: var(--feu);
  transition: background var(--tempo), transform var(--tempo), border-color var(--tempo);
}
a.carte:hover .fleche {
  background: var(--feu);
  border-color: var(--feu);
  color: #fff;
  transform: translateX(4px);
}

/* -------------------------------------------------------- 9. chiffres */

.chiffre {
  padding: 1.6rem 1.2rem;
  text-align: center;
  border: 1px solid var(--bord);
  border-radius: var(--r-m);
  background: linear-gradient(180deg, var(--surface), transparent);
}
.chiffre b {
  display: block;
  font-family: "Oswald", sans-serif;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  font-weight: 600;
  line-height: 1;
  color: var(--feu);
  margin-bottom: 0.4rem;
}
.chiffre span { font-size: 0.88rem; color: var(--texte-doux); }

/* -------------------------------------------------- 10. corps éditorial */

.article > * + * { margin-top: 1.1rem; }
.article h2 { margin-top: 2.6rem; }
.article h3 { margin-top: 1.8rem; color: #fff; }
.article ul, .article ol { padding-left: 1.3rem; color: var(--texte-doux); }
.article li { margin-bottom: 0.5rem; }
.article li::marker { color: var(--feu); }

.liste-cochee { list-style: none; padding-left: 0; }
.liste-cochee li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.75rem;
}
.liste-cochee li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--feu);
  border-bottom: 2px solid var(--feu);
  transform: rotate(-45deg);
}

/* étapes numérotées */
.etapes { list-style: none; padding: 0; margin: 0; counter-reset: pas; }
.etapes li {
  position: relative;
  counter-increment: pas;
  padding: 0 0 1.6rem 3.4rem;
  margin: 0;
}
.etapes li::before {
  content: counter(pas, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--bord);
  background: var(--surface);
  font-family: "Oswald", sans-serif;
  font-size: 0.86rem;
  color: var(--feu);
}
.etapes li::after {
  content: "";
  position: absolute;
  left: 1.17rem;
  top: 2.6rem;
  bottom: 0.3rem;
  width: 1px;
  background: linear-gradient(var(--bord), transparent);
}
.etapes li:last-child { padding-bottom: 0; }
.etapes li:last-child::after { display: none; }
.etapes b { display: block; color: #fff; font-weight: 600; margin-bottom: 0.2rem; }
.etapes p { color: var(--texte-doux); margin: 0; font-size: 0.95rem; }

/* ------------------------------------------------------- 11. tarifs */

.tableau-tarifs {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.tableau-tarifs caption {
  text-align: left;
  padding-bottom: 0.8rem;
  color: var(--texte-faible);
  font-size: 0.85rem;
}
.tableau-tarifs th,
.tableau-tarifs td {
  padding: 0.95rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--bord);
  vertical-align: top;
}
.tableau-tarifs thead th {
  font-family: "Oswald", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-faible);
  font-weight: 400;
}
.tableau-tarifs tbody tr { transition: background 0.25s; }
.tableau-tarifs tbody tr:hover { background: rgb(255 255 255 / 0.03); }
.tableau-tarifs td:last-child,
.tableau-tarifs th:last-child { text-align: right; white-space: nowrap; }
.tableau-tarifs .prix {
  font-family: "Oswald", sans-serif;
  font-size: 1.1rem;
  color: var(--feu);
}
.tableau-tarifs .detail {
  display: block;
  color: var(--texte-faible);
  font-size: 0.85rem;
  margin-top: 0.2rem;
  white-space: normal;
}
.enrobage-tableau { overflow-x: auto; }

.encart {
  padding: 1.2rem 1.4rem;
  border-left: 3px solid var(--feu);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  background: rgb(255 112 41 / 0.07);
  color: var(--texte-doux);
  font-size: 0.95rem;
}
.encart strong { color: #fff; }

/* -------------------------------------------------- 12. fil d'Ariane */

.ariane {
  padding-top: 7.5rem;
  font-size: 0.85rem;
  color: var(--texte-faible);
}
.ariane ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
}
.ariane li::after { content: "›"; margin-left: 0.5rem; color: var(--bord); }
.ariane li:last-child::after { content: ""; }
.ariane a { color: var(--texte-doux); text-decoration: none; }
.ariane a:hover { color: var(--feu); }

.entete-page { padding: 1.5rem 0 clamp(2rem, 1rem + 3vw, 3.5rem); }

/* ------------------------------------------------------- 13. contact */

.bloc-contact {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.tuile-contact {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.3rem;
  border: 1px solid var(--bord);
  border-radius: var(--r-m);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--tempo), transform var(--tempo);
}
.tuile-contact:hover { border-color: var(--feu); transform: translateY(-4px); color: inherit; }
.tuile-contact svg { flex-shrink: 0; color: var(--feu); }
.tuile-contact b { display: block; color: #fff; font-weight: 600; }
.tuile-contact span { color: var(--texte-doux); font-size: 0.9rem; }

.formulaire {
  display: grid;
  gap: 1.1rem;
}
.champ { display: grid; gap: 0.4rem; }
/* `>` volontaire : les pastilles de réponse sont elles aussi des <label>,
   imbriqués dans .options. Sans le sélecteur direct, elles héritaient du
   style d'intitulé — capitales, petit corps, gris pâle. */
.champ > label {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-faible);
}
.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--bord);
  border-radius: var(--r-s);
  background: var(--nuit-2);
  color: var(--texte);
  font: inherit;
  transition: border-color 0.25s, background 0.25s;
}
.champ textarea { min-height: 150px; resize: vertical; }
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  border-color: var(--feu);
  background: var(--surface);
}
.champ--double { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .champ--double { grid-template-columns: 1fr; } }

.champ em {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--texte-faible);
  font-size: 0.9em;
}

.saisie {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--bord);
  border-radius: var(--r-s);
  background: var(--nuit-2);
  color: var(--texte);
  font: inherit;
  transition: border-color 0.25s, background 0.25s;
}
.saisie:focus { border-color: var(--feu); background: var(--surface); }
input[type="file"].saisie { padding: 0.7rem; cursor: pointer; }
input[type="file"].saisie::file-selector-button {
  margin-right: 0.9rem;
  padding: 0.45rem 0.9rem;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--texte);
  font: inherit;
  cursor: pointer;
}
input[type="file"].saisie::file-selector-button:hover { background: var(--feu); color: #fff; }

/* ---------------------------------- options radio / cases, façon pastilles */

.options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.options--multi { gap: 0.55rem; }

.option {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.62rem 1.05rem;
  border: 1px solid var(--bord);
  border-radius: 999px;
  background: var(--nuit-2);
  cursor: pointer;
  transition: border-color var(--tempo), background var(--tempo), color var(--tempo);
  font-size: 0.94rem;
}
.option:hover { border-color: var(--feu-clair); }
.option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.option__marque {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  border: 1.5px solid var(--bord);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: border-color var(--tempo), background var(--tempo);
}
.option input[type="checkbox"] + .option__marque { border-radius: 5px; }
.option__marque::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  scale: 0;
  transition: scale var(--tempo);
}
.option input[type="checkbox"] + .option__marque::after {
  width: 9px;
  height: 5px;
  border-radius: 0;
  background: transparent;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  rotate: -45deg;
  translate: 0 -1px;
}
.option input:checked + .option__marque { border-color: var(--feu); background: var(--feu); }
.option input:checked + .option__marque::after { scale: 1; }
.option:has(input:checked) {
  border-color: var(--feu);
  background: rgb(255 112 41 / 0.12);
  color: #fff;
}
.option input:focus-visible + .option__marque {
  outline: 3px solid var(--feu-clair);
  outline-offset: 3px;
}

/* Le choix du service : pastilles pleine largeur, plus lisibles que 7 puces */
.option--service {
  flex: 1 1 260px;
  border-radius: var(--r-m);
  padding: 0.9rem 1.1rem;
}

/* ------------------------------------------------------ pièces jointes */

.liste-fichiers {
  list-style: none;
  padding: 0;
  margin: 0.8rem 0 0;
  display: grid;
  gap: 0.45rem;
}
.liste-fichiers li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--bord);
  border-radius: var(--r-s);
  background: var(--nuit-2);
  font-size: 0.9rem;
}
.liste-fichiers small { color: var(--texte-faible); margin-left: auto; }
.liste-fichiers button {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--texte-doux);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.liste-fichiers button:hover { background: #b3261e; color: #fff; }

.formulaire__section { margin-top: clamp(2rem, 1.4rem + 2vw, 3rem); }
.formulaire__section > h2 {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  margin-bottom: 1.2rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--bord);
}

/* Les intitulés du formulaire passent en orange de marque : ils portent la
   question, c'est ce que l'œil doit accrocher en premier. */
[data-formulaire-erp] .champ > label {
  color: var(--feu);
  font-size: 0.88rem;
  letter-spacing: 0.06em;
}
[data-formulaire-erp] .champ > label em { color: var(--texte-faible); }

/* Une étape chasse la précédente : elle entre par la droite. */
.etape { animation: etape-entre 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
.etape--retour { animation-name: etape-entre-inverse; }
@keyframes etape-entre {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes etape-entre-inverse {
  from { opacity: 0; transform: translateX(-22px); }
  to   { opacity: 1; transform: none; }
}
.etape__question {
  font-family: "Oswald", sans-serif;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.15;
  color: #fff;
  margin: 0 0 0.35rem;
}
.etape__aide { color: var(--texte-doux); font-size: 0.92rem; margin: 0 0 1.5rem; }
.etape__rang {
  display: inline-block;
  font-family: "Oswald", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--feu);
  margin-bottom: 0.6rem;
}
.etape .options { gap: 0.7rem; }
.etape .option { padding: 0.8rem 1.3rem; font-size: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .etape, .etape--retour { animation: none; }
}

/* --------------------------------- récapitulatif en superposition */

.voile-recap {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: rgb(4 8 15 / 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: voile-apparait 0.25s ease both;
  overflow-y: auto;
}
@keyframes voile-apparait { from { opacity: 0; } to { opacity: 1; } }
/* Colonne flexible : seul le corps défile, la barre de boutons reste posée
   en bas. Une version précédente utilisait `position: sticky` avec un
   `bottom` négatif — ce qui collait le bouton d'envoi SOUS la zone visible,
   donc hors de l'écran sur un portable. */
.fenetre-recap {
  width: min(100%, 640px);
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--nuit-2);
  border: 1px solid var(--feu);
  border-radius: var(--r-l);
  box-shadow: 0 30px 80px -20px #000;
  animation: fenetre-monte 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.fenetre-recap__corps {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.3rem, 1rem + 1.4vw, 2.2rem);
}
@keyframes fenetre-monte {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.fenetre-recap .recap {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
}
.fenetre-recap > .groupe-boutons {
  flex: 0 0 auto;
  margin: 0;
  padding: 1.1rem clamp(1.3rem, 1rem + 1.4vw, 2.2rem);
  border-top: 1px solid var(--bord);
  background: var(--nuit-2);
  flex-wrap: nowrap;
}
.fenetre-recap > .groupe-boutons .bouton { flex: 1; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .voile-recap, .fenetre-recap { animation: none; }
}

/* Le fil d'avancement : combien de questions répondues sur combien. */
.avancement {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.4rem;
  font-size: 0.85rem;
  color: var(--texte-faible);
}
.avancement__piste {
  flex: 1;
  height: 4px;
  border-radius: 99px;
  background: var(--surface-2);
  overflow: hidden;
}
.avancement__jauge {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--feu-sombre), var(--feu-clair));
  transition: width 0.4s var(--tempo);
}

/* ------------------------------------------------- récapitulatif d'envoi */

.recap {
  border: 1px solid var(--feu);
  border-radius: var(--r-l);
  background: linear-gradient(160deg, rgb(255 112 41 / 0.10), rgb(255 112 41 / 0.02));
  padding: clamp(1.3rem, 1rem + 1.2vw, 2rem);
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
}
.recap__titre {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: "Oswald", sans-serif;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  margin: 0 0 0.3rem;
}
.recap__titre svg { width: 22px; height: 22px; color: var(--feu); flex-shrink: 0; }
.recap__intro { color: var(--texte-doux); font-size: 0.9rem; margin: 0 0 1.3rem; }

.recap dl { margin: 0; display: grid; gap: 0; }
.recap dt {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--feu);
  padding-top: 0.85rem;
}
.recap dd {
  margin: 0.25rem 0 0.85rem;
  color: var(--texte);
  border-bottom: 1px solid rgb(255 255 255 / 0.07);
  padding-bottom: 0.85rem;
}
.recap dd:last-of-type { border-bottom: 0; }
.recap dd ul { margin: 0; padding-left: 1.1rem; }
.recap dd li::marker { color: var(--feu); }
.recap__vide { color: var(--texte-faible); font-style: italic; }

.message-erreur {
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-s);
  border-left: 3px solid #e5484d;
  background: rgb(229 72 77 / 0.12);
  color: #ffd7d8;
  font-size: 0.94rem;
}

.succes {
  text-align: center;
  padding: clamp(2rem, 1.5rem + 3vw, 3.5rem) 1.5rem;
  border: 1px solid var(--bord);
  border-radius: var(--r-l);
  background: linear-gradient(180deg, var(--surface), transparent);
}
.succes__coche {
  width: 68px;
  height: 68px;
  margin: 0 auto 1.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgb(53 208 127 / 0.15);
  color: var(--ok);
}
.succes__coche svg { width: 34px; height: 34px; }

/* ------------------------------------ 12 bis. deux colonnes texte/image */

/* Utilisé par la section « méthode » de l'accueil. Une grille en `auto-fit`
   laissait deux colonnes de 330 px sur tablette : le texte venait coller
   l'image. Ici le passage à une colonne est explicite. */
/* L'image reste à droite tant qu'il y a la place. Le texte respire parce
   qu'il a la colonne la plus large et que l'écart est franc — pas parce
   qu'on empile. L'empilement est réservé au vrai petit écran. */
.duo {
  display: grid;
  gap: clamp(2.4rem, 1rem + 4vw, 5rem);
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  align-items: center;
}
.duo__visuel {
  border-radius: var(--r-l);
  border: 1px solid var(--bord);
  overflow: hidden;
}
/* Recadrée : la source est carrée, elle dominerait la section une fois
   empilée et déséquilibrerait la colonne de droite sur grand écran. */
.duo__visuel img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

@media (max-width: 820px) {
  .duo { grid-template-columns: 1fr; gap: 2.2rem; }
  .duo__visuel { max-width: 440px; margin-inline: auto; }
  .duo__visuel img { aspect-ratio: 4 / 3; }
}

/* ------------------------------------------------ 13 bis. domaines */

.grille-domaines {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr));
}

/* Rail horizontal : les sept domaines sur une seule ligne qui défile. */
.rail {
  position: relative;
}
.rail__piste {
  display: flex;
  gap: 1.1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  /* la marge intérieure évite que l'ombre au survol soit rognée */
  padding: 0.5rem 0.3rem 0.9rem;
  margin: -0.5rem -0.3rem -0.9rem;
  overscroll-behavior-x: contain;

  /* Aucune barre de défilement affichée : les flèches, le voile dégradé et
     la tuile coupée signalent déjà qu'on peut faire glisser. Le défilement
     reste entier — doigt, molette, flèches, clavier.
     Masquer la barre supprime aussi la barre VERTICALE que le navigateur
     ajoutait d'office : `overflow-x: auto` fait basculer `overflow-y` en
     `auto`, et elle n'a jamais servi à rien ici. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rail__piste::-webkit-scrollbar { width: 0; height: 0; display: none; }

.rail__piste > .tuile-domaine {
  flex: 0 0 clamp(216px, 22vw, 268px);
  scroll-snap-align: start;
}

/* Voiles dégradés aux extrémités, pour signaler qu'il y a une suite. */
.rail::before,
.rail::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 64px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s;
}
.rail::before {
  left: -0.3rem;
  background: linear-gradient(90deg, var(--nuit), transparent);
}
.rail::after {
  right: -0.3rem;
  background: linear-gradient(270deg, var(--nuit), transparent);
}
.rail[data-debut="0"]::before { opacity: 1; }
.rail[data-fin="0"]::after { opacity: 1; }

/* Une flèche de chaque côté, centrée verticalement sur les tuiles. */
.rail__bouton {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 3;
  width: 46px;
  height: 46px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--bord);
  border-radius: 50%;
  background: rgb(18 30 51 / 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--texte);
  cursor: pointer;
  box-shadow: 0 10px 26px -10px #000;
  transition: background var(--tempo), color var(--tempo),
              border-color var(--tempo), opacity 0.25s, scale var(--tempo);
}
.rail__bouton--prec { left: -0.9rem; }
.rail__bouton--suiv { right: -0.9rem; }
.rail__bouton:hover:not(:disabled) {
  background: var(--feu);
  border-color: var(--feu);
  color: #fff;
  scale: 1.08;
}
.rail__bouton:disabled {
  opacity: 0;
  pointer-events: none;
}
.rail__bouton svg { width: 18px; height: 18px; }

/* Sans JavaScript les flèches ne servent à rien : on ne les montre pas.
   Sur écran tactile non plus — on fait glisser au doigt. */
.rail__bouton { display: none; }
.js .rail__bouton { display: grid; }
@media (hover: none) { .js .rail__bouton { display: none; } }

/* Sous 1240 px, les flèches déborderaient de l'enveloppe : on les rentre. */
@media (max-width: 1300px) {
  .rail__bouton--prec { left: 0.2rem; }
  .rail__bouton--suiv { right: 0.2rem; }
}

.tuile-domaine {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.9rem 1.3rem 1.6rem;
  text-align: center;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--bord);
  border-radius: var(--r-l);
  background: linear-gradient(180deg, var(--surface), rgb(18 30 51 / 0.35));
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--tempo), border-color var(--tempo), box-shadow var(--tempo);
}
.tuile-domaine::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -40%;
  left: 50%;
  width: 220px;
  height: 220px;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 112 41 / 0.22), transparent);
  opacity: 0;
  transition: opacity var(--tempo);
}
a.tuile-domaine:hover {
  transform: translateY(-6px);
  border-color: var(--feu);
  box-shadow: var(--ombre);
  color: inherit;
}
a.tuile-domaine:hover::before { opacity: 1; }

/* Le médaillon octogonal reprend la charte de la bannière ONLY.IT. */
.tuile-domaine__ecusson {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  color: var(--feu);
  background: linear-gradient(160deg, var(--surface-2), var(--nuit-2));
  border: 1px solid var(--bord);
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  transition: color var(--tempo), background var(--tempo), scale var(--tempo);
}
a.tuile-domaine:hover .tuile-domaine__ecusson {
  color: #fff;
  background: linear-gradient(160deg, var(--feu), var(--feu-sombre));
  scale: 1.06;
}
.tuile-domaine__ecusson svg { width: 38px; height: 38px; }

.tuile-domaine h3 {
  margin: 0.3rem 0 0;
  font-size: 1.12rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.tuile-domaine p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--texte-doux);
}
.tuile-domaine__compte {
  margin-top: auto;
  padding-top: 0.7rem;
  font-family: "Oswald", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--feu);
}
.tuile-domaine--attente {
  opacity: 0.9;
}
.tuile-domaine--attente .tuile-domaine__compte { color: var(--texte-faible); }

/* Couverture d'une page de domaine */
.couverture {
  position: relative;
  aspect-ratio: 21 / 8;
  max-height: 380px;
  border-radius: var(--r-l);
  overflow: hidden;
  border: 1px solid var(--bord);
}
.couverture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.couverture::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(8 14 26 / 0.28), rgb(8 14 26 / 0.72));
}
@media (max-width: 620px) { .couverture { aspect-ratio: 16 / 10; } }

/* --------------------------------------------------- 14. appel final */

.appel {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-l);
  padding: clamp(2.2rem, 1.5rem + 3vw, 3.8rem);
  background: linear-gradient(120deg, #16233c, #0d1626 60%);
  border: 1px solid var(--bord);
  text-align: center;
}
.appel::before {
  content: "";
  position: absolute;
  inset: -60% -20% auto;
  height: 320px;
  background: radial-gradient(closest-side, rgb(255 112 41 / 0.28), transparent);
  animation: respire 9s ease-in-out infinite alternate;
}
@keyframes respire {
  to { transform: translateY(40px) scale(1.15); }
}
.appel > * { position: relative; }
.appel .groupe-boutons { justify-content: center; margin-top: 1.6rem; }

/* ------------------------------------------------------ 15. pied de page */

.pied {
  background: var(--nuit-2);
  border-top: 1px solid var(--bord);
  padding: clamp(2.8rem, 2rem + 3vw, 4.5rem) 0 1.6rem;
  font-size: 0.92rem;
}
.pied__grille {
  display: grid;
  gap: 2.4rem;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  margin-bottom: 2.6rem;
}

.pied h4 {
  font-family: "Oswald", sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--feu);
  margin: 0 0 1rem;
}

/* Volets du pied de page.
   Sur grand écran ils restent ouverts et le résumé n'est qu'un titre :
   ni flèche, ni curseur, ni cible de clic. */
.pied__bloc > summary {
  list-style: none;
  cursor: default;
}
.pied__bloc > summary::-webkit-details-marker { display: none; }
.pied__bloc > summary::marker { content: ""; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.pied a { color: var(--texte-doux); text-decoration: none; }
.pied a:hover { color: var(--feu); }
.pied img { height: 40px; width: auto; margin-bottom: 1rem; }
.pied p { color: var(--texte-faible); }

.pied__bas {
  padding-top: 1.6rem;
  border-top: 1px solid var(--bord);
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.6rem;
  align-items: center;
  justify-content: space-between;
  color: var(--texte-faible);
  font-size: 0.85rem;
}

/* barre d'action fixe sur mobile */
.barre-mobile {
  display: none;
  position: fixed;
  inset: auto 0 0;
  z-index: 90;
  padding: 0.6rem 0.8rem calc(0.6rem + env(safe-area-inset-bottom));
  background: rgb(8 14 26 / 0.94);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--bord);
  gap: 0.6rem;
}
.barre-mobile .bouton { flex: 1; padding: 0.75rem 1rem; font-size: 0.86rem; }

/* --------------------------------------------------- 16. animations */

/* L'état masqué n'existe QUE si le script a pu poser .js sur <html>.
   Sans JavaScript — ou si le script échoue — tout reste visible. */
.js [data-anim] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--tempo), transform 0.75s var(--tempo);
  transition-delay: var(--retard, 0s);
}
.js [data-anim].est-visible {
  opacity: 1;
  transform: none;
}
.js [data-anim="cote"] { transform: translateX(-30px); }
.js [data-anim="zoom"] { transform: scale(0.94); }
.js [data-anim].est-visible[data-anim="cote"],
.js [data-anim].est-visible[data-anim="zoom"] { transform: none; }

/* -------------------------------------------------- 17. adaptations */

@media (max-width: 1040px) {
  .navigation {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 110;              /* au-dessus du voile (99) et de l'en-tête (100) */
    width: min(86vw, 360px);
    max-width: 100vw;
    flex-direction: column;
    align-items: stretch;
    gap: 0.1rem;
    margin: 0;
    padding: 1.2rem 1.1rem calc(2rem + env(safe-area-inset-bottom));
    background: var(--nuit-2);
    border-left: 1px solid var(--bord);
    box-shadow: -20px 0 60px -20px #000;
    transform: translateX(101%);
    transition: transform var(--tempo);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .navigation.est-ouverte { transform: none; }

  /* Bandeau du tiroir : laisse la place au bouton de fermeture, qui reste
     celui de l'en-tête (il passe en croix). La réserve à droite est calée sur
     la largeur du bouton (44px) plus sa marge : sans elle, le mot « Menu »
     passerait dessous quand le tiroir est ouvert. */
  .navigation::before {
    content: "Menu";
    display: block;
    flex: 0 0 auto;
    padding: 0.6rem 4rem 1.1rem 0.6rem;
    font-family: "Oswald", sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--texte-faible);
    border-bottom: 1px solid var(--bord);
    margin-bottom: 0.7rem;
  }

  .navigation a {
    padding: 0.8rem 0.6rem;
    font-size: 1.02rem;
    border-radius: var(--r-s);
  }
  .navigation a::after { display: none; }
  .navigation a:hover,
  .navigation a[aria-current] { background: var(--surface); }

  .menu-deroulant { display: flex; flex-direction: column; }
  .menu-deroulant__panneau {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 0.5rem;
    margin: 0 0 0.3rem 1.1rem;
    border-left: 1px solid var(--bord);
  }
  .menu-deroulant__panneau a {
    padding: 0.55rem 0.8rem;
    font-size: 0.94rem;
    color: var(--texte-faible);
  }

  /* Le bouton hamburger doit rester cliquable par-dessus le tiroir ouvert.
     Son fond est opaque : posé au-dessus du tiroir, un fond translucide
     laisserait voir le bandeau « Menu » au travers. */
  .bascule-menu {
    display: block;
    position: relative;
    z-index: 120;
    background: var(--nuit-2);
  }
  .entete__actions .bouton { display: none; }

  /* Le bouton se cale à droite de l'écran. `margin-left:auto` vit normalement
     sur .navigation, mais celle-ci passe en `position:fixed` ici : sortie du
     flux, elle n'écarte plus rien et le bouton se retrouvait collé au logo. */
  .entete__actions { margin-left: auto; }
  .barre-mobile { display: flex; }
  body { padding-bottom: 4.8rem; }

  .voile {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgb(4 8 15 / 0.65);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }
  .voile.est-visible { opacity: 1; visibility: visible; }

  /* Deux colonnes sur tablette plutôt que trois cartes serrées. */
  .grille { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }

  /* ── Pied de page en volets déroulants ─────────────────────────────
     Trois listes empilées prennent trop de hauteur sur téléphone ; on les
     replie. site.js retire l'attribut `open` sous ce seuil. */
  .pied__grille {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 1.8rem;
  }
  .pied__marque { margin-bottom: 1.6rem; }

  .pied__bloc { border-top: 1px solid var(--bord); }
  .pied__bloc > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0.2rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .pied__bloc > summary h4 { margin: 0; color: var(--feu); }
  .pied__bloc > summary::after {
    content: "";
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    border-right: 2px solid var(--feu);
    border-bottom: 2px solid var(--feu);
    rotate: 45deg;
    translate: 0 -2px;
    transition: rotate 0.3s var(--tempo), translate 0.3s var(--tempo);
  }
  .pied__bloc[open] > summary::after { rotate: -135deg; translate: 0 2px; }
  .pied__bloc[open] > summary h4 { color: var(--feu); }
  .pied__bloc > ul { padding: 0.2rem 0.2rem 1.2rem; gap: 0.9rem; }
  .pied__bloc > ul a { display: inline-block; padding: 0.15rem 0; }
}

/* Pages prestation : texte à gauche, visuel et tarifs à droite.
   L'écart était trop mince et la colonne de texte trop large — les lignes
   venaient buter contre l'image. La colonne de droite est resserrée, l'écart
   franchement élargi, et la mesure du texte plafonnée pour rester lisible. */
.colonnes-prestation {
  display: grid;
  gap: clamp(2.5rem, 1rem + 5vw, 6rem);
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  align-items: start;
}
.colonnes-prestation .article { max-width: 68ch; }

@media (max-width: 980px) {
  .colonnes-prestation { grid-template-columns: 1fr; gap: 2.4rem; }
  .colonnes-prestation aside { position: static !important; max-width: 520px; }
  .colonnes-prestation .article { max-width: none; }
}

@media (max-width: 620px) {
  .heros { min-height: auto; padding: 6.5rem 0 3rem; }
  .heros__pied { gap: 1.2rem 1.8rem; }
  .heros__pied div { min-width: 0; }
  .etapes li { padding-left: 2.9rem; }
  .enveloppe, .enveloppe--etroite { width: min(100% - 1.8rem, var(--large)); }
  .tuile-domaine { padding: 1.3rem 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-anim] { opacity: 1 !important; transform: none !important; }
}

@media print {
  .entete, .barre-mobile, .appel, .voile { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ------------------------------------------------------ 18. avis Google */
/* La bande est livrée `hidden` et dévoilée par site.js une fois le JSON lu.
   Les photos de profil vivent chez googleusercontent.com, que la CSP bloque :
   on affiche les initiales, ce qui évite d'ouvrir la politique ou de recopier
   des images de Google. */

/* Cartes allégées : pas de cadre, un simple fond posé. La bande d'avis ne doit
   pas peser autant que les médaillons de domaines juste au-dessus. */
.avis {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.4rem;
  background: var(--surface);
  border-radius: var(--r-l);
}

/* Dans le rail : largeur fixe et hauteur commune. Des cartes de hauteurs
   différentes laissaient de grands vides sous les avis courts.
   La hauteur est plafonnée plutôt qu'alignée sur le plus long avis : un seul
   commentaire bavard aurait imposé sa taille à toute la bande. Le texte qui
   dépasse reste atteignable en le faisant défiler — il n'est ni coupé ni
   modifié, ce que les règles Google interdisent. */
.rail__piste > .avis {
  flex: 0 0 clamp(260px, 27vw, 330px);
  height: 330px;
  scroll-snap-align: start;
}
/* Barre de défilement discrète mais VISIBLE : sans elle, un avis long semble
   coupé au milieu d'une phrase, sans rien qui laisse deviner la suite. */
.rail__piste > .avis .avis__texte {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--bord) transparent;
}
.rail__piste > .avis .avis__texte::-webkit-scrollbar { width: 6px; }
.rail__piste > .avis .avis__texte::-webkit-scrollbar-thumb {
  background: var(--bord);
  border-radius: 3px;
}
.rail__piste > .avis .avis__source { flex: 0 0 auto; margin-top: 0.2rem; }

.avis__tete { display: flex; align-items: center; gap: 0.85rem; }
.avis__tete div { display: flex; flex-direction: column; line-height: 1.3; }
.avis__tete b { font-size: 0.98rem; }

.avis__pastille {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--feu), var(--feu-sombre));
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

.avis__quand { font-size: 0.82rem; color: var(--texte-faible); }

.avis__etoiles {
  margin: 0;
  color: var(--feu);
  font-size: 0.92rem;
  letter-spacing: 0.1em;
}

/* Aucune coupure, ni en données ni à l'écran : les règles Places interdisent
   de modifier ou de tronquer le contenu. Les cartes ont donc des hauteurs
   différentes, et c'est très bien ainsi. */
.avis__texte {
  margin: 0;
  color: var(--texte-doux);
  font-size: 0.93rem;
}

.avis__photo {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--bord);
}

.avis__auteur {
  font-family: "Oswald", sans-serif;
  font-size: 0.98rem;
  color: var(--texte);
  text-decoration: none;
}
.avis__auteur:hover { color: var(--feu); }

.avis__source {
  margin-top: auto;
  padding-top: 0.4rem;
  font-size: 0.82rem;
  color: var(--texte-faible);
  text-decoration: none;
}
.avis__source:hover { color: var(--feu); }

/* Attribution obligatoire dès qu'on affiche des données Places sans carte. */
.avis__attribution {
  margin-top: 1.6rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--texte-faible);
}
.avis__attribution b { color: var(--texte-doux); font-weight: 600; }

.pied__avis {
  margin-top: 0.9rem;
  color: var(--feu);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
}

.avis__attribution a { color: var(--texte-faible); }
.avis__attribution a:hover { color: var(--feu); }

/* Voiles du rail d'avis : plus étroits et dégradés plus tôt que sur les
   médaillons. Les tuiles de domaines n'ont que trois mots ; ici le voile de
   64 px mangeait plusieurs lignes de texte et rendait la première carte
   pénible à lire. Le fond est celui de la bande sombre, pas celui de la page. */
[data-avis] .rail::before,
[data-avis] .rail::after { width: 42px; }
[data-avis] .rail::before {
  background: linear-gradient(90deg, var(--nuit-2) 30%, transparent);
}
[data-avis] .rail::after {
  background: linear-gradient(270deg, var(--nuit-2) 30%, transparent);
}