/* EOCHE v2 : feuille commune de la refonte (2026-09-22).
   Direction artistique « Signal » : noir profond, rouge signal, Urbanist.
   Une seule feuille pour toutes les pages v2. Aucune dependance.
   Ordre : polices, jetons, remise a zero, typographie, mise en page,
   composants, formulaire, assistant IA, mouvement, accessibilite. */

/* ══════════════════════════════════════════════════════════════════
   POLICES (auto-hebergees, aucune requete vers un tiers)
   ══════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/v2/urbanist-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;
}
@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/v2/urbanist-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Urbanist";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/v2/urbanist-italic-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;
}
@font-face {
  font-family: "Urbanist";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/v2/urbanist-italic-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ══════════════════════════════════════════════════════════════════
   JETONS
   ══════════════════════════════════════════════════════════════════ */
:root {
  --noir: #070708;
  --noir-2: #09090B;
  --graphite: #111114;
  --graphite-2: #18181B;
  --graphite-3: #27272A;
  --ligne-sombre: rgba(255, 255, 255, 0.08);
  --ligne-sombre-2: rgba(255, 255, 255, 0.14);
  --clair: #F4F4F2;
  --clair-2: #EDECEC;
  --blanc: #FFFFFF;
  --ligne-claire: rgba(9, 9, 11, 0.08);
  --rouge: #FD3A25;
  --rouge-vif: #FF5A43;
  --rouge-profond: #C92715;
  --lueur: rgba(253, 58, 37, 0.35);
  --texte-sombre: #F4F4F5;
  --texte-sombre-2: #A1A1AA;
  --texte-clair: #09090B;
  --texte-clair-2: #52525B;
  --police: "Urbanist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-s: 12px;
  --r-m: 20px;
  --r-l: 28px;
  --r-xl: 36px;
  --r-pilule: 999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-doux: cubic-bezier(0.33, 1, 0.68, 1);
  --largeur: 1280px;
  --gouttiere: clamp(16px, 4vw, 40px);
  --section: clamp(72px, 11vw, 160px);
  --ombre-carte: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 30px 60px -30px rgba(0, 0, 0, 0.6);
  --ombre-claire: 0 1px 2px rgba(9, 9, 11, 0.04), 0 18px 40px -22px rgba(9, 9, 11, 0.22);
  color-scheme: light;
}

/* ══════════════════════════════════════════════════════════════════
   REMISE A ZERO
   ══════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--clair);
  color: var(--texte-clair);
  font-family: var(--police);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
/* Specificite nulle : une liste a classe qui pose son padding (gouttiere d'un carrousel) garde le sien. */
:where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }
:where(h1, h2, h3, h4) { font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; text-wrap: balance; }
:where(p, li, blockquote) { text-wrap: pretty; }
::selection { background: var(--rouge); color: #fff; }

/* ══════════════════════════════════════════════════════════════════
   ACCESSIBILITE
   ══════════════════════════════════════════════════════════════════ */
:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; border-radius: 6px; }
.lien-evitement {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10000;
  padding: 12px 18px;
  border-radius: var(--r-pilule);
  background: var(--rouge-profond);
  color: #fff;
  font-weight: 600;
  transform: translateY(-160%);
}
.lien-evitement:focus { transform: none; }
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ══════════════════════════════════════════════════════════════════
   MISE EN PAGE
   ══════════════════════════════════════════════════════════════════ */
.enveloppe {
  width: min(var(--largeur), 100% - 2 * var(--gouttiere));
  margin-inline: auto;
}
.enveloppe--etroite { width: min(860px, 100% - 2 * var(--gouttiere)); }
.enveloppe--large { width: min(1440px, 100% - 2 * var(--gouttiere)); }
.section { padding-block: var(--section); position: relative; }
.scene {
  background: var(--noir);
  color: var(--texte-sombre);
  color-scheme: dark;
}
.scene ::selection { background: var(--rouge); color: #fff; }
.clair { background: var(--clair); color: var(--texte-clair); }
.blanc { background: var(--blanc); color: var(--texte-clair); }

/* ══════════════════════════════════════════════════════════════════
   TYPOGRAPHIE
   ══════════════════════════════════════════════════════════════════ */
.affiche {
  font-size: clamp(44px, 8.4vw, 124px);
  font-weight: 560;
  letter-spacing: -0.045em;
  line-height: 0.94;
}
.titre-1 {
  font-size: clamp(36px, 5.6vw, 84px);
  font-weight: 560;
  letter-spacing: -0.04em;
  line-height: 0.98;
}
.titre-2 {
  font-size: clamp(30px, 4.2vw, 60px);
  font-weight: 580;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.titre-3 {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.chapeau {
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.5;
  color: var(--texte-clair-2);
  max-width: 44ch;
}
.scene .chapeau { color: var(--texte-sombre-2); }
.petit { font-size: 15px; line-height: 1.55; }
.chiffres { font-variant-numeric: tabular-nums; }
.accent { color: var(--rouge); }
.clair .accent, .blanc .accent { color: var(--rouge-profond); }
.degrade-signal {
  background: linear-gradient(100deg, #FF7A5C 0%, #FD3A25 45%, #C92715 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--rouge);
}

/* Surtitre a point rouge : le motif signature d'EOCHE */
.surtitre {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 12px;
  border-radius: var(--r-pilule);
  border: 1px solid var(--ligne-claire);
  background: rgba(255, 255, 255, 0.7);
  color: var(--rouge-profond);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}
.surtitre::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rouge);
  box-shadow: 0 0 0 4px rgba(253, 58, 37, 0.14);
}
.scene .surtitre {
  border-color: var(--ligne-sombre-2);
  background: rgba(255, 255, 255, 0.04);
  color: #FF7A5C;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ══════════════════════════════════════════════════════════════════
   BOUTONS
   ══════════════════════════════════════════════════════════════════ */
.bouton {
  --bg: var(--rouge-profond);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: var(--r-pilule);
  background:
    radial-gradient(120% 140% at 30% -40%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 55%),
    var(--bg);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -2px 0 rgba(0, 0, 0, 0.2), 0 10px 30px -10px var(--lueur);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background-color 0.2s ease;
  will-change: transform;
}
.bouton:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 0 rgba(0, 0, 0, 0.2), 0 16px 40px -12px rgba(253, 58, 37, 0.6); }
.bouton:active { transform: scale(0.98); }
.bouton__fleche { transition: transform 0.35s var(--ease); }
.bouton:hover .bouton__fleche { transform: translateX(4px); }
.bouton--sombre {
  --bg: #1B1B1F;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -2px 0 rgba(0, 0, 0, 0.4), 0 10px 30px -14px rgba(0, 0, 0, 0.6);
}
.bouton--verre {
  --bg: rgba(255, 255, 255, 0.06);
  color: var(--texte-sombre);
  border: 1px solid var(--ligne-sombre-2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: none;
}
.bouton--verre:hover { --bg: rgba(255, 255, 255, 0.1); box-shadow: none; }
.bouton--clair {
  --bg: #FFFFFF;
  color: var(--texte-clair);
  border: 1px solid var(--ligne-claire);
  box-shadow: 0 1px 2px rgba(9, 9, 11, 0.05), 0 10px 24px -16px rgba(9, 9, 11, 0.25);
}
.bouton--clair:hover { color: var(--rouge-profond); box-shadow: 0 1px 2px rgba(9, 9, 11, 0.05), 0 14px 30px -16px rgba(9, 9, 11, 0.3); }
.bouton--plein { width: 100%; }
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 600;
  color: inherit;
}
.lien-fleche::after {
  content: "\2192";
  color: var(--rouge);
  transition: transform 0.35s var(--ease);
}
.lien-fleche:hover::after { transform: translateX(4px); }

/* ══════════════════════════════════════════════════════════════════
   FORMULAIRE DE DEVIS (pack-modal.v2.js, ID inchanges)
   ══════════════════════════════════════════════════════════════════ */
.pack-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(7, 7, 8, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s;
}
.pack-modal-overlay.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s var(--ease), visibility 0s;
}
.pack-modal {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 30px 28px 26px;
  border-radius: var(--r-l);
  border: 1px solid var(--ligne-sombre-2);
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(253, 58, 37, 0.14), transparent 55%),
    linear-gradient(180deg, #151518, #0C0C0E);
  color: var(--texte-sombre);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateY(18px) scale(0.98);
  transition: transform 0.45s var(--ease);
  color-scheme: dark;
}
.pack-modal-overlay.active .pack-modal { transform: none; }
.pack-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
  color: var(--texte-sombre-2);
  background: rgba(255, 255, 255, 0.05);
}
.pack-modal-close:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.pack-modal-steps {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 160px;
  margin: 4px auto 22px;
}
.pack-step-bar {
  position: absolute;
  top: 50%;
  left: 14px;
  right: 14px;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-50%);
}
.pack-step-progress {
  width: 0;
  height: 100%;
  background: var(--rouge);
  transition: width 0.4s var(--ease);
}
.pack-step {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--texte-sombre-2);
  background: #1B1B1F;
  border: 1px solid var(--ligne-sombre-2);
}
.pack-step.active { color: #fff; background: var(--rouge-profond); border-color: transparent; box-shadow: 0 0 0 4px rgba(253, 58, 37, 0.18); }
.pack-form-step { display: none; }
.pack-form-step.active { display: block; }
.pack-modal-header { text-align: center; margin-bottom: 20px; }
.pack-modal-header h4 { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 6px; }
.pack-modal-sub { font-size: 16px; color: #C4C4CC; }
.pack-field { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.pack-field label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: #E4E4E7; }
.pack-field label span { color: var(--texte-sombre-2); font-weight: 500; }
.pack-field input,
.pack-field select,
.pack-field textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--ligne-sombre-2);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: 16px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.pack-field textarea { min-height: 96px; resize: vertical; }
.pack-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #A1A1AA 50%), linear-gradient(135deg, #A1A1AA 50%, transparent 50%); background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px; background-size: 6px 6px; background-repeat: no-repeat; }
.pack-field select option { color: #09090B; }
.pack-field input::placeholder,
.pack-field textarea::placeholder { color: #8E8E96; }
.pack-field input:focus,
.pack-field select:focus,
.pack-field textarea:focus { outline: none; border-color: rgba(253, 58, 37, 0.7); background: rgba(255, 255, 255, 0.07); }
.pack-btn-actions { display: flex; gap: 10px; margin-top: 18px; }
.pack-btn-actions > * { flex: 1; }
.pack-btn-back {
  min-height: 52px;
  border-radius: var(--r-pilule);
  border: 1px solid var(--ligne-sombre-2);
  color: var(--texte-sombre);
  font-weight: 600;
}
.pack-btn-back:hover { background: rgba(255, 255, 255, 0.06); }
.pack-success { text-align: center; padding: 10px 0 4px; }
.pack-success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 30px;
  color: #fff;
  background: var(--rouge-profond);
  box-shadow: 0 0 0 8px rgba(253, 58, 37, 0.14);
}
.pack-success h4 { font-size: 26px; margin-bottom: 8px; }
.pack-success p { color: var(--texte-sombre-2); margin-bottom: 22px; }

/* ══════════════════════════════════════════════════════════════════
   ASSISTANT IA (chatbot.v3.js)
   ══════════════════════════════════════════════════════════════════ */
.eoche-chat-launcher {
  position: fixed;
  right: 20px;
  bottom: 22px;
  z-index: 9990;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* Graphite comme le bouton Appeler : le seul rouge du bas d'ecran reste « Devis gratuit ». */
  color: #fff;
  background: var(--graphite-2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 28px -12px rgba(0, 0, 0, 0.6);
  transition: transform 0.35s var(--ease);
}
.eoche-chat-launcher:hover { transform: translateY(-2px); background: var(--graphite-3); }
.eoche-chat-panel {
  position: fixed;
  right: 20px;
  bottom: 92px;
  z-index: 9991;
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100dvh - 130px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--ligne-sombre-2);
  background: linear-gradient(180deg, #151518, #0C0C0E);
  color: var(--texte-sombre);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.75);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.3s;
  color-scheme: dark;
}
.eoche-chat-panel--open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s; }
.eoche-chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--ligne-sombre);
  background: radial-gradient(120% 120% at 100% 0%, rgba(253, 58, 37, 0.16), transparent 60%);
}
.eoche-chat-title { font-size: 17px; font-weight: 700; }
.eoche-chat-sub { font-size: 14px; color: var(--texte-sombre-2); margin-top: 2px; }
.eoche-chat-sub a { color: #FF7A5C; font-weight: 600; }
.eoche-chat-close { flex: none; width: 44px; height: 44px; border-radius: 50%; font-size: 20px; color: var(--texte-sombre-2); background: rgba(255, 255, 255, 0.05); }
.eoche-chat-close:hover { color: #fff; }
.eoche-chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.eoche-chat-msg { max-width: 86%; padding: 11px 14px; border-radius: 16px; font-size: 15px; line-height: 1.5; }
.eoche-chat-msg--bot { align-self: flex-start; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--ligne-sombre); border-bottom-left-radius: 6px; }
.eoche-chat-msg--bot a { color: #FF7A5C; font-weight: 600; }
.eoche-chat-msg--user { align-self: flex-end; background: var(--rouge-profond); color: #fff; border-bottom-right-radius: 6px; }
.eoche-chat-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 10px; }
.eoche-chat-action { min-height: 44px; padding: 8px 14px; border-radius: var(--r-pilule); border: 1px solid var(--ligne-sombre-2); font-size: 14px; font-weight: 600; color: var(--texte-sombre); }
.eoche-chat-action:hover { border-color: rgba(253, 58, 37, 0.6); color: #fff; }
.eoche-chat-inputrow { display: flex; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid var(--ligne-sombre); }
.eoche-chat .eoche-chat-input,
.eoche-chat form input.eoche-chat-input[type="text"] {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 10px 16px;
  border-radius: var(--r-pilule);
  border: 1px solid var(--ligne-sombre-2);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 16px;
}
.eoche-chat .eoche-chat-input:focus { outline: none; border-color: rgba(253, 58, 37, 0.7); }
.eoche-chat-send { min-height: 46px; padding: 0 18px; border-radius: var(--r-pilule); background: var(--rouge-profond); color: #fff; font-weight: 600; }
.eoche-chat-send:disabled { opacity: 0.5; cursor: default; }
.eoche-chat-footer { padding: 0 16px 12px; font-size: 13px; color: #A1A1AA; }
.eoche-chat-typing { display: inline-flex; gap: 4px; }
.eoche-chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: #A1A1AA; animation: eoche-chat-blink 1.2s infinite both; }
.eoche-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.eoche-chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes eoche-chat-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

/* ══════════════════════════════════════════════════════════════════
   BARRE D'ACTION MOBILE
   ══════════════════════════════════════════════════════════════════ */
.barre-mobile { display: none; }
@media (max-width: 767px) {
  .barre-mobile {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 9980;
    display: flex;
    gap: 6px;
    padding: 6px;
    border-radius: var(--r-pilule);
    background: rgba(12, 12, 14, 0.9);
    border: 1px solid var(--ligne-sombre);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.6);
    transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
  }
  .barre-mobile.est-masquee { transform: translateY(140%); opacity: 0; pointer-events: none; }
  .barre-mobile a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border-radius: var(--r-pilule);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
  }
  .barre-mobile .barre-mobile__appel { background: rgba(255, 255, 255, 0.08); }
  .barre-mobile .barre-mobile__devis { background: radial-gradient(120% 140% at 30% -40%, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 55%), var(--rouge-profond); }
  .barre-mobile svg { width: 17px; height: 17px; }
  /* Sans le script, la barre reste affichee : le pied garde la place de la barre. Avec le script,
     la barre se retire des que le pied entre a l'ecran (eoche.v2.js, initBarres) : il ne garde que
     la marge de la bulle de l'assistant. */
  .a-barre-mobile .pied { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .barre-pilotee .a-barre-mobile .pied { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  /* La bulle de l'assistant se range a droite de la barre : un seul bandeau en bas d'ecran,
     rien ne flotte au-dessus du texte ni des liens du pied de page. */
  .barre-mobile { right: 76px; }
  .eoche-chat-launcher { right: 10px; bottom: calc(13px + env(safe-area-inset-bottom)); width: 58px; height: 58px; }
  .eoche-chat-panel { right: 10px; left: 10px; width: auto; bottom: calc(86px + env(safe-area-inset-bottom)); height: min(600px, calc(100dvh - 170px)); }
}

/* ══════════════════════════════════════════════════════════════════
   EN-TETE : pilule de verre sombre, flottante, qui se retire au
   defilement vers le bas et revient des qu'on remonte.
   ══════════════════════════════════════════════════════════════════ */
.entete {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 12px var(--gouttiere) 0;
  pointer-events: none;
  transition: transform 0.5s var(--ease);
}
.entete.est-cache { transform: translateY(-120%); }
.entete__barre {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(1240px, 100%);
  height: 62px;
  margin: 0 auto;
  padding: 0 8px 0 18px;
  border-radius: var(--r-pilule);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(14, 14, 16, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  color: var(--texte-sombre);
  box-shadow: 0 10px 40px -18px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.entete.est-defile .entete__barre { background: rgba(10, 10, 12, 0.82); box-shadow: 0 14px 44px -18px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.entete__logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; letter-spacing: 0.08em; font-size: 15px; }
.entete__logo img { width: 30px; height: 30px; }
.entete__nav { margin-left: auto; }
.entete__nav ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.entete__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--r-pilule);
  font-size: 15px;
  font-weight: 500;
  color: rgba(244, 244, 245, 0.78);
  /* Six entrees avec « Création de site » : chacune reste sur une ligne (mesure a 1024, 1280 et 1440). */
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.entete__nav a:hover,
.entete__nav a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, 0.07); }
.entete__actions { display: flex; align-items: center; gap: 8px; }
.entete__tel { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; font-size: 15px; font-weight: 600; color: rgba(244, 244, 245, 0.85); white-space: nowrap; }
.entete__tel svg { color: #FF7A5C; }
.entete__tel:hover { color: #fff; }
.bouton--petit { min-height: 44px; padding: 0 18px; font-size: 15px; }
.entete__menu {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
@media (min-width: 1200px) { .entete__tel { display: inline-flex; } }
@media (max-width: 1023px) {
  .entete__nav { display: none; }
  .entete__menu { display: grid; }
  .entete__actions { margin-left: auto; }
}
@media (max-width: 767px) {
  .entete { padding: 10px 10px 0; }
  .entete__barre { height: 58px; padding: 0 6px 0 14px; }
  .entete__cta { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   MENU PLEIN ECRAN
   ══════════════════════════════════════════════════════════════════ */
.menu-plein {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 104px var(--gouttiere) calc(28px + env(safe-area-inset-bottom));
  overflow-y: auto;
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(253, 58, 37, 0.2), transparent 60%),
    var(--noir);
  opacity: 0;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: opacity 0.45s var(--ease), clip-path 0.6s var(--ease), visibility 0s linear 0.6s;
}
.menu-ouvert .menu-plein { opacity: 1; visibility: visible; clip-path: inset(0 0 0 0); transition: opacity 0.45s var(--ease), clip-path 0.6s var(--ease), visibility 0s; }
.menu-ouvert, .menu-ouvert body { overflow: hidden; }
.menu-plein__liens { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
/* Huit entrees (avec « Création de site ») : 29 px a 360, 31 px a 390, tout tient sans defiler. */
.menu-plein__liens a {
  display: inline-block;
  padding: 6px 0;
  font-size: clamp(28px, 8vw, 64px);
  font-weight: 560;
  letter-spacing: -0.04em;
  line-height: 1.08;
  color: var(--texte-sombre);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease), color 0.2s ease;
}
.menu-plein__liens a:hover,
.menu-plein__liens a[aria-current="page"] { color: #FF7A5C; }
.menu-ouvert .menu-plein__liens a { opacity: 1; transform: none; }
.menu-ouvert .menu-plein__liens li:nth-child(1) a { transition-delay: 0.08s; }
.menu-ouvert .menu-plein__liens li:nth-child(2) a { transition-delay: 0.12s; }
.menu-ouvert .menu-plein__liens li:nth-child(3) a { transition-delay: 0.16s; }
.menu-ouvert .menu-plein__liens li:nth-child(4) a { transition-delay: 0.2s; }
.menu-ouvert .menu-plein__liens li:nth-child(5) a { transition-delay: 0.24s; }
.menu-ouvert .menu-plein__liens li:nth-child(6) a { transition-delay: 0.28s; }
.menu-ouvert .menu-plein__liens li:nth-child(7) a { transition-delay: 0.32s; }
.menu-ouvert .menu-plein__liens li:nth-child(8) a { transition-delay: 0.36s; }
.menu-plein__pied { display: grid; gap: 10px; }
.menu-plein__tel,
.menu-plein__mail { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--texte-sombre-2); font-weight: 600; }
.menu-plein__tel svg, .menu-plein__mail svg { color: #FF7A5C; }
@media (min-width: 1024px) { .menu-plein { display: none; } }

/* ══════════════════════════════════════════════════════════════════
   PIED DE PAGE
   ══════════════════════════════════════════════════════════════════ */
.pied {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 10vw, 128px) 0 calc(28px + env(safe-area-inset-bottom));
  background:
    radial-gradient(70% 50% at 85% 0%, rgba(253, 58, 37, 0.14), transparent 60%),
    var(--noir);
  border-top: 1px solid var(--ligne-sombre);
}
.pied__haut {
  display: grid;
  gap: 48px;
  grid-template-columns: minmax(0, 1fr);
}
.pied__slogan {
  max-width: 16ch;
  margin-bottom: 26px;
  font-size: clamp(30px, 3.6vw, 52px);
  font-weight: 560;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
/* Le pied n'a plus de bouton de devis (shell.mjs) : l'appel final, juste au-dessus, le porte deja.
   Filet pour les pages encore construites avec l'ancienne enveloppe (articles pas encore reenveloppes). */
.pied__marque .bouton { display: none; }
.pied__contacts { display: grid; gap: 4px; margin: 26px 0 0; padding: 0; list-style: none; }
.pied__contacts a,
.pied__contacts span { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--texte-sombre-2); font-weight: 500; }
.pied__contacts a:hover { color: #fff; }
.pied__contacts svg { color: #FF7A5C; flex-shrink: 0; }
.pied__liens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.pied__titre { margin-bottom: 8px; font-size: 16px; font-weight: 600; letter-spacing: 0; color: #F4F4F5; }
.pied__col ul { margin: 0; padding: 0; list-style: none; }
.pied__col a { display: inline-flex; align-items: center; min-height: 44px; color: var(--texte-sombre-2); font-weight: 500; transition: color 0.2s ease; }
.pied__col a:hover { color: #fff; }
.pied__mot {
  margin: clamp(48px, 7vw, 96px) 0 0;
  font-size: clamp(88px, 24vw, 380px);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.78;
  text-align: center;
  color: transparent;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
}
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--ligne-sombre);
  font-size: 14px;
  color: #8E8E96;
}
.pied__bas ul { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; padding: 0; list-style: none; }
.pied__bas a { display: inline-flex; align-items: center; min-height: 44px; color: var(--texte-sombre-2); font-weight: 500; }
.pied__bas a:hover { color: #fff; }
@media (min-width: 768px) {
  .pied__liens { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .pied__haut { grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.4fr); gap: 72px; }
}
/* Telephone : voir « TELEPHONE : PIED COMPACT » plus bas, juste avant MOUVEMENT. */

/* ══════════════════════════════════════════════════════════════════
   BRIQUES COMMUNES : en-tete de section, feuilles, cadres, puces
   ══════════════════════════════════════════════════════════════════ */
.tete-section {
  display: grid;
  justify-items: start;
  gap: 18px;
  max-width: 900px;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.tete-section--centre { justify-items: center; text-align: center; margin-inline: auto; }
.tete-section .chapeau { max-width: 52ch; }

/* Une section qui change de couleur glisse sur la precedente, coins arrondis. */
.feuille {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * clamp(28px, 4vw, 48px));
  border-radius: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) 0 0;
}

.puces { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; padding: 0; list-style: none; font-size: 14px; font-weight: 600; color: var(--texte-clair-2); }
.scene .puces { color: var(--texte-sombre-2); }
.puces li + li::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 12px;
  border-radius: 50%;
  background: var(--rouge);
  vertical-align: middle;
  transform: translateY(-2px);
}
.lien-fleche--sortie::after { content: "\2197"; }
.mention { margin-top: 16px; font-size: 15px; color: #C4C4CC; }
.clair .mention, .blanc .mention { color: #52525B; }

.etoiles { display: inline-flex; gap: 2px; color: var(--rouge); }
.etoiles svg { width: 16px; height: 16px; fill: currentColor; }

.rond {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  color: var(--texte-clair);
  border: 1px solid var(--ligne-claire);
  box-shadow: 0 1px 2px rgba(9, 9, 11, 0.05), 0 10px 24px -16px rgba(9, 9, 11, 0.35);
  transition: transform 0.3s var(--ease), opacity 0.3s ease, background-color 0.2s ease;
}
.rond:hover:not(:disabled) { transform: translateY(-2px); }
.rond:disabled { opacity: 0.35; cursor: default; }
.rond[data-prec] svg { transform: rotate(180deg); }
.scene .rond { background: rgba(255, 255, 255, 0.06); color: #fff; border-color: var(--ligne-sombre-2); box-shadow: none; }

/* Cadre de navigateur */
.cadre-nav {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #1A1A1D;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 40px 80px -30px rgba(0, 0, 0, 0.75);
}
.cadre-nav__barre {
  display: flex;
  align-items: center;
  gap: 7px;
  height: clamp(26px, 2.6vw, 38px);
  padding: 0 14px;
  background: linear-gradient(180deg, #25252A, #1C1C20);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cadre-nav__barre i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #3F3F46; }
.cadre-nav__barre i:first-child { background: var(--rouge); }
.cadre-nav__url {
  margin: 0 auto;
  padding: 3px 16px;
  max-width: 60%;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #A1A1AA;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
  text-overflow: ellipsis;
  transform: translateX(-24px);
}
.cadre-nav__ecran { aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.cadre-nav__ecran img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.clair .cadre-nav { background: #fff; border-color: rgba(9, 9, 11, 0.1); box-shadow: 0 1px 2px rgba(9, 9, 11, 0.04), 0 40px 70px -40px rgba(9, 9, 11, 0.45); }
.clair .cadre-nav__barre { background: #F4F4F5; border-bottom-color: rgba(9, 9, 11, 0.06); }
.clair .cadre-nav__barre i { background: #D4D4D8; }
.clair .cadre-nav__barre i:first-child { background: var(--rouge); }
.clair .cadre-nav__url { background: #fff; color: #8E8E96; border: 1px solid rgba(9, 9, 11, 0.06); }

/* Cadre de telephone */
/* Les marges du cadre se calculent sur sa propre largeur (unites cqw) : un padding en % suivrait le parent. */
.cadre-tel {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 390 / 844;
  border-radius: 15% / 7%;
  background: linear-gradient(150deg, #3B3B41 0%, #141416 38%, #26262B 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 0 0 4px #0B0B0D, 0 40px 80px -30px rgba(0, 0, 0, 0.75);
}
.cadre-tel__ecran { position: absolute; inset: 3.6cqw; overflow: hidden; border-radius: 12cqw; background: #fff; }
.cadre-tel__ecran img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* ══════════════════════════════════════════════════════════════════
   PREMIERE VUE
   ══════════════════════════════════════════════════════════════════ */
.heros {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(112px, 15vh, 176px);
  background:
    radial-gradient(60% 50% at 85% 5%, rgba(253, 58, 37, 0.16), transparent 70%),
    radial-gradient(40% 40% at 5% 95%, rgba(253, 58, 37, 0.08), transparent 70%),
    var(--noir);
}
.heros__reseau {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 40%, transparent 92%);
}
.heros__halo {
  position: absolute;
  z-index: -1;
  top: -34vw;
  right: -22vw;
  width: 72vw;
  height: 72vw;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(253, 58, 37, 0.26), rgba(253, 58, 37, 0));
  pointer-events: none;
}
.heros__grille { display: grid; gap: 32px; }
.heros__titre { display: grid; justify-items: start; gap: 26px; font-weight: inherit; letter-spacing: inherit; }
.heros__affiche {
  display: block;
  font-size: clamp(40px, 6.5vw, 100px);
  letter-spacing: -0.05em;
  line-height: 0.95;
}
.heros__rouge { display: block; }
.heros__rouge .mot__in {
  background: linear-gradient(100deg, #FF8C6E 0%, #FD3A25 55%, #E2311D 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--rouge);
}
.heros__bas { display: grid; justify-items: start; gap: 22px; }
.heros__chapeau { max-width: 40ch; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; color: var(--texte-sombre-2); }
.heros__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.heros__preuve { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; color: var(--texte-sombre-2); }
.heros__preuve b { color: #fff; font-weight: 700; }
.heros__preuve:hover span { color: #fff; }

/* Entree de la premiere vue : pur CSS, elle part sans attendre le JavaScript. */
.heros__affiche .mot { padding-bottom: 0.14em; margin-bottom: -0.14em; }
.heros__affiche .mot__in { animation: eoche-mot 1.1s var(--ease) both; animation-delay: calc(0.12s + var(--i, 0) * 0.055s); }
.heros__surtitre, .heros__bas > * { animation: eoche-fondu 0.9s var(--ease) both; }
.heros__surtitre { animation-delay: 0.05s; }
.heros__bas > :nth-child(1) { animation-delay: 0.5s; }
.heros__bas > :nth-child(2) { animation-delay: 0.62s; }
.heros__pastilles { animation: eoche-fondu 0.9s var(--ease) 0.74s both; }
.heros__scene { animation: eoche-fondu-long 1.4s var(--ease) 0.45s both; }
@keyframes eoche-mot { from { transform: translate3d(0, 110%, 0); } to { transform: none; } }
@keyframes eoche-fondu { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
@keyframes eoche-fondu-long { from { opacity: 0; transform: translate3d(0, 60px, 0); } to { opacity: 1; transform: none; } }

/* La scene d'appareils, inclinee puis redressee au defilement */
.heros__scene { position: relative; margin-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(56px, 8vw, 110px); }
.heros__plateau {
  position: relative;
  transform-origin: 50% 0;
  transform: perspective(1800px) rotateX(calc((1 - var(--p, 1)) * 16deg)) scale(calc(0.93 + var(--p, 1) * 0.07));
}
.heros__nav {
  width: min(1180px, 100%);
  margin: 0 auto;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 70px 140px -50px rgba(253, 58, 37, 0.35), 0 50px 90px -40px rgba(0, 0, 0, 0.9);
}
.heros__tel { position: absolute; right: 1.5%; bottom: -7%; width: clamp(96px, 17vw, 236px); }
.heros__notifs { position: absolute; left: -1%; top: 14%; display: grid; justify-items: start; gap: 12px; width: min(360px, 44%); }
.notif {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 12px;
  border-radius: 18px;
  background: rgba(20, 20, 24, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.8);
  color: var(--texte-sombre);
  font-size: 14px;
  line-height: 1.3;
  animation: eoche-notif 9s var(--ease) infinite both;
}
.notif--2 { margin-left: 26px; animation-delay: 1.1s; }
.notif--3 { margin-left: 52px; animation-delay: 2.2s; }
.notif__icone { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: rgba(255, 255, 255, 0.08); color: #fff; }
.notif__icone svg { width: 19px; height: 19px; }
.notif__icone--ia { background: rgba(253, 58, 37, 0.18); color: #FF7A5C; }
.notif__icone--ok { background: rgba(74, 222, 128, 0.14); color: #4ADE80; }
.notif__texte { display: grid; gap: 1px; }
.notif b { font-weight: 600; }
.notif small { font-size: 12.5px; color: #A1A1AA; }
.heros__demo { padding-left: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #8E8E96; }
@keyframes eoche-notif {
  0% { opacity: 0; transform: translate3d(-14px, 10px, 0) scale(0.97); }
  7%, 74% { opacity: 1; transform: none; }
  84%, 100% { opacity: 0; transform: translate3d(0, -6px, 0); }
}

@media (min-width: 1024px) {
  .heros__grille { grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "titre bas" "pastilles bas"; align-items: end; column-gap: 56px; row-gap: 30px; }
  .heros__grille > .heros__titre { grid-area: titre; }
  .heros__grille > .heros__bas { grid-area: bas; align-self: end; }
  .heros__grille > .heros__pastilles { grid-area: pastilles; }
}
@media (max-width: 767px) {
  .heros { padding-top: 104px; }
  .heros__titre { gap: 20px; }
  .heros__affiche { font-size: clamp(38px, 10.6vw, 54px); letter-spacing: -0.045em; }
  .heros__actions { width: 100%; }
  .heros__actions .bouton { flex: 1 1 100%; }
  .heros__scene { margin-top: 44px; padding-bottom: 72px; }
  .heros__tel { width: 30%; right: 3%; bottom: -12%; }
  .heros__notifs { left: 3%; top: auto; bottom: -16%; width: 66%; gap: 8px; }
  .notif { padding: 8px 12px 8px 8px; font-size: 12.5px; border-radius: 14px; }
  .notif small { font-size: 11px; }
  .notif__icone { width: 30px; height: 30px; border-radius: 9px; }
  .notif--2, .notif--3 { margin-left: 0; }
  .notif--1 { display: none; }
  .heros__demo { font-size: 10px; }
}

/* ══════════════════════════════════════════════════════════════════
   BANDEAU DES OUTILS
   ══════════════════════════════════════════════════════════════════ */
.outils { padding: 12px 0 clamp(64px, 9vw, 112px); overflow: hidden; }
.outils__titre { margin-bottom: 26px; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #8E8E96; }
.defilant {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.defilant__piste { display: flex; width: max-content; animation: eoche-defile 46s linear infinite; }
.defilant:hover .defilant__piste { animation-play-state: paused; }
.defilant__liste { display: flex; gap: clamp(40px, 5vw, 76px); margin: 0; padding: 0 clamp(40px, 5vw, 76px) 0 0; list-style: none; }
.defilant__liste li { font-size: clamp(22px, 2.4vw, 34px); font-weight: 600; letter-spacing: -0.03em; white-space: nowrap; color: rgba(244, 244, 245, 0.4); transition: color 0.3s ease; }
.defilant__liste li:hover { color: #fff; }
@keyframes eoche-defile { to { transform: translate3d(-50%, 0, 0); } }

/* ══════════════════════════════════════════════════════════════════
   OFFRES EN GRILLE
   ══════════════════════════════════════════════════════════════════ */
.offres { background: radial-gradient(70% 40% at 50% 0%, rgba(253, 58, 37, 0.07), transparent 70%), var(--noir); }
.bento { display: grid; gap: 16px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bento > .carte--ia { grid-column: span 4; }
.bento > .carte--express { grid-column: span 2; }
.bento > .carte--vitrine,
.bento > .carte--boutique,
.bento > .carte--croissance { grid-column: span 2; }
.carte {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-l);
  background: linear-gradient(180deg, #131316 0%, #0D0D0F 100%);
  border: 1px solid var(--ligne-sombre);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.carte::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, -30%), rgba(253, 58, 37, 0.13), transparent 45%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.carte::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, -30%), rgba(253, 58, 37, 0.7), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.carte:hover::before, .carte:hover::after { opacity: 1; }
.carte__visuel { position: relative; flex: 1 1 auto; display: grid; place-items: center; min-height: 220px; padding: 32px 32px 0; overflow: hidden; }
.carte__texte { display: grid; justify-items: start; gap: 10px; padding: 26px 30px 30px; }
.carte__etiquette { font-size: 13px; font-weight: 600; color: #FF7A5C; }
.carte__titre { font-size: clamp(24px, 2.1vw, 30px); font-weight: 600; letter-spacing: -0.025em; }
.carte__accroche { max-width: 48ch; font-size: 16px; line-height: 1.55; color: var(--texte-sombre-2); }
.carte__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 8px; }
.carte__badge {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  padding: 7px 12px;
  border-radius: var(--r-pilule);
  background: var(--rouge-profond);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px -10px var(--lueur);
}

/* Chaine d'automatisation animee */
.chaine { display: flex; align-items: center; width: 100%; max-width: 600px; padding-bottom: 30px; }
.chaine__noeud {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 66px;
  height: 66px;
  border-radius: 20px;
  background: #19191D;
  border: 1px solid var(--ligne-sombre-2);
  color: #E4E4E7;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 30px -20px rgba(0, 0, 0, 0.8);
}
.chaine__noeud small { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); font-size: 12.5px; font-weight: 600; color: #A1A1AA; white-space: nowrap; }
.chaine__noeud--ia {
  color: #FF7A5C;
  border-color: rgba(253, 58, 37, 0.55);
  background: radial-gradient(circle at 50% 0%, rgba(253, 58, 37, 0.38), #19191D 72%);
  box-shadow: 0 0 0 6px rgba(253, 58, 37, 0.08), 0 0 44px -6px rgba(253, 58, 37, 0.65);
}
.chaine__lien { position: relative; flex: 1 1 auto; height: 2px; margin: 0 8px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, 0.1); }
.chaine__lien::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, #FD3A25 60%, #FFB199);
  transform: translateX(-100%);
  animation: eoche-impulsion 2.4s cubic-bezier(0.5, 0, 0.3, 1) infinite;
}
.chaine__lien:nth-child(4)::after { animation-delay: 0.8s; }
.chaine__lien:nth-child(6)::after { animation-delay: 1.6s; }
@keyframes eoche-impulsion { to { transform: translateX(260%); } }

.carte--vitrine .carte__visuel { place-items: end center; padding-bottom: 0; }
.carte__nav { width: 100%; margin-bottom: -12%; transform: translateY(8px); transition: transform 0.7s var(--ease); }
.carte:hover .carte__nav { transform: translateY(-6px); }
.carte--boutique .carte__visuel { place-items: end center; }
.carte__tel { width: min(210px, 58%); margin-bottom: -26%; transition: transform 0.7s var(--ease); }
.carte:hover .carte__tel { transform: translateY(-10px) rotate(-2deg); }
.carte--boutique .carte__nav { margin-bottom: -12%; }

.carte--express .carte__visuel { align-content: center; gap: 22px; }
.jalons { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.jalons li { padding: 7px 12px; border-radius: var(--r-pilule); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--ligne-sombre); font-size: 13px; font-weight: 600; color: #D4D4D8; }
.jalons li:last-child { background: rgba(253, 58, 37, 0.16); border-color: rgba(253, 58, 37, 0.4); color: #FF7A5C; }

.carte--croissance .carte__visuel { place-items: end stretch; padding: 76px 0 0; }
.courbe { width: 100%; height: 170px; overflow: visible; }
.courbe__ligne { fill: none; stroke: #FD3A25; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; transition: stroke-dashoffset 1.8s var(--ease) 0.3s; filter: drop-shadow(0 0 8px rgba(253, 58, 37, 0.6)); }
.courbe__aire { opacity: 0; transition: opacity 1.2s ease 1.1s; }
.carte.vu .courbe__ligne, html:not(.js) .courbe__ligne { stroke-dashoffset: 0; }
.carte.vu .courbe__aire, html:not(.js) .courbe__aire { opacity: 1; }
.carte__pastille {
  position: absolute;
  top: 26px;
  left: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-pilule);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--ligne-sombre-2);
  font-size: 13px;
  font-weight: 600;
}
.carte__pastille svg { width: 16px; height: 16px; color: #FF7A5C; }

.garanties { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.garanties li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-radius: var(--r-m);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ligne-sombre);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}
.garanties svg { flex: none; color: #FF7A5C; }

@media (max-width: 1023px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento > .carte--ia { grid-column: 1 / -1; }
  .bento > .carte--express,
  .bento > .carte--vitrine,
  .bento > .carte--boutique,
  .bento > .carte--croissance { grid-column: span 1; }
  .garanties { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .bento { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bento > .carte { grid-column: 1 / -1; }
  .carte__visuel { min-height: 200px; padding: 26px 20px 0; }
  .carte__texte { padding: 22px 22px 24px; }
  .chaine__noeud { width: 52px; height: 52px; border-radius: 16px; }
  .chaine__noeud svg { width: 20px; height: 20px; }
  .chaine__noeud small { font-size: 11px; }
  .chaine__lien { margin: 0 4px; }
  .carte--croissance .carte__visuel { padding-top: 70px; }
  .carte__pastille { left: 20px; top: 20px; }
  .garanties { grid-template-columns: minmax(0, 1fr); }
  .garanties li { padding: 15px 16px; }
}

/* ══════════════════════════════════════════════════════════════════
   RECIT : UNE AUTOMATISATION QUI SE CONSTRUIT
   ══════════════════════════════════════════════════════════════════ */
.recit { background: radial-gradient(45% 40% at 78% 38%, rgba(253, 58, 37, 0.1), transparent 70%), #050506; }
.recit__grille { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.recit__etapes { margin: 0; padding: 0; list-style: none; }
.recit__etape { position: relative; display: grid; align-content: center; gap: 10px; min-height: 46vh; padding: 28px 0 28px 30px; border-left: 1px solid var(--ligne-sombre); }
.recit__etape::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -1px;
  width: 2px;
  height: 72px;
  background: var(--rouge);
  box-shadow: 0 0 16px rgba(253, 58, 37, 0.8);
  transform: translateY(-50%) scaleY(0);
  transition: transform 0.6s var(--ease);
}
.recit__titre { font-size: clamp(26px, 2.8vw, 40px); font-weight: 600; letter-spacing: -0.03em; }
.recit__etape p { max-width: 38ch; font-size: 17px; color: var(--texte-sombre-2); }
.js .recit[data-mode="defile"] .recit__etape { opacity: 0.3; transition: opacity 0.5s var(--ease); }
.js .recit[data-mode="defile"] .recit__etape.est-passe { opacity: 0.5; }
.js .recit[data-mode="defile"] .recit__etape.est-actif { opacity: 1; }
.recit .recit__etape.est-actif::before { transform: translateY(-50%) scaleY(1); }
.recit__scene { position: sticky; top: max(96px, calc(50vh - 280px)); }
.recit__fin { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: clamp(40px, 6vw, 80px); }

.flux {
  overflow: hidden;
  padding: 20px;
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(30, 30, 34, 0.92), rgba(13, 13, 15, 0.96));
  border: 1px solid var(--ligne-sombre-2);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 60px 120px -50px rgba(0, 0, 0, 0.95), 0 0 140px -50px rgba(253, 58, 37, 0.45);
}
.flux__entete { display: flex; align-items: center; gap: 12px; padding: 2px 4px 18px; border-bottom: 1px solid var(--ligne-sombre); font-size: 14px; }
.flux__pastille { padding: 5px 10px; border-radius: var(--r-pilule); background: rgba(253, 58, 37, 0.14); color: #FF7A5C; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.flux__nom { font-weight: 600; }
.flux__etat { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; color: #A1A1AA; }
.flux__etat i { width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.15); animation: eoche-clignote 2s ease-in-out infinite; }
@keyframes eoche-clignote { 50% { opacity: 0.35; } }
.flux__noeuds { --avance: 0; position: relative; display: flex; justify-content: space-between; padding: 30px 6px 44px; }
.flux__noeuds::before,
.flux__noeuds::after { content: ""; position: absolute; top: 57px; left: 34px; height: 2px; border-radius: 2px; }
.flux__noeuds::before { right: 34px; background: rgba(255, 255, 255, 0.08); }
.flux__noeuds::after { width: calc((100% - 68px) * var(--avance)); background: linear-gradient(90deg, #C92715, #FD3A25); box-shadow: 0 0 14px rgba(253, 58, 37, 0.75); transition: width 0.8s var(--ease); }
.flux__noeud { position: relative; z-index: 1; display: grid; justify-items: center; gap: 10px; width: 56px; color: #8E8E96; }
.flux__noeud svg { box-sizing: content-box; padding: 15px; border-radius: 16px; background: #17171A; border: 1px solid var(--ligne-sombre-2); transition: color 0.5s ease, border-color 0.5s ease, background-color 0.5s ease, box-shadow 0.5s ease; }
.flux__noeud small { font-size: 12px; font-weight: 600; white-space: nowrap; transition: color 0.5s ease; }
.flux__panneaux { display: grid; min-height: 236px; }
.flux__panneau { grid-area: 1 / 1; align-self: start; opacity: 0; transform: translate3d(0, 14px, 0) scale(0.98); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); }
.recit:not([data-actif]) .flux__panneau:first-child { opacity: 1; transform: none; }
.recit[data-actif="1"] .flux__noeuds { --avance: 0.25; }
.recit[data-actif="2"] .flux__noeuds { --avance: 0.5; }
.recit[data-actif="3"] .flux__noeuds { --avance: 0.75; }
.recit[data-actif="4"] .flux__noeuds { --avance: 1; }
.recit[data-actif="0"] .flux__noeud:nth-child(-n+1),
.recit[data-actif="1"] .flux__noeud:nth-child(-n+2),
.recit[data-actif="2"] .flux__noeud:nth-child(-n+3),
.recit[data-actif="3"] .flux__noeud:nth-child(-n+4),
.recit[data-actif="4"] .flux__noeud:nth-child(-n+5) { color: #fff; }
.recit[data-actif="0"] .flux__noeud:nth-child(-n+1) svg,
.recit[data-actif="1"] .flux__noeud:nth-child(-n+2) svg,
.recit[data-actif="2"] .flux__noeud:nth-child(-n+3) svg,
.recit[data-actif="3"] .flux__noeud:nth-child(-n+4) svg,
.recit[data-actif="4"] .flux__noeud:nth-child(-n+5) svg {
  color: #fff;
  border-color: rgba(253, 58, 37, 0.6);
  background: radial-gradient(circle at 50% 0%, rgba(253, 58, 37, 0.4), #17171A 72%);
  box-shadow: 0 0 32px -6px rgba(253, 58, 37, 0.75);
}
.recit[data-actif="0"] .flux__panneau:nth-child(1),
.recit[data-actif="1"] .flux__panneau:nth-child(2),
.recit[data-actif="2"] .flux__panneau:nth-child(3),
.recit[data-actif="3"] .flux__panneau:nth-child(4),
.recit[data-actif="4"] .flux__panneau:nth-child(5) { opacity: 1; transform: none; }

.flux__source { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; color: #A1A1AA; }
.flux__source svg { width: 16px; height: 16px; color: #FF7A5C; }
.bulle { padding: 18px 20px; border-radius: 20px 20px 20px 6px; background: #1F1F24; border: 1px solid var(--ligne-sombre); font-size: 16px; line-height: 1.55; color: #E4E4E7; }
.etiquettes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.etiquettes li { padding: 8px 13px; border-radius: var(--r-pilule); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--ligne-sombre); font-size: 14px; font-weight: 500; }
.etiquettes .etiquettes__chaude { background: rgba(253, 58, 37, 0.16); border-color: rgba(253, 58, 37, 0.45); color: #FF7A5C; font-weight: 700; }
.flux__resume { font-size: 15px; color: #A1A1AA; }
.devis-mini { display: grid; gap: 10px; padding: 18px 20px; border-radius: 18px; background: #F4F4F2; color: var(--texte-clair); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
.devis-mini__tete { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--ligne-claire); font-size: 13px; color: var(--texte-clair-2); }
.devis-mini__tete b { font-size: 18px; color: var(--texte-clair); }
.devis-mini__ligne { display: flex; align-items: center; gap: 16px; font-size: 14px; font-weight: 500; }
.devis-mini__ligne i { flex: 0 0 72px; height: 9px; margin-left: auto; border-radius: 5px; background: #DEDEE2; }
.devis-mini__bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; padding: 11px 16px; border-radius: var(--r-pilule); background: var(--rouge-profond); color: #fff; font-size: 14px; font-weight: 600; }
.devis-mini__bouton svg { width: 16px; height: 16px; }
.journal { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.journal li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--ligne-sombre); font-size: 15px; }
.journal svg { flex: none; width: 20px; height: 20px; color: #A1A1AA; }
.journal .journal__ok svg { color: #4ADE80; }
.tableau-mini { display: grid; gap: 14px; padding: 18px 20px; border-radius: 18px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--ligne-sombre); }
.tableau-mini p { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 14px; font-size: 14px; color: #D4D4D8; }
.tableau-mini i { height: 10px; border-radius: 5px; background: linear-gradient(90deg, #C92715, #FD3A25); transform-origin: left; transform: scaleX(var(--l, 0.5)); }

@media (max-width: 1023px) {
  .recit__grille { grid-template-columns: minmax(0, 1fr); }
  .recit__scene { position: relative; top: auto; order: -1; }
  .recit__etapes { display: grid; gap: 4px; }
  .recit__etape { min-height: 0; padding: 18px 0 18px 26px; }
  .recit[data-mode="auto"] .recit__etape { opacity: 0.55; transition: opacity 0.5s var(--ease); }
  .recit[data-mode="auto"] .recit__etape.est-actif { opacity: 1; }
}
@media (max-width: 767px) {
  .flux { padding: 14px; border-radius: var(--r-l); }
  .flux__entete { gap: 8px; padding-bottom: 14px; font-size: 13px; }
  .flux__nom { display: none; }
  .flux__noeuds { padding: 22px 0 38px; }
  .flux__noeuds::before, .flux__noeuds::after { top: 42px; left: 22px; }
  .flux__noeuds::before { right: 22px; }
  .flux__noeuds::after { width: calc((100% - 44px) * var(--avance)); }
  .flux__noeud { width: 44px; }
  .flux__noeud svg { width: 18px; height: 18px; padding: 11px; border-radius: 13px; }
  .flux__noeud small { font-size: 10.5px; }
  .flux__panneaux { min-height: 212px; }
  .bulle { padding: 14px 16px; font-size: 14.5px; }
  .etiquettes li { font-size: 13px; padding: 7px 11px; }
  .tableau-mini p { grid-template-columns: 100px 1fr; font-size: 13px; }
  .recit__titre { font-size: 22px; }
  .recit__etape p { font-size: 15.5px; }
}

/* ══════════════════════════════════════════════════════════════════
   REALISATIONS
   ══════════════════════════════════════════════════════════════════ */
.realisations { overflow: hidden; }
.realisations__tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; }
.carrousel__commandes { display: flex; align-items: center; gap: 10px; margin-bottom: clamp(40px, 6vw, 72px); }
.carrousel__compteur { margin-right: 10px; font-size: 15px; color: var(--texte-clair-2); }
.carrousel__compteur b { color: var(--texte-clair); }
.carrousel__piste {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(1100px, 86vw);
  gap: clamp(16px, 2vw, 28px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--gouttiere), calc((100% - var(--largeur)) / 2));
  padding: 6px max(var(--gouttiere), calc((100% - var(--largeur)) / 2)) 36px;
  scrollbar-width: none;
}
.carrousel__piste::-webkit-scrollbar { display: none; }
.carrousel__piste:focus-visible { outline-offset: -4px; }
.projet {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(18px, 2.6vw, 36px);
  border-radius: var(--r-xl);
  background: #fff;
  border: 1px solid var(--ligne-claire);
  box-shadow: var(--ombre-claire);
  scroll-snap-align: start;
}
.projet__appareils { position: relative; padding: 0 6% 6% 0; }
.projet__tel { position: absolute; right: 0; bottom: 0; width: 23%; }
.projet__schema { display: grid; place-items: center; border-radius: 22px; overflow: hidden; background: #F4F4F2; }
.projet__schema img { width: 100%; height: auto; }
.projet__schema--fiches {
  position: relative;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 10px;
  aspect-ratio: 16 / 10;
  padding: 8% 7%;
  background: radial-gradient(60% 70% at 50% 110%, rgba(253, 58, 37, 0.35), transparent 70%), #0B0B0D;
  color: #fff;
}
.fiche-etape { display: grid; justify-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: #D4D4D8; }
.fiche-etape svg { box-sizing: content-box; width: 26px; height: 26px; padding: 18px; border-radius: 20px; background: #19191D; border: 1px solid var(--ligne-sombre-2); }
.fiche-etape--ia svg { color: #FF7A5C; border-color: rgba(253, 58, 37, 0.55); box-shadow: 0 0 40px -8px rgba(253, 58, 37, 0.7); }
.fiche-fleche { height: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.15), #FD3A25); border-radius: 2px; }
.projet__texte { display: grid; justify-items: start; gap: 14px; }
.projet__statut { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-pilule); background: var(--clair); font-size: 13px; font-weight: 600; color: var(--texte-clair-2); }
.projet__statut i { width: 7px; height: 7px; border-radius: 50%; background: #16A34A; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15); }
.projet__nom { font-size: clamp(30px, 3.4vw, 48px); font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.projet__resume { max-width: 42ch; font-size: 16.5px; line-height: 1.6; color: var(--texte-clair-2); }
.realisations__fin { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 8px; }
@media (max-width: 1023px) {
  .projet { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 767px) {
  .carrousel__commandes { margin-bottom: 28px; }
  .carrousel__commandes .rond { width: 46px; height: 46px; }
  .carrousel__piste { grid-auto-columns: 86vw; gap: 12px; }
  .projet { gap: 20px; padding: 14px 14px 22px; border-radius: var(--r-l); }
  .projet__texte { padding: 0 6px; gap: 10px; }
  .fiche-etape svg { width: 20px; height: 20px; padding: 12px; border-radius: 14px; }
  .fiche-etape { font-size: 11px; }
}

/* ══════════════════════════════════════════════════════════════════
   LE CONSTAT EN POINTS
   ══════════════════════════════════════════════════════════════════ */
.constat { background: radial-gradient(50% 50% at 80% 50%, rgba(253, 58, 37, 0.09), transparent 70%), var(--noir); }
.constat__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(40px, 6vw, 96px); }
.constat__chiffre { display: block; font-size: clamp(96px, 14vw, 208px); font-weight: 600; letter-spacing: -0.065em; line-height: 0.82; color: #fff; }
.constat__chiffre small { font-size: 0.42em; letter-spacing: -0.02em; color: var(--rouge); }
.constat__phrase { display: block; max-width: 19ch; }
.constat__autres { display: grid; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; font-size: 17px; color: var(--texte-sombre-2); }
.constat__autres b { margin-right: 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.constat__source { margin-top: 20px; font-size: 13px; color: #8E8E96; }
.constat__actions { margin-top: 28px; }
.constat__points { padding: clamp(18px, 3vw, 36px); border-radius: var(--r-xl); background: rgba(255, 255, 255, 0.02); border: 1px solid var(--ligne-sombre); }
.constat__points canvas { display: block; width: 100%; height: 360px; }
.constat__points figcaption { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; font-size: 14px; color: #A1A1AA; }
.point { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); }
.point--rouge { background: var(--rouge); }
@media (max-width: 1023px) {
  .constat__grille { grid-template-columns: minmax(0, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════
   METHODE
   ══════════════════════════════════════════════════════════════════ */
.methode { background: var(--blanc); }
.etapes { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.etapes::before,
.etapes::after { content: ""; position: absolute; top: 27px; left: 28px; right: 28px; height: 2px; border-radius: 2px; }
.etapes::before { background: var(--ligne-claire); }
.etapes::after { background: linear-gradient(90deg, var(--rouge-profond), var(--rouge)); transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--ease) 0.2s; }
.etapes.vu::after, html:not(.js) .etapes::after { transform: none; }
.etapes__item { position: relative; }
/* Etapes d'un projet : cercles noirs a chiffre blanc, partout et des l'arrivee (sans attendre le script).
   Les listes de projets gardent des chiffres rouges simples (.cas__numero). */
.etapes__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--texte-clair);
  border: 1px solid var(--texte-clair);
  box-shadow: var(--ombre-claire);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}
.etapes__titre { margin-top: 8px; font-size: clamp(22px, 2vw, 28px); }
.etapes__texte { margin-top: 8px; font-size: 16px; color: var(--texte-clair-2); }
@media (max-width: 1023px) {
  .etapes { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .etapes::before, .etapes::after { top: 28px; bottom: 28px; left: 27px; right: auto; width: 2px; height: auto; }
  .etapes::after { transform: scaleY(0); transform-origin: top; }
  .etapes__item { padding-left: 84px; min-height: 56px; }
  .etapes__num { position: absolute; left: 0; top: 0; }
}

/* ══════════════════════════════════════════════════════════════════
   AVIS
   ══════════════════════════════════════════════════════════════════ */
.avis { background: var(--blanc); padding-top: 0; }
.avis__tete { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: 32px 56px; margin-bottom: clamp(40px, 5vw, 64px); }
.avis__tete .titre-1 { margin-top: 18px; max-width: 13ch; }
/* Notes des plateformes : une phrase, chaque plateforme en lien haut de 44 px au doigt (notesPlateformes). */
.notes { display: grid; justify-items: start; gap: 8px; max-width: 48ch; line-height: 1.6; color: #3F3F46; }
.notes__phrase { text-wrap: balance; }
.notes__lien { position: relative; display: inline-block; padding-block: 11px; margin-block: -11px; color: var(--rouge-profond); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.notes__lien:hover { color: var(--texte-clair); }
.scene .notes { color: #C4C4CC; }
.scene .notes__lien { color: #FF8C6E; }
.scene .notes__lien:hover { color: #fff; }
.avis__grille { columns: 3 300px; column-gap: 16px; }
.avis-carte {
  display: grid;
  gap: 16px;
  margin: 0 0 16px;
  padding: 26px 26px 24px;
  break-inside: avoid;
  border-radius: var(--r-l);
  background: var(--clair);
  border: 1px solid var(--ligne-claire);
}
.avis-carte__texte p { font-size: 17px; line-height: 1.6; color: var(--texte-clair); }
.avis-carte__auteur { display: grid; gap: 2px; font-size: 14px; }
.avis-carte__auteur b { font-size: 15px; font-weight: 700; }
.avis-carte__auteur span { color: var(--texte-clair-2); }
.avis__fin { margin-top: 18px; }
@media (max-width: 1023px) {
  .avis__tete { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .avis__grille {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    gap: 12px;
    columns: auto;
    margin-inline: calc(-1 * var(--gouttiere));
    padding: 4px var(--gouttiere) 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gouttiere);
    scrollbar-width: none;
  }
  .avis__grille::-webkit-scrollbar { display: none; }
  .avis-carte { margin: 0; scroll-snap-align: start; align-content: start; }
}

/* ══════════════════════════════════════════════════════════════════
   LE STUDIO ET LA ZONE
   ══════════════════════════════════════════════════════════════════ */
.studio { overflow: hidden; }
.studio__grille { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 6vw, 96px); }
.studio__portrait { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--r-xl); background: #111114; }
.studio__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.studio__portrait figcaption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: grid;
  gap: 2px;
  padding: 14px 18px;
  border-radius: 18px;
  background: rgba(10, 10, 12, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.studio__portrait figcaption b { font-size: 18px; }
.studio__portrait figcaption span { font-size: 14px; color: #D4D4D8; }
.studio__texte { display: grid; justify-items: start; gap: 20px; }
.points-forts { display: grid; gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; }
.points-forts li { display: flex; align-items: center; gap: 14px; font-size: 17px; font-weight: 500; }
.points-forts svg { flex: none; box-sizing: content-box; padding: 10px; border-radius: 12px; background: rgba(253, 58, 37, 0.1); color: #FF7A5C; }
.citation { padding-left: 20px; border-left: 2px solid var(--rouge); font-size: clamp(18px, 1.6vw, 21px); font-style: italic; line-height: 1.5; color: #E4E4E7; }
.studio__liens { display: flex; flex-wrap: wrap; gap: 4px 24px; }

.zone {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 32px 56px;
  margin-top: clamp(80px, 10vw, 140px);
  padding-top: clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--ligne-sombre);
}
.zone__texte { position: relative; z-index: 1; display: grid; gap: 16px; }
.zone__carte {
  position: relative;
  z-index: 1;
  overflow: hidden;
  aspect-ratio: 600 / 359;
  border-radius: var(--r-xl);
  border: 1px solid var(--ligne-sombre);
  background:
    radial-gradient(circle at 51% 65%, rgba(253, 58, 37, 0.2), transparent 42%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 44px),
    #0B0B0D;
}
.zone__traits { position: absolute; inset: 0; width: 100%; height: 100%; }
.zone__traits line { stroke: rgba(253, 58, 37, 0.6); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; transition: stroke-dashoffset 1.4s var(--ease); }
.zone__traits line:nth-child(2) { transition-delay: 0.15s; }
.zone__traits line:nth-child(3) { transition-delay: 0.3s; }
.zone__traits line:nth-child(4) { transition-delay: 0.45s; }
.zone__carte.vu .zone__traits line, html:not(.js) .zone__traits line { stroke-dashoffset: 0; }
.zone__villes { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.ville { position: absolute; left: var(--x); top: var(--y); }
.ville a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 8px; font-size: 14px; font-weight: 600; color: #D4D4D8; white-space: nowrap; transition: color 0.2s ease; }
.ville a:hover { color: #FF7A5C; }
.ville i { width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12); }
.ville--dessous { transform: translate(-50%, -11px); }
.ville--dessus { transform: translate(-50%, calc(-100% + 11px)); }
.ville--dessus a { flex-direction: column-reverse; }
.ville--centre a { font-size: 18px; color: #fff; }
.ville--centre i { width: 14px; height: 14px; background: var(--rouge); box-shadow: 0 0 0 6px rgba(253, 58, 37, 0.22), 0 0 30px rgba(253, 58, 37, 0.9); animation: eoche-battement 2.4s ease-in-out infinite; }
.ville--centre.ville--dessus { transform: translate(-50%, calc(-100% + 13px)); }
@keyframes eoche-battement { 50% { box-shadow: 0 0 0 12px rgba(253, 58, 37, 0.08), 0 0 36px rgba(253, 58, 37, 0.9); } }
.zone__chateau { position: absolute; right: -2%; bottom: -12%; z-index: 0; width: min(560px, 52%); opacity: 0.07; filter: invert(1); mix-blend-mode: screen; pointer-events: none; }
@media (max-width: 1023px) {
  .studio__grille, .zone { grid-template-columns: minmax(0, 1fr); }
  .studio__portrait { max-width: 520px; }
}
@media (max-width: 767px) {
  .studio__portrait { aspect-ratio: 1 / 1; }
  .points-forts li { font-size: 16px; }
  .ville a { font-size: 12px; padding: 4px; }
  .ville--centre a { font-size: 15px; }
  .zone__carte { border-radius: var(--r-l); }
}

/* ══════════════════════════════════════════════════════════════════
   QUESTIONS
   ══════════════════════════════════════════════════════════════════ */
.questions__grille { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(24px, 6vw, 96px); }
.questions .tete-section { position: sticky; top: 120px; }
.faq { display: grid; gap: 10px; }
.faq__item { border-radius: var(--r-m); background: #fff; border: 1px solid var(--ligne-claire); transition: box-shadow 0.3s ease; }
.faq__item[open] { box-shadow: var(--ombre-claire); }
.faq__question { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 64px; padding: 18px 22px 18px 24px; font-size: clamp(17px, 1.4vw, 19px); font-weight: 600; line-height: 1.35; cursor: pointer; list-style: none; }
.faq__question::-webkit-details-marker { display: none; }
.faq__signe { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--clair); transition: transform 0.4s var(--ease), background-color 0.3s ease; }
.faq__signe::before, .faq__signe::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 1px; background: var(--texte-clair); }
.faq__signe::after { transform: rotate(90deg); transition: transform 0.4s var(--ease); }
.faq__item[open] .faq__signe { background: var(--rouge-profond); transform: rotate(180deg); }
.faq__item[open] .faq__signe::before, .faq__item[open] .faq__signe::after { background: #fff; }
.faq__item[open] .faq__signe::after { transform: rotate(0deg); }
.faq__reponse { padding: 0 24px 22px; font-size: 16.5px; line-height: 1.65; color: var(--texte-clair-2); }
.faq__reponse a { color: var(--rouge-profond); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@supports (interpolate-size: allow-keywords) {
  .faq__item { interpolate-size: allow-keywords; }
  .faq__item::details-content { height: 0; overflow: clip; transition: height 0.45s var(--ease), content-visibility 0.45s allow-discrete; }
  .faq__item[open]::details-content { height: auto; }
}
@media (max-width: 1023px) {
  .questions__grille { grid-template-columns: minmax(0, 1fr); }
  .questions .tete-section { position: static; margin-bottom: 8px; }
}
@media (max-width: 767px) {
  .faq__question { padding: 16px 16px 16px 18px; }
  .faq__reponse { padding: 0 18px 18px; font-size: 17px; line-height: 1.6; }
}

/* ══════════════════════════════════════════════════════════════════
   AUDIT ET CONTACT
   ══════════════════════════════════════════════════════════════════ */
.final { overflow: hidden; text-align: center; background: radial-gradient(60% 55% at 50% 105%, rgba(253, 58, 37, 0.4), transparent 70%), var(--noir); }
.final__reseau {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
  mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
}
.final__contenu { position: relative; display: grid; justify-items: center; gap: 24px; }
.final__titre { max-width: 13ch; font-size: clamp(42px, 6.8vw, 100px); }
.final .chapeau { margin-inline: auto; }
.final__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.final__mail { font-size: 16px; color: #C4C4CC; }
.final__mail a { display: inline-block; padding-block: 12px; margin-block: -12px; color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
  .final__actions { width: 100%; }
  .final__actions .bouton { flex: 1 1 100%; }
}

/* ══════════════════════════════════════════════════════════════════
   ACCUEIL : complements (surtitre du H1, pastilles, en bref, detail)
   ══════════════════════════════════════════════════════════════════ */
.heros__surtitre {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.35;
  color: #FF8C6E;
}
.heros__surtitre::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rouge);
  box-shadow: 0 0 0 5px rgba(253, 58, 37, 0.18);
}
.heros__pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.heros__pastilles li > * {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: var(--r-pilule);
  border: 1px solid var(--ligne-sombre-2);
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 14px;
  font-weight: 500;
  color: #D4D4D8;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.heros__pastilles b { color: #fff; font-weight: 700; }
.heros__pastilles .etoiles svg { width: 13px; height: 13px; }
.heros__pastilles a:hover { border-color: rgba(253, 58, 37, 0.55); color: #fff; }

.en-bref {
  max-width: 680px;
  margin: 0 auto clamp(56px, 8vw, 96px);
  padding-left: 20px;
  border-left: 2px solid var(--rouge);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.7;
  color: var(--texte-sombre-2);
}
.en-bref b { color: #fff; font-weight: 700; }

.detail { margin-top: 20px; border-radius: var(--r-m); border: 1px solid var(--ligne-sombre); background: rgba(255, 255, 255, 0.02); }
.detail__resume { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 16px 22px; font-size: 17px; font-weight: 600; cursor: pointer; list-style: none; }
.detail__resume::-webkit-details-marker { display: none; }
.scene .faq__signe { background: rgba(255, 255, 255, 0.08); }
.scene .faq__signe::before, .scene .faq__signe::after { background: #fff; }
.detail[open] .faq__signe { background: var(--rouge-profond); transform: rotate(180deg); }
.detail[open] .faq__signe::after { transform: rotate(0deg); }
.detail__corps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px 36px; padding: 6px 22px 26px; }
.detail__volet h3 { margin-bottom: 8px; font-size: 18px; letter-spacing: -0.01em; }
.detail__volet p { margin-bottom: 10px; font-size: 15px; color: var(--texte-sombre-2); }
.detail__volet ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; line-height: 1.55; color: var(--texte-sombre-2); }
.detail__volet b { font-weight: 600; color: #E4E4E7; }
@supports (interpolate-size: allow-keywords) {
  .detail { interpolate-size: allow-keywords; }
  .detail::details-content { height: 0; overflow: clip; transition: height 0.45s var(--ease), content-visibility 0.45s allow-discrete; }
  .detail[open]::details-content { height: auto; }
}

.recit__note { margin-top: 18px; font-size: 14px; color: #8E8E96; }
.zone__liens { display: flex; flex-wrap: wrap; gap: 0 24px; }

/* Visuels des automatisations dans les cartes projet */
.projet__schema--veille,
.projet__schema--cse {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 22px;
  aspect-ratio: 16 / 10;
  padding: 6% 8%;
  background: radial-gradient(60% 70% at 50% 110%, rgba(253, 58, 37, 0.3), transparent 70%), #0B0B0D;
  color: #fff;
}
.veille { display: grid; gap: 6px; width: min(420px, 100%); padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--ligne-sombre-2); }
.veille__tete { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--ligne-sombre); font-size: 13px; font-weight: 600; color: #D4D4D8; }
.veille__etat { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: #A1A1AA; }
.veille__etat i { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; }
.veille__ligne { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; color: #D4D4D8; }
.veille__ligne b { font-weight: 700; color: #A1A1AA; }
.veille__ligne .veille__hausse { color: #FF7A5C; }
.veille__ligne .veille__baisse { color: #4ADE80; }
.veille__alerte { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 10px 12px; border-radius: 12px; background: rgba(253, 58, 37, 0.14); font-size: 13px; font-weight: 600; color: #FFB199; }
.veille__alerte svg { flex: none; width: 16px; height: 16px; }
.mini-etapes { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mini-etapes li { padding: 7px 12px; border-radius: var(--r-pilule); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--ligne-sombre); font-size: 12.5px; font-weight: 600; color: #D4D4D8; }
.mini-etapes li:last-child { background: rgba(253, 58, 37, 0.16); border-color: rgba(253, 58, 37, 0.4); color: #FF7A5C; }

/* Portrait noir et blanc, lueur rouge ponctuelle */
.studio__portrait img { filter: grayscale(1) contrast(1.06) brightness(0.96); }
.studio__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(55% 45% at 88% 12%, rgba(253, 58, 37, 0.42), transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
}

@media (max-width: 767px) {
  .heros__surtitre { font-size: 15px; align-items: flex-start; }
  .heros__surtitre::before { margin-top: 7px; }
  .heros__pastilles li > * { font-size: 13px; min-height: 34px; padding: 5px 12px; }
  .detail__resume { padding: 14px 16px; font-size: 16px; }
  .detail__corps { padding: 4px 16px 20px; }
  .projet__schema--veille, .projet__schema--cse, .projet__schema--fiches { aspect-ratio: auto; padding: 24px 16px; }
  .projet__schema--fiches { row-gap: 18px; }
}

/* ══════════════════════════════════════════════════════════════════
   GREFFES DES PROTOTYPES : titre a points rouges, hub IA, calculateur,
   automatisations livrees, monogramme anime
   ══════════════════════════════════════════════════════════════════ */
.symboles { position: absolute; width: 0; height: 0; overflow: hidden; }
.heros__ligne { display: block; }
.point-signal { color: var(--rouge); }

/* Hub de la carte automatisation */
.hub { position: relative; width: 100%; max-width: 640px; aspect-ratio: 600 / 240; margin: 0 auto 8px; }
.hub__liens { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub__fil { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.hub__flux {
  fill: none;
  stroke: #FD3A25;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 0.14 0.86;
  stroke-dashoffset: 1;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(253, 58, 37, 0.8));
  animation: eoche-flux 2.6s linear infinite;
  animation-delay: var(--r, 0s);
}
@keyframes eoche-flux { to { stroke-dashoffset: 0; } }
.hub__entrees, .hub__sorties { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.hub__entrees li, .hub__sorties li {
  position: absolute;
  top: var(--y);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 12px;
  background: #17171B;
  border: 1px solid var(--ligne-sombre-2);
  font-size: 13px;
  font-weight: 600;
  color: #E4E4E7;
  white-space: nowrap;
  transform: translateY(-50%);
}
.hub__entrees li { right: 78%; }
.hub__sorties li { left: 78%; }
.hub__entrees svg { width: 15px; height: 15px; color: #A1A1AA; }
.hub__coeur {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 17%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #2A1512, #111114 70%);
  border: 1px solid rgba(253, 58, 37, 0.55);
  box-shadow: 0 0 0 8px rgba(253, 58, 37, 0.07), 0 0 60px -6px rgba(253, 58, 37, 0.7);
  transform: translate(-50%, -50%);
}
.hub__coeur svg { width: 58%; height: 58%; fill: #fff; }
.hub__legende { position: absolute; left: 50%; top: calc(50% + 12%); transform: translateX(-50%); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #A1A1AA; white-space: nowrap; }

/* Pied de carte : le fait cle a gauche, l action a droite */
.carte__pied { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 20px; width: 100%; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--ligne-sombre); }
.carte__fait { display: grid; gap: 2px; }
.carte__fait small { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8E8E96; }
.carte__fait b { font-size: clamp(20px, 1.8vw, 24px); font-weight: 600; letter-spacing: -0.02em; color: #fff; }
.carte__pied .carte__actions { margin-top: 0; }
.carte__texte > .lien-fleche { margin-top: -2px; font-size: 15px; }

/* Carte intervention : trace de pouls */
.carte--express .carte__visuel { align-content: center; gap: 26px; }
.pouls { width: 100%; max-width: 320px; height: 90px; overflow: visible; }
.pouls__trace { fill: none; stroke: #FD3A25; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px rgba(253, 58, 37, 0.7)); animation: eoche-pouls 3.2s var(--ease-doux) infinite; }
@keyframes eoche-pouls { 0% { stroke-dashoffset: 1; } 55%, 80% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }

/* Carte boutique : notification de commande */
.carte--boutique .carte__visuel { position: relative; }
.toast-commande {
  position: absolute;
  top: 26px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 10px;
  border-radius: 16px;
  background: rgba(20, 20, 24, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.8);
  font-size: 13px;
  line-height: 1.25;
  animation: eoche-notif 7s var(--ease) infinite both;
}
.toast-commande svg { flex: none; width: 30px; height: 30px; padding: 7px; border-radius: 10px; background: rgba(74, 222, 128, 0.14); color: #4ADE80; }
.toast-commande span { display: grid; }
.toast-commande small { font-size: 11.5px; color: #A1A1AA; }

/* Calculateur « Et chez vous ? » */
.calcul {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: 28px 48px;
  margin-top: clamp(40px, 6vw, 80px);
  padding: clamp(24px, 3.4vw, 44px);
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, rgba(253, 58, 37, 0.1), rgba(255, 255, 255, 0.02) 55%);
  border: 1px solid var(--ligne-sombre-2);
}
.calcul__titre { font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.03em; }
.calcul__label { display: block; margin-top: 12px; font-size: 16px; color: var(--texte-sombre-2); }
.calcul__curseur { display: flex; align-items: center; gap: 18px; margin-top: 18px; }
.calcul__curseur input { flex: 1; min-width: 0; height: 44px; accent-color: var(--rouge); cursor: pointer; }
.calcul__curseur output { min-width: 3.4em; font-size: 22px; font-weight: 700; color: #fff; text-align: right; }
.calcul__resultat { display: grid; gap: 4px; }
.calcul__chiffre { font-size: clamp(72px, 8vw, 120px); font-weight: 600; letter-spacing: -0.06em; line-height: 0.9; color: #fff; }
.calcul__resultat span { font-size: 18px; font-weight: 600; color: #FF8C6E; }
.calcul__resultat small { margin-top: 6px; font-size: 13px; color: #8E8E96; }
.calcul__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

/* Automatisations livrees */
.livrees { margin-top: clamp(48px, 6vw, 80px); }
.livrees__titre { margin-bottom: 20px; font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.02em; }
.livrees__grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.livree {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: hidden;
  padding: 24px 22px 22px;
  border-radius: var(--r-l);
  background: radial-gradient(90% 70% at 100% 0%, rgba(253, 58, 37, 0.3), transparent 60%), #0B0B0D;
  color: var(--texte-sombre);
}
.livree::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, -40%), rgba(253, 58, 37, 0.18), transparent 45%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.livree:hover::before { opacity: 1; }
.livree__nom { font-size: 17px; font-weight: 600; }
.livree__texte { font-size: 14.5px; line-height: 1.5; color: var(--texte-sombre-2); }
.livree__statut { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 12.5px; color: #A1A1AA; }
.livree__statut i { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; }

/* Le constat : titre, puis le chiffre qui le prouve */
.constat__titre { max-width: 12ch; margin-top: 18px; }
.constat__fait { display: grid; gap: 12px; margin-top: 26px; }
.constat__fait .constat__chiffre { font-size: clamp(88px, 12vw, 180px); }
.constat__fait .constat__phrase { max-width: 30ch; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; color: var(--texte-sombre-2); }

/* Scene finale : le monogramme parcouru de lumiere */
.final { isolation: isolate; }
.marque-scene {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(1000px, 125vw);
  height: auto;
  aspect-ratio: 1;
  opacity: 0.9;
  transform: translate(-50%, -50%);
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  pointer-events: none;
}
.marque-scene__fond { fill: #0E0E12; }
.marque-scene__lueur { opacity: 0.5; }
.marque-scene__trait { fill: none; stroke: rgba(244, 244, 245, 0.14); stroke-width: 1; vector-effect: non-scaling-stroke; }
.marque-scene__signal, .marque-scene__halo { fill: none; stroke-linecap: round; stroke-dasharray: 26 224; stroke-dashoffset: -40; vector-effect: non-scaling-stroke; animation: eoche-circuit 20s linear infinite; }
.marque-scene__signal { stroke: #FF5A45; stroke-width: 1.8; }
.marque-scene__halo { stroke: rgba(253, 58, 37, 0.28); stroke-width: 8; }
@keyframes eoche-circuit { to { stroke-dashoffset: -1040; } }
.final__contenu { position: relative; }

@media (max-width: 1023px) {
  .livrees__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .hub { margin-top: 8px; }
  .hub__entrees li, .hub__sorties li { gap: 5px; padding: 5px 8px; border-radius: 9px; font-size: 11px; }
  .hub__entrees svg { width: 12px; height: 12px; }
  .hub__legende { font-size: 9px; letter-spacing: 0.12em; top: calc(50% + 14%); }
  .toast-commande { top: 18px; right: 12px; }
  .carte__pied { align-items: stretch; }
  .carte__pied .carte__actions { width: 100%; }
  .carte__pied .bouton { flex: 1; }
  .calcul { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; }
  .calcul__actions .bouton { flex: 1 1 100%; }
}
@media (max-width: 480px) {
  .livrees__grille { grid-template-columns: minmax(0, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════
   PAGES INTERIEURES : fil d'Ariane, en-tete de page, cartes, prose
   ══════════════════════════════════════════════════════════════════ */
.fil { margin-bottom: clamp(28px, 4vw, 44px); font-size: 15px; }
.fil ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; padding: 0; list-style: none; }
.fil li { display: inline-flex; align-items: center; color: #A1A1AA; }
.fil li + li::before { content: ""; width: 5px; height: 5px; margin: 0 12px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.6; }
.fil a { display: inline-block; padding-block: 11px; margin-block: -11px; color: #D4D4D8; transition: color 0.2s ease; }
.fil a:hover { color: #fff; }
.fil [aria-current] { color: #FF8C6E; }
.clair .fil li, .blanc .fil li { color: var(--texte-clair-2); }
.clair .fil a, .blanc .fil a { color: var(--texte-clair); }

.page-heros {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(112px, 14vh, 156px) 0 clamp(64px, 8vw, 104px);
  background:
    radial-gradient(60% 55% at 85% 0%, rgba(253, 58, 37, 0.16), transparent 70%),
    var(--noir);
}
.page-heros__reseau {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 95%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 95%);
  opacity: 0.75;
}
.page-heros__grille { display: grid; gap: 40px 64px; align-items: center; }
.page-heros--visuel .page-heros__grille { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.page-heros__texte { display: grid; justify-items: start; gap: 22px; }
.page-heros__titre {
  max-width: 17ch;
  font-size: clamp(38px, 5.2vw, 78px);
  font-weight: 560;
  letter-spacing: -0.045em;
  line-height: 0.98;
  animation: eoche-fondu 0.9s var(--ease) 0.1s both;
}
.page-heros__titre em { font-style: normal; color: var(--rouge); }
.page-heros__chapeau { max-width: 46ch; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; color: #D4D4D8; animation: eoche-fondu 0.9s var(--ease) 0.3s both; }
.page-heros .heros__surtitre { animation: eoche-fondu 0.9s var(--ease) both; }
.page-heros .heros__actions { animation: eoche-fondu 0.9s var(--ease) 0.42s both; }
.page-heros .heros__pastilles { animation: eoche-fondu 0.9s var(--ease) 0.54s both; }
.page-heros__visuel { position: relative; animation: eoche-fondu-long 1.2s var(--ease) 0.35s both; }
.page-heros__bref { margin: clamp(48px, 6vw, 80px) 0 0; }

.grille-cartes { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.grille-cartes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille-cartes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille-cartes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.carte-simple {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: start;
  gap: 10px;
  overflow: hidden;
  padding: 26px 24px;
  border-radius: var(--r-l);
  background: linear-gradient(180deg, #131316, #0D0D0F);
  border: 1px solid var(--ligne-sombre);
}
.carte-simple__titre { font-size: clamp(19px, 1.6vw, 22px); letter-spacing: -0.02em; }
.carte-simple__texte { font-size: 15.5px; line-height: 1.55; color: var(--texte-sombre-2); }
.clair .carte-simple, .blanc .carte-simple { background: #fff; border-color: var(--ligne-claire); box-shadow: var(--ombre-claire); }
.clair .carte-simple__texte, .blanc .carte-simple__texte { color: var(--texte-clair-2); }

/* Texte long : lecture confortable, sur fond clair comme sur fond sombre */
.prose { max-width: 72ch; font-size: 17px; line-height: 1.7; }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 1.8em; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.025em; line-height: 1.15; }
.prose h3 { margin-top: 1.6em; font-size: clamp(19px, 1.7vw, 23px); letter-spacing: -0.015em; line-height: 1.25; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 0.4em; }
.prose a { color: var(--rouge-profond); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.scene .prose { color: #D4D4D8; }
.scene .prose a { color: #FF8C6E; }
.scene .prose strong, .scene .prose b { color: #fff; }
.clair .prose, .blanc .prose { color: #3F3F46; }
.clair .prose strong, .blanc .prose strong { color: var(--texte-clair); }
.detail__prose { padding: 4px 22px 26px; }
.clair .detail, .blanc .detail { background: #fff; border-color: var(--ligne-claire); }

/* Un avis mis en avant */
.avis-vedette { display: grid; gap: 18px; max-width: 880px; padding: clamp(26px, 4vw, 48px); border-radius: var(--r-xl); background: var(--clair); border: 1px solid var(--ligne-claire); }
.avis-vedette blockquote p { font-size: clamp(20px, 2.1vw, 28px); line-height: 1.45; letter-spacing: -0.015em; color: var(--texte-clair); }
.avis-vedette figcaption { display: grid; gap: 2px; font-size: 15px; }
.avis-vedette figcaption span { color: var(--texte-clair-2); }
.scene .avis-vedette { background: rgba(255, 255, 255, 0.03); border-color: var(--ligne-sombre-2); }
.scene .avis-vedette blockquote p { color: #F4F4F5; }
.scene .avis-vedette figcaption span { color: #A1A1AA; }

/* Tableau comparatif */
.tableau-conteneur { overflow-x: auto; border-radius: var(--r-l); border: 1px solid var(--ligne-sombre); }
.tableau { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.tableau th, .tableau td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ligne-sombre); }
.tableau thead th { font-size: 15px; font-weight: 700; color: #FF8C6E; }
.tableau tbody th { font-weight: 600; color: #fff; }
.tableau td { color: #D4D4D8; }
.tableau tr:last-child th, .tableau tr:last-child td { border-bottom: 0; }
.clair .tableau-conteneur, .blanc .tableau-conteneur { border-color: var(--ligne-claire); background: #fff; }
.clair .tableau th, .clair .tableau td, .blanc .tableau th, .blanc .tableau td { border-bottom-color: var(--ligne-claire); }
.clair .tableau tbody th, .blanc .tableau tbody th { color: var(--texte-clair); }
.clair .tableau td, .blanc .tableau td { color: #3F3F46; }
.clair .tableau thead th, .blanc .tableau thead th { color: var(--rouge-profond); }

@media (max-width: 1023px) {
  .page-heros--visuel .page-heros__grille { grid-template-columns: minmax(0, 1fr); }
  .grille-cartes--3, .grille-cartes--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .page-heros { padding-top: 100px; }
  .page-heros .heros__actions { width: 100%; }
  .page-heros .heros__actions .bouton { flex: 1 1 100%; }
  .grille-cartes--2, .grille-cartes--3, .grille-cartes--4 { grid-template-columns: minmax(0, 1fr); }
  .carte-simple { padding: 22px 20px; }
  .detail__prose { padding: 2px 16px 20px; }
}

/* ══════════════════════════════════════════════════════════════════
   PAGES D'OFFRE : console, test, formats, guides, franchise
   ══════════════════════════════════════════════════════════════════ */
.console {
  padding: 18px;
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(30, 30, 34, 0.92), rgba(13, 13, 15, 0.96));
  border: 1px solid var(--ligne-sombre-2);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 60px 120px -50px rgba(0, 0, 0, 0.95), 0 0 140px -50px rgba(253, 58, 37, 0.45);
}
.console__tete { display: flex; align-items: center; gap: 10px; padding: 2px 4px 14px; margin-bottom: 14px; border-bottom: 1px solid var(--ligne-sombre); font-size: 13.5px; font-weight: 600; }
.console__tete .flux__etat { margin-left: auto; }
.console .hub { margin: 10px auto 14px; }
.console__journal { display: grid; gap: 8px; margin: 0; padding: 14px 4px 2px; list-style: none; border-top: 1px solid var(--ligne-sombre); }
.console__journal li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #D4D4D8; opacity: 0; animation: eoche-journal 9s var(--ease) infinite both; }
.console__journal li:nth-child(2) { animation-delay: 1.2s; }
.console__journal li:nth-child(3) { animation-delay: 2.4s; }
.console__journal svg { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 6px; background: rgba(74, 222, 128, 0.14); color: #4ADE80; }
.console__journal small { margin-left: auto; font-size: 12px; color: #8E8E96; white-space: nowrap; }
@keyframes eoche-journal { 0% { opacity: 0; transform: translate3d(0, 8px, 0); } 8%, 80% { opacity: 1; transform: none; } 92%, 100% { opacity: 0.35; } }

/* Formats d'offre */
.formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.formats .carte__texte { height: 100%; align-content: start; padding-top: 30px; }
.formats .carte__pied { margin-top: auto; }
.carte--vedette { border-color: rgba(253, 58, 37, 0.55); box-shadow: 0 0 0 1px rgba(253, 58, 37, 0.25), 0 30px 80px -40px rgba(253, 58, 37, 0.55); }

/* Franchise, liens de fin de section */
.franchise { max-width: 760px; margin-top: clamp(40px, 5vw, 64px); padding: clamp(22px, 3vw, 34px); border-radius: var(--r-xl); border: 1px dashed rgba(9, 9, 11, 0.18); }
.franchise h3 { margin-bottom: 10px; font-size: clamp(21px, 1.9vw, 26px); }
.franchise p { color: #3F3F46; }
.franchise__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 18px; }
.note-lien { margin-top: 22px; font-size: 16px; color: var(--texte-sombre-2); }
.note-lien a { color: #FF8C6E; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.clair .note-lien, .blanc .note-lien { color: var(--texte-clair-2); }
.clair .note-lien a, .blanc .note-lien a { color: var(--rouge-profond); }
.agences__action { margin-top: 28px; }

/* Guides du blog */
.guides { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.guide a { display: grid; align-content: start; gap: 12px; height: 100%; padding: 12px 12px 18px; border-radius: var(--r-l); background: #fff; border: 1px solid var(--ligne-claire); transition: transform 0.35s var(--ease), box-shadow 0.35s ease; }
.guide a:hover { transform: translateY(-4px); box-shadow: var(--ombre-claire); }
.guide__image { width: 100%; aspect-ratio: 600 / 315; object-fit: cover; border-radius: 14px; background: #111; }
.guide__titre { padding: 0 6px; font-size: 16.5px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--texte-clair); }
.guide__lire { padding: 0 6px; min-height: 0; font-size: 14px; color: var(--rouge-profond); }
.scene .guide a { background: #121215; border-color: var(--ligne-sombre); }
.scene .guide__titre { color: #F4F4F5; }
.scene .guide__lire { color: #FF8C6E; }

@media (max-width: 1023px) {
  .formats { grid-template-columns: minmax(0, 1fr); }
  .guides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .guides {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    grid-template-columns: none;
    margin-inline: calc(-1 * var(--gouttiere));
    padding: 4px var(--gouttiere) 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gouttiere);
    scrollbar-width: none;
  }
  .guides::-webkit-scrollbar { display: none; }
  .guide { scroll-snap-align: start; }
  .console { padding: 14px; }
  .console__journal li { font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════════════
   PIED : Vitre en trait, un signal rouge au sommet de la tour
   ══════════════════════════════════════════════════════════════════ */
.pied__ville {
  position: relative;
  width: min(620px, 92%);
  margin: 0 auto clamp(48px, 6vw, 72px);
  padding-top: 30px;
  border-bottom: 1px solid var(--ligne-sombre);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.pied__ville img { width: 100%; height: auto; opacity: 0.38; }
.pied__signal {
  position: absolute;
  left: 48.26%;
  top: 31px;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--rouge);
  box-shadow: 0 0 0 5px rgba(253, 58, 37, 0.18), 0 0 22px 6px rgba(253, 58, 37, 0.65);
  /* Point fixe : le monogramme vivant reste la seule animation de marque. */
}
@media (max-width: 767px) {
  .livrees__grille {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 76%;
    grid-template-columns: none;
    margin-inline: calc(-1 * var(--gouttiere));
    padding: 4px var(--gouttiere) 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gouttiere);
    scrollbar-width: none;
  }
  .livrees__grille::-webkit-scrollbar { display: none; }
  .livree { scroll-snap-align: start; }
}

/* ══════════════════════════════════════════════════════════════════
   MENU OUVERT : le bouton devient une croix, l'assistant s'efface
   ══════════════════════════════════════════════════════════════════ */
.entete__menu svg path { transform-box: fill-box; transform-origin: center; transition: transform 0.4s var(--ease); }
.menu-ouvert .entete__menu svg path:first-child { transform: translateY(4px) rotate(45deg); }
.menu-ouvert .entete__menu svg path:last-child { transform: translateY(-4px) rotate(-45deg); }
.menu-ouvert .eoche-chat-launcher,
.menu-ouvert .barre-mobile { opacity: 0; pointer-events: none; }

/* Avis replies sous les trois avis en vitrine */
.detail--avis { margin-top: 4px; }
.detail--avis .avis__grille { padding: 4px 22px 22px; }
.detail--avis .avis-carte { background: var(--clair); }
@media (max-width: 767px) {
  .detail--avis .avis__grille { margin-inline: 0; padding: 4px 14px 18px; grid-auto-columns: 88%; scroll-padding-inline: 14px; }
}

/* Mouvement reduit : le recit ne defile plus, ses etapes se resserrent */
.recit-complet .recit__etape { min-height: 0; padding-block: 18px; }
.recit-complet .recit__scene { top: 110px; }


/* ══════════════════════════════════════════════════════════════════
   SUR MESURE (doctrine du 23/09/2026) : lisible, simple, une seule
   signature animee, le monogramme EOCHE parcouru de lueurs
   ══════════════════════════════════════════════════════════════════ */

/* Lecture : texte courant plus grand, gris plus francs */
@media (min-width: 1024px) { body { font-size: 18px; } }
.chapeau { color: #3F3F46; }
.scene .chapeau { color: #C4C4CC; }
.surtitre { padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 14px; letter-spacing: 0.02em; text-transform: none; }
.surtitre::before { display: none; }
.tete-section { gap: 14px; }

/* ── Le monogramme vivant ──────────────────────────────────────── */
.monogramme { display: block; width: 100%; height: auto; overflow: visible; }
.monogramme__fond { fill: #0E0E11; }
.monogramme__trait { fill: none; stroke: rgba(244, 244, 245, 0.24); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.monogramme__lueur { opacity: 0.55; transform-box: view-box; animation: eoche-lueur 11s ease-in-out infinite alternate; }
.monogramme__signal,
.monogramme__halo { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 26 224; stroke-dashoffset: -40; animation: eoche-circuit 20s linear infinite; }
.monogramme__signal { stroke: #FF5A45; stroke-width: 2; }
.monogramme__halo { stroke: rgba(253, 58, 37, 0.28); stroke-width: 9; }
.monogramme__signal--2,
.monogramme__halo--2 { stroke-dasharray: 70 430; animation-duration: 29s; animation-direction: reverse; }
.monogramme__signal--2 { stroke: #FFB199; stroke-width: 1.6; }
@keyframes eoche-lueur { from { transform: translate(-80px, 60px); } to { transform: translate(140px, -90px); } }

/* A l'arrivee, le contour se dessine, puis le fond se pose et les lueurs partent */
.monogramme--dessin .monogramme__trait { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: eoche-dessin 2.4s cubic-bezier(0.45, 0, 0.2, 1) 0.15s forwards; }
.monogramme--dessin .monogramme__fond,
.monogramme--dessin .monogramme__lueur { opacity: 0; }
.monogramme--dessin .monogramme__fond { animation: eoche-apparition 1.2s ease 1.5s forwards; }
.monogramme--dessin .monogramme__lueur { animation: eoche-apparition-lueur 1.6s ease 1.7s forwards, eoche-lueur 11s ease-in-out 1.7s infinite alternate; }
.monogramme--dessin .monogramme__signal,
.monogramme--dessin .monogramme__halo { opacity: 0; animation: eoche-circuit 20s linear infinite, eoche-apparition 0.9s ease 2.1s forwards; }
.monogramme--dessin .monogramme__signal--2,
.monogramme--dessin .monogramme__halo--2 { animation: eoche-circuit 29s linear infinite reverse, eoche-apparition 0.9s ease 2.4s forwards; }
@keyframes eoche-dessin { to { stroke-dashoffset: 0; } }
@keyframes eoche-apparition { to { opacity: 1; } }
@keyframes eoche-apparition-lueur { to { opacity: 0.55; } }

/* ── Premiere vue ──────────────────────────────────────────────── */
.heros { background: var(--noir); padding-top: clamp(116px, 15vh, 168px); padding-bottom: clamp(72px, 9vw, 120px); }
.heros__halo, .heros__reseau { display: none; }
.heros .heros__grille { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: none; align-items: center; gap: 40px; }
.heros__texte { display: grid; justify-items: start; gap: 26px; animation: eoche-fondu 0.9s var(--ease) 0.1s both; }
.heros__titre { display: grid; gap: 18px; font-weight: inherit; }
.heros__lieu { font-size: clamp(16px, 1.3vw, 19px); font-weight: 600; letter-spacing: 0; color: #FF8C6E; }
.heros__principal { max-width: 15ch; font-size: clamp(40px, 5.6vw, 84px); font-weight: 560; letter-spacing: -0.04em; line-height: 1; color: #F4F4F5; text-wrap: balance; }
.heros .heros__chapeau { max-width: 36ch; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.55; color: #C4C4CC; }
.heros__avis { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; color: #D4D4D8; }
.heros__avis b { color: #fff; }
.heros__avis:hover span { color: #fff; }
.heros__marque { position: relative; }
.heros__monogramme { width: min(560px, 100%); margin-left: auto; }
@media (min-width: 1024px) {
  .heros .heros__grille { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 56px; }
}
@media (max-width: 1023px) {
  .heros__marque { order: -1; }
  .heros__monogramme { width: min(300px, 62vw); margin: 0 0 -8px auto; }
}
@media (max-width: 767px) {
  .heros { padding-top: 92px; padding-bottom: 64px; }
  .heros .heros__grille { gap: 8px; }
  .heros__texte { gap: 22px; }
  .heros__principal { max-width: none; }
  .heros__actions .bouton { flex: 1 1 100%; }
}

/* ── Nos realisations ──────────────────────────────────────────── */
.blanc .projet { background: var(--clair); box-shadow: none; }
.projet__cat { font-size: 15px; font-weight: 600; color: var(--rouge-profond); }
.projet__nom { font-size: clamp(28px, 3vw, 42px); }
.projet__resume { font-size: 17px; color: #3F3F46; }

/* ── Ce que nous faisons : lignes blanches en relief ───────────── */
.offres.clair { background: var(--clair); }
.offres__liste { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.offre {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 0.34fr) auto;
  align-items: center;
  gap: 18px 36px;
  padding: clamp(22px, 2.6vw, 32px) clamp(22px, 2.8vw, 36px);
  border-radius: var(--r-l);
  background: #fff;
  border: 1px solid rgba(9, 9, 11, 0.06);
  box-shadow: 0 1px 2px rgba(9, 9, 11, 0.04), 0 14px 34px -22px rgba(9, 9, 11, 0.28);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.offre:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(9, 9, 11, 0.04), 0 22px 44px -24px rgba(9, 9, 11, 0.32); }
.offre__texte { display: grid; justify-items: start; gap: 8px; }
.offre__titre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.02em; }
.offre__badge { padding: 5px 11px; border-radius: var(--r-pilule); background: var(--rouge-profond); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
.offre__description { max-width: 52ch; font-size: 17px; line-height: 1.55; color: #3F3F46; }
.offre__lien { min-height: 44px; font-size: 15.5px; color: var(--texte-clair); }
.offre__fait { font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--texte-clair); }
.offre__bouton { min-height: 48px; }
.offres__conditions { max-width: 72ch; margin-top: 22px; font-size: 16px; color: #52525B; }
.offres .detail { background: #fff; border-color: rgba(9, 9, 11, 0.06); }
.offres .detail__volet p, .offres .detail__volet ul { color: #52525B; }
.offres .detail__volet b { color: var(--texte-clair); }
.offres .faq__signe { background: var(--clair); }
.offres .faq__signe::before, .offres .faq__signe::after { background: var(--texte-clair); }
.offres .detail[open] .faq__signe { background: var(--rouge-profond); }
.offres .detail[open] .faq__signe::before, .offres .detail[open] .faq__signe::after { background: #fff; }
@media (max-width: 1023px) {
  .offre { grid-template-columns: minmax(0, 1fr) auto; }
  .offre__fait { grid-column: 1; }
  .offre__bouton { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
@media (max-width: 767px) {
  .offre { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .offre__bouton { grid-column: 1; grid-row: auto; width: 100%; }
}

/* ── Projets reels en lignes : le marqueur commun du site ─────────
   Numero rouge simple (1, 2, 3), nom, une phrase avec le vrai chiffre, statut a droite
   (« Mise en service en mai 2026 », « Livré », « Livraison en cours », « En ligne »).
   Fond clair par defaut, fond sombre dans une .scene ou avec .cas__liste--scene. */
.automatisations { background: var(--noir); }
.cas__liste { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ligne-claire); }
.cas__ligne { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(160px, auto); align-items: baseline; gap: 8px 28px; padding: 26px 0; border-bottom: 1px solid var(--ligne-claire); }
.cas__numero { font-size: 18px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--rouge-profond); }
.cas__corps { display: grid; gap: 6px; }
.cas__nom { font-size: clamp(20px, 1.8vw, 24px); font-weight: 600; letter-spacing: -0.015em; }
.cas__texte { max-width: 62ch; font-size: 17px; line-height: 1.6; color: #3F3F46; }
.cas__statut { font-size: 15px; font-weight: 600; color: #52525B; text-align: right; }
.scene .cas__liste, .cas__liste--scene { border-top-color: var(--ligne-sombre-2); }
.scene .cas__ligne, .cas__liste--scene .cas__ligne { border-bottom-color: var(--ligne-sombre-2); }
.scene .cas__numero, .cas__liste--scene .cas__numero { color: #FF7A5C; }
.scene .cas__nom, .cas__liste--scene .cas__nom { color: #F4F4F5; }
.scene .cas__texte, .cas__liste--scene .cas__texte { color: #C4C4CC; }
.scene .cas__statut, .cas__liste--scene .cas__statut { color: #A1A1AA; }
.cas__titre { margin-bottom: 14px; font-size: clamp(21px, 2vw, 26px); }
@media (max-width: 767px) {
  .cas__ligne { grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; padding: 22px 0; }
  .cas__statut { grid-column: 2; text-align: left; }
}

/* Calculateur : une phrase, un chiffre */
.automatisations .calcul { margin-top: clamp(40px, 5vw, 64px); background: rgba(255, 255, 255, 0.03); }
.calcul__resultat { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.45; color: #D4D4D8; }
.calcul__resultat b { display: block; margin-bottom: 4px; font-size: clamp(64px, 7vw, 104px); font-weight: 600; letter-spacing: -0.05em; line-height: 0.95; color: #fff; }
.calcul__label { font-size: 17px; color: #C4C4CC; }

/* ── Methode : des numeros simples ─────────────────────────────── */
.etapes__titre { margin-top: 24px; }
.etapes__texte { font-size: 16.5px; color: #3F3F46; }
@media (max-width: 1023px) { .etapes__titre { margin-top: 12px; } }

/* ── Avis ──────────────────────────────────────────────────────── */
.avis.blanc { padding-top: var(--section); }
.avis__tete .tete-section { margin-bottom: 0; }
.avis-carte__texte p { color: #27272A; }

/* ── Le releve des 751 sites, sur fond clair ───────────────────── */
.constat.clair { background: var(--clair); }
.constat .titre-1 { max-width: 16ch; font-size: clamp(32px, 4vw, 58px); }
.constat__fait { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 28px; }
.constat__fait .constat__chiffre { font-size: clamp(76px, 9vw, 132px); color: var(--texte-clair); }
.constat__fait .constat__chiffre small { color: var(--rouge-profond); }
.constat__fait .constat__phrase { max-width: 16ch; font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; line-height: 1.25; color: var(--texte-clair); }
.constat__detail { max-width: 52ch; margin-top: 18px; font-size: 17px; line-height: 1.6; color: #3F3F46; }
.constat.clair .constat__points { background: #fff; border-color: rgba(9, 9, 11, 0.06); box-shadow: 0 14px 34px -24px rgba(9, 9, 11, 0.28); }
.constat.clair .constat__points figcaption { color: #52525B; }
.constat.clair .point { background: rgba(9, 9, 11, 0.18); }
.constat.clair .point--rouge { background: var(--rouge); }

/* ── Le studio ─────────────────────────────────────────────────── */
.studio__resume { max-width: 52ch; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.65; color: #D4D4D8; }

/* ── Appel final : le monogramme sans halo de fond ─────────────── */
.final { background: var(--noir); }
.final__marque {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(980px, 128vw);
  transform: translate(-50%, -50%);
  opacity: 0.95;
  -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 60%, transparent 100%);
  pointer-events: none;
}
.final .chapeau { color: #D4D4D8; }
.final__titre { font-size: clamp(40px, 6vw, 88px); }

/* ── Pages interieures ─────────────────────────────────────────── */
.page-heros { background: var(--noir); }
.page-heros__reseau { display: none; }
.page-heros__lieu { font-size: 16px; font-weight: 600; color: #FF8C6E; animation: eoche-fondu 0.9s var(--ease) both; }
.page-heros__faits { max-width: 52ch; font-size: 16px; line-height: 1.55; color: #C4C4CC; animation: eoche-fondu 0.9s var(--ease) 0.5s both; }
.page-heros__marque { width: min(420px, 100%); margin-left: auto; }
.page-heros__bref { max-width: 72ch; margin: clamp(40px, 5vw, 64px) 0 0; font-size: clamp(16.5px, 1.3vw, 18px); line-height: 1.7; color: #C4C4CC; }
@media (max-width: 1023px) {
  .page-heros__marque { width: min(240px, 52vw); }
  .page-heros--visuel .page-heros__visuel:has(.page-heros__marque) { order: -1; }
}

/* ── Effets generiques retires ─────────────────────────────────── */
.carte::before, .carte::after, .livree::before { display: none; }
.clair .carte-simple, .blanc .carte-simple { box-shadow: 0 1px 2px rgba(9, 9, 11, 0.04), 0 14px 34px -24px rgba(9, 9, 11, 0.28); }
.offres, .constat, .page-heros, .pied, .menu-plein { background-image: none; }
.pied { background: var(--noir); }
.menu-plein { background: var(--noir); }

/* Sur mesure, finitions : monogramme plus present, calculateur en phrase, offres sur fond blanc */
.monogramme__fond { fill: #121216; }
.monogramme__trait { stroke: rgba(244, 244, 245, 0.34); }
.monogramme__lueur { opacity: 0.7; }
@keyframes eoche-apparition-lueur { to { opacity: 0.7; } }
.calcul__resultat { display: grid; gap: 6px; }
.calcul__resultat p { font-size: clamp(19px, 1.7vw, 23px); font-weight: 600; color: #F4F4F5; }
.calcul__resultat .calcul__base { font-size: 15px; font-weight: 500; color: #A1A1AA; }
.offres--blanc .offre { background: var(--clair); box-shadow: none; border-color: rgba(9, 9, 11, 0.05); }
.blanc .guide a { background: var(--clair); }
.blanc .faq__item { background: var(--clair); }
.blanc .detail { background: var(--clair); border-color: rgba(9, 9, 11, 0.06); }
.blanc .detail .faq__signe, .clair .detail .faq__signe { background: rgba(9, 9, 11, 0.06); }
.blanc .detail .faq__signe::before, .blanc .detail .faq__signe::after,
.clair .detail .faq__signe::before, .clair .detail .faq__signe::after { background: var(--texte-clair); }
.blanc .detail[open] .faq__signe, .clair .detail[open] .faq__signe { background: var(--rouge-profond); }
.blanc .detail[open] .faq__signe::before, .blanc .detail[open] .faq__signe::after,
.clair .detail[open] .faq__signe::before, .clair .detail[open] .faq__signe::after { background: #fff; }
.blanc .detail__resume, .clair .detail__resume { color: var(--texte-clair); }

/* Sur mesure, corrections : fond des offres (la colonne « grand chiffre » des projets est retiree :
   un chiffre reel s'ecrit dans la phrase du projet, voir .cas__texte) */
.offres.blanc { background: var(--blanc); }

/* Telephone : premiers ecrans des pages interieures sans monogramme au-dessus du titre,
   assistant cache tant que les boutons de la premiere vue sont a l'ecran, pied lisible */
@media (max-width: 1023px) {
  .page-heros__visuel:has(.page-heros__marque) { display: none; }
}
@media (max-width: 767px) {
  .barre-cachee .eoche-chat-launcher { opacity: 0; pointer-events: none; transform: translateY(12px); }
  .eoche-chat-launcher { transition: opacity 0.35s ease, transform 0.35s var(--ease); }
}

/* Telephone : dans l'appel final, le monogramme passe au-dessus du titre au lieu de courir derriere le texte */
@media (max-width: 767px) {
  .final__marque {
    position: relative;
    z-index: 0;
    left: auto;
    top: auto;
    display: block;
    width: 150px;
    margin: 0 auto 26px;
    transform: none;
    opacity: 1;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   CONTROLE TRANSVERSAL DU 23/09/2026 : elements communs au telephone
   ══════════════════════════════════════════════════════════════════ */
/* Tablette et ordinateur : la derniere ligne du pied (Malt) finit au-dessus de la bulle de l'assistant. */
@media (min-width: 768px) {
  .pied { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}
/* Telephone : le fil d'Ariane tient sur une ligne (« Création de site internet à Châteaubourg » a 360 px). */
@media (max-width: 767px) {
  .fil { font-size: 14px; }
  .fil li + li::before { margin: 0 9px; }
}
/* Appel final, tablette et ordinateur : le contour du monogramme passait en travers des phrases
   (« est offert » paraissait barre). Une ombre couleur du fond l'efface autour des lettres, le dessin reste. */
@media (min-width: 768px) {
  .final__titre, .final .chapeau, .final__mail { text-shadow: 0 0 3px var(--noir), 0 0 10px var(--noir), 0 0 18px var(--noir); }
}
/* Questions sur deux lignes : pas de mot seul en fin de question. */
.faq__question span, .detail__resume span { text-wrap: balance; }
/* Reponse courte en plusieurs paragraphes (heroInterieur, enBref en tableau). */
.page-heros__bref + .page-heros__bref { margin-top: 14px; }
/* Le texte masque « nouvel onglet » reste attache a son lien, meme dans une liste qui defile. */
.lien-fleche--sortie { position: relative; }
/* Mot compose garde entier a la ligne (pose par eoche.v2.js dans les titres). */
.insecable { white-space: nowrap; }
/* Formulaire de devis ouvert : la barre du bas et la bulle s'effacent au lieu de transparaitre sous le voile. */
body:has(.pack-modal-overlay.active) .barre-mobile,
body:has(.pack-modal-overlay.active) .eoche-chat-launcher { opacity: 0; pointer-events: none; }
/* Pied : mots courts (Blog, Malt) larges de 44 px au doigt, mention legale lisible. */
.pied__col a, .pied__bas a, .fil a { min-width: 44px; }
.pied__bas { font-size: 15px; color: #A1A1AA; }
/* Au telephone, la mention se coupe apres la virgule : « SIREN 999 087 521 » passe entier a la ligne. */
.pied__bas p { text-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════════
   TELEPHONE : ECHELLE UNIQUE DES TITRES ET DU TEXTE (seconde passe du 23/09/2026)
   H1 36 px, H2 32 px, H3 22 px, titre de l'appel final 38 px. Texte de lecture 17 px,
   interligne 1,6. Les libelles d'une ligne (statuts, sources, fil d'Ariane) restent a 14 ou 15 px.
   Les feuilles de page ne surchargent plus ces tailles.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Specificite minimale : un titre de section sans classe commune suit aussi l'echelle. */
  :where(main) h2 { font-size: 32px; line-height: 1.1; letter-spacing: -0.03em; }
  :where(main) h3 { font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; }
  .page-heros__titre,
  .heros__principal { font-size: 36px; line-height: 1.08; letter-spacing: -0.035em; }
  .titre-1, .titre-2, .constat .titre-1 { font-size: 32px; line-height: 1.1; letter-spacing: -0.03em; }
  .titre-3, .etapes__titre, .offre__titre, .cas__nom, .cas__titre, .carte-simple__titre, .projet__nom,
  .calcul__titre, .recit__titre, .franchise h3, .detail__volet h3, .prose h3 { font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; }
  .final__titre { font-size: 38px; line-height: 1.05; letter-spacing: -0.035em; }
  .offre__description, .etapes__texte, .cas__texte, .page-heros__bref, .avis-carte__texte p, .note-lien,
  .carte-simple__texte, .chapeau, .page-heros__chapeau, .heros .heros__chapeau, .prose, .faq__reponse,
  .projet__resume, .constat__detail, .studio__resume, .detail__volet p, .detail__volet ul, .offres__conditions,
  .carte__accroche, .notes { font-size: 17px; line-height: 1.6; }
}

/* ══════════════════════════════════════════════════════════════════
   TELEPHONE : PIED COMPACT (700 px au plus a 390)
   L'appel final, juste au-dessus, porte deja le titre, le devis, le telephone et l'e-mail.
   Le pied garde le nom et les coordonnees en petit bloc (utiles au referencement local),
   les liens des services et des villes en deux colonnes, le chateau en petit, les mentions.
   La colonne « Le studio » (Réalisations, Avis, Méthode, Blog, Contact) double le menu :
   elle reste sur tablette et ordinateur. Quand la barre du bas se retire, la bulle de
   l'assistant reste seule et ne couvre rien : la mention legale s'arrete avant elle.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .pied { padding-top: 28px; }
  .pied__ville { width: 232px; margin: 0 auto 18px; padding-top: 10px; }
  .pied__signal { top: 11px; }
  .pied__haut { gap: 18px; }
  .pied__slogan { max-width: none; margin: 0 0 2px; font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 1.45; color: #F4F4F5; }
  .pied__contacts { display: flex; flex-wrap: wrap; gap: 0 12px; margin: 0; }
  .pied__contacts li:last-child { flex-basis: 100%; }
  .pied__contacts a, .pied__contacts span { gap: 8px; font-size: 15px; }
  .pied__contacts span { min-height: 0; padding-top: 2px; }
  .pied__contacts svg { width: 16px; height: 16px; }
  .pied__liens { gap: 0 16px; }
  .pied__liens .pied__col:last-child { display: none; }
  .pied__titre { margin-bottom: 0; font-size: 15px; }
  .pied__col a { font-size: 15px; }
  .pied__bas { margin-top: 14px; padding-top: 6px; gap: 0; font-size: 14px; }
  .pied__bas ul { order: -1; gap: 0 12px; }
  .pied__bas p { flex-basis: 100%; padding-right: 72px; line-height: 1.5; }
}

/* ══════════════════════════════════════════════════════════════════
   MOUVEMENT
   ══════════════════════════════════════════════════════════════════ */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 0.9s var(--ease) var(--d, 0s), transform 0.9s var(--ease) var(--d, 0s), filter 0.9s var(--ease) var(--d, 0s);
}
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="scale"] { transform: scale(0.94); }
.js [data-reveal="left"] { transform: translate3d(-36px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(36px, 0, 0); }
/* Le rideau s applique aux enfants : un element entierement masque ne serait jamais vu par l observateur. */
.js [data-reveal="clip"] { opacity: 1; transform: none; }
.js [data-reveal="clip"] > * { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease) var(--d, 0s); }
.js [data-reveal="clip"].vu > * { clip-path: inset(0 0 0 0); }
.js [data-reveal="flou"] { transform: none; filter: blur(12px); }
.js [data-reveal].vu { opacity: 1; transform: none; filter: none; }

.mot { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.1em 0 0.16em; margin: -0.1em 0 -0.16em; }
.mot__in { display: inline-block; }
.js [data-split] .mot__in {
  transform: translate3d(0, 105%, 0);
  transition: transform 1s var(--ease) calc(var(--d, 0s) + var(--i, 0) * 0.045s);
}
.js [data-split].vu .mot__in { transform: none; }

@media (max-width: 767px) {
  .js [data-reveal] { transition-duration: 0.6s; transform: translate3d(0, 18px, 0); }
  .js [data-split] .mot__in { transition-duration: 0.7s; }
}

@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.35s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .js [data-reveal], .js [data-split] .mot__in, .js [data-reveal="clip"] > * { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; }
  .heros__affiche .mot__in, .heros__surtitre, .heros__bas > *, .heros__pastilles, .heros__scene, .page-heros__titre, .page-heros__chapeau, .page-heros .heros__actions, .page-heros__visuel { animation: none !important; opacity: 1 !important; transform: none !important; }
  .notif { animation: none !important; opacity: 1 !important; transform: none !important; }
  .heros__plateau { transform: none !important; }
  .defilant { -webkit-mask-image: none; mask-image: none; }
  .defilant__piste { animation: none !important; width: auto; flex-wrap: wrap; justify-content: center; }
  .defilant__liste { flex-wrap: wrap; justify-content: center; row-gap: 12px; padding: 0 var(--gouttiere); }
  .defilant__liste[aria-hidden="true"] { display: none; }
  .chaine__lien::after, .flux__etat i, .ville--centre i, .hub__flux, .marque-scene__signal, .marque-scene__halo, .pied__signal { animation: none !important; }
  .pouls__trace { animation: none !important; stroke-dashoffset: 0; }
  .toast-commande, .console__journal li { animation: none !important; opacity: 1 !important; transform: none !important; }
}