/* ============================================================
   Idée Digitale · feuille de styles globale
   Architecture : tokens → base → composants → sections home →
   gabarits pages intérieures → responsive utilitaires.
   Les pages intérieures réutilisent : .site-header, .site-footer,
   .btn, .section, .section-title, .card-*, .page-hero, .prose.
   ============================================================ */

/* ---------- Polices auto-hébergées ---------- */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../assets/fonts/outfit-400-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: 'Outfit'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../assets/fonts/outfit-400-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: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../assets/fonts/inter-400-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: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../assets/fonts/inter-400-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; }

/* ---------- Tokens ---------- */
:root {
  --ink: #1a1b2e;            /* titres, texte fort */
  --slate: #565b6e;          /* texte courant */
  --teal: #0aa2ae;           /* couleur de marque */
  --teal-dark: #067f8a;      /* hover / contrastes AA */
  --teal-soft: #7fcbd3;      /* traits décoratifs */
  --teal-tint: #eaf6f7;      /* fonds légers teal */
  --cream: #f4f1ec;          /* fond hero */
  --cream-light: #faf8f4;    /* fonds de sections alternées */
  --line: #e7e5e0;           /* bordures */
  --white: #ffffff;
  --star: #f5b301;

  /* Typo 2026-08 : Outfit (titres) + Inter (texte), auto-hébergées.
     --font-serif / --font-sans sont conservés comme alias historiques. */
  --font-display: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
  --font-text: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: var(--font-display);
  --font-sans: var(--font-text);

  --container: 1160px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-card: 0 10px 30px rgba(26, 27, 46, .07);
  --shadow-chip: 0 4px 14px rgba(26, 27, 46, .06);
}

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.65;
  color: var(--slate);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 { color: var(--ink); line-height: 1.18; letter-spacing: -.015em; margin: 0 0 .5em; }

p { margin: 0 0 1em; }

a { color: var(--teal-dark); }

ul, ol, dl, dd, blockquote, figure { margin: 0; padding: 0; }

li { list-style: none; }

:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* Pictogrammes inline (trait) */
.persona-card__icon svg, .hub-chip__icon, .hub__node-icon,
.team-card__icon, .site-footer__contact svg {
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Utilitaires de mise en page ---------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.section { padding-block: 56px; }
.section--cream { background: var(--cream-light); }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.512rem, 2.688vw, 1.792rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  text-align: center;
  margin-bottom: 1.4em;
}
.section-title--left { text-align: left; }

.section-more { text-align: center; margin: 32px 0 0; }

/* ---------- Boutons & liens ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.896rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: .95em 1.8em;
  border-radius: 7px;
  border: 1.5px solid transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn--primary { background: var(--teal); color: var(--white); }
.btn--primary:hover { background: var(--teal-dark); }
.btn--ghost { background: var(--white); color: var(--ink); border-color: #cfd2d8; }
.btn--ghost:hover { border-color: var(--teal); color: var(--teal-dark); }
.btn--light { background: var(--white); color: var(--teal-dark); }
.btn--light:hover { background: var(--teal-tint); }
.btn:active { transform: translateY(1px); }

.arrow-link {
  font-size: 0.918rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--teal-dark);
}
.arrow-link::after { content: '\00a0\2192'; transition: transform .18s ease; display: inline-block; }
.arrow-link:hover::after { transform: translateX(4px); }

/* ---------- Logos de marques (mask + couleur officielle) ---------- */
.tool-logo {
  display: inline-block;
  width: 20px; height: 20px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}
.tool-logo--wordpress          { --logo: url("data:image/svg+xml,%3Csvg role=%22img%22 viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M21.469 6.825c.84 1.537 1.318 3.3 1.318 5.175 0 3.979-2.156 7.456-5.363 9.325l3.295-9.527c.615-1.54.82-2.771.82-3.864 0-.405-.026-.78-.07-1.11m-7.981.105c.647-.03 1.232-.105 1.232-.105.582-.075.514-.93-.067-.899 0 0-1.755.135-2.88.135-1.064 0-2.85-.15-2.85-.15-.585-.03-.661.855-.075.885 0 0 .54.061 1.125.09l1.68 4.605-2.37 7.08L5.354 6.9c.649-.03 1.234-.1 1.234-.1.585-.075.516-.93-.065-.896 0 0-1.746.138-2.874.138-.2 0-.438-.008-.69-.015C4.911 3.15 8.235 1.215 12 1.215c2.809 0 5.365 1.072 7.286 2.833-.046-.003-.091-.009-.141-.009-1.06 0-1.812.923-1.812 1.914 0 .89.513 1.643 1.06 2.531.411.72.89 1.643.89 2.977 0 .915-.354 1.994-.821 3.479l-1.075 3.585-3.9-11.61.001.014zM12 22.784c-1.059 0-2.081-.153-3.048-.437l3.237-9.406 3.315 9.087c.024.053.05.101.078.149-1.12.393-2.325.609-3.582.609M1.211 12c0-1.564.336-3.05.935-4.39L7.29 21.709C3.694 19.96 1.212 16.271 1.211 12M12 0C5.385 0 0 5.385 0 12s5.385 12 12 12 12-5.385 12-12S18.615 0 12 0%22/%3E%3C/svg%3E");           background-color: #21759b; }
.tool-logo--prestashop         { --logo: url("data:image/svg+xml,%3Csvg role=%22img%22 viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M11.558 1.034C5.174 1.034 0 6.21 0 12.592c0 1.258.201 2.47.574 3.597l.002-.007a12.415 12.415 0 01.53-1.787l.011-.03c.085-.222.179-.442.277-.66l.084-.181c.08-.171.165-.34.253-.507.036-.068.07-.136.108-.203.02-.038.044-.073.064-.11.094-.166.19-.332.29-.493l.075-.114c.125-.195.256-.386.393-.573l.035-.05c.144-.193.295-.38.451-.563l.1-.118c.155-.177.315-.35.481-.517l.099-.097a10.321 10.321 0 01.546-.503c.74-2.48 3.005-4.285 5.686-4.285 1.079 0 2.152.31 3.071.873a6.017 6.017 0 012.211 2.407l.007.015.04.074v.003l.004.002a9.925 9.925 0 011.567 1.198c.04.037.081.071.12.109.002 0 .006.005.007.006l-.002-.006-.001-.004v-.003l.042-.084c.377-2.384 1.43-4.102 2.67-4.102.934 0 1.762.975 2.276 2.476l.005.016.001.002c.145.158.287.331.424.521l.007.01.021.067-.02-.078c-1.542-4.569-5.863-7.857-10.952-7.857zM9.927 5.477C7.586 5.52 5.34 7.132 4.574 9.365l-.012.034a10.14 10.14 0 011.315-.895c2.806-1.656 6.479-1.646 9.278.016-.895-1.653-2.631-2.819-4.5-3.004a5.14 5.14 0 00-.728-.039zm9.834.5a1.36 1.36 0 00-.39.067c-1.265.562-1.719 2.073-2.031 3.303l-.016.072c.365-.62.808-1.215 1.396-1.642.835-.687 2.105-.655 2.916.053.308.326.141.008.031-.22-.342-.75-1.025-1.653-1.906-1.634zM21.67 7.98zm-9.32.335l-1.07 3.27-.002.005-.006.002-4.498 1.112h-.009l4.456 1.087c.105.11.227.205.36.28h.002c.042.024.085.045.129.065l.01.005c.041.018.083.033.126.047l.021.008c.04.013.08.023.12.032l.033.008a1.677 1.677 0 00.318.033 1.546 1.546 0 001.43-.948c.08-.186.123-.39.123-.604v-.011l-.001-.012c-.001-.054-.004-.107-.01-.16l-.001-.002a1.506 1.506 0 00-.026-.153l-.001-.004a1.511 1.511 0 00-.096-.288v-.003a1.521 1.521 0 00-.348-.49v-.003zm3.148.626c.048 1.008.036 2.046-.1 3.057-.17 2.018-1.19 3.798-1.972 5.616l-.03.08-.035.086c1.51-1.522 3.17-3.04 3.969-5.082.383-.636.118-1.342-.115-1.976-.17-.877-1.069-1.278-1.717-1.781zm6.172.572l-.588 2.688a1.764 1.764 0 00-.047.2c-.002.02-.007.04-.01.06a1.76 1.76 0 00-.016.222l-.002.031h.003c0 .628.297 1.136.663 1.137a.41.41 0 00.182-.045l.027-.015a.537.537 0 00.07-.047c.013-.01.024-.022.036-.033a.752.752 0 00.137-.168l.03-.054a1.23 1.23 0 00.052-.108l.017-.04c.02-.053.038-.108.053-.166l.002-.002.001-.003.404-.451-.407-.456v.001l-.02-.063zm-4.381.856c.69 1.716.85 3.707.091 5.43-.49 1.368-1.587 2.463-1.874 3.905.73.115 1.468.176 2.21.186 2.166.029 4.332-.42 6.284-1.365-2.04-2.869-4.121-5.755-6.711-8.156zm-4.948.977a.583.583 0 110 1.166.583.583 0 010-1.166zm9.352.37c.138 0 .249.19.249.426s-.111.426-.249.426c-.137 0-.248-.19-.248-.426 0-.235.11-.426.248-.426zm-4.044.184c-.016.112-.033.209-.05.29l-.006.023c-.01.05-.022.094-.033.128-.48 1.417-1.275 2.52-2.36 3.697-.147.16-.301.32-.459.484a58.883 58.883 0 01-1.196 1.205c-.112.11-.259.261-.425.436-.103.287-.22.61-.318.95-.044-.016-.086-.031-.131-.049-2.108-.815-3.519-1.904-3.519-1.904s1.086 1.414 2.915 2.74c.177.129.351.24.522.339-.075 1.194.452 2.34 2.83 2.682a4.81 4.81 0 001.228.008l-.01-.029a.062.062 0 00-.004-.01s-.167-.133-.379-.377a3.842 3.842 0 01-.584-.897 3.382 3.382 0 01-.266-.862 3.176 3.176 0 01-.006-.972c.017-.12.04-.241.072-.366.093-.374.255-.772.507-1.192l.002-.003.241-.404c1.103-1.86 1.797-3.275 1.506-5.441a8.943 8.943 0 00-.078-.476zm4.668.576zm.013.203l.003.036v.01c0 .013-.003.025-.003.038 0-.014.003-.028.003-.043 0-.014-.002-.026-.003-.04zm-.012.275v.001l-.002.01-.002.014.004-.025zm1.353 5.928c-2.553 1.138-5.44 1.44-8.192 1.007-.14 1.108.384 2.218 1.214 2.93l.012.01c2.703-.433 4.975-2.168 6.966-3.946z%22/%3E%3C/svg%3E");          background-color: #df0067; }
.tool-logo--shopify            { --logo: url("data:image/svg+xml,%3Csvg role=%22img%22 viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M15.337 23.979l7.216-1.561s-2.604-17.613-2.625-17.73c-.018-.116-.114-.192-.211-.192s-1.929-.136-1.929-.136-1.275-1.274-1.439-1.411c-.045-.037-.075-.057-.121-.074l-.914 21.104h.023zM11.71 11.305s-.81-.424-1.774-.424c-1.447 0-1.504.906-1.504 1.141 0 1.232 3.24 1.715 3.24 4.629 0 2.295-1.44 3.76-3.406 3.76-2.354 0-3.54-1.465-3.54-1.465l.646-2.086s1.245 1.066 2.28 1.066c.675 0 .975-.545.975-.932 0-1.619-2.654-1.694-2.654-4.359-.034-2.237 1.571-4.416 4.827-4.416 1.257 0 1.875.361 1.875.361l-.945 2.715-.02.01zM11.17.83c.136 0 .271.038.405.135-.984.465-2.064 1.639-2.508 3.992-.656.213-1.293.405-1.889.578C7.697 3.75 8.951.84 11.17.84V.83zm1.235 2.949v.135c-.754.232-1.583.484-2.394.736.466-1.777 1.333-2.645 2.085-2.971.193.501.309 1.176.309 2.1zm.539-2.234c.694.074 1.141.867 1.429 1.755-.349.114-.735.231-1.158.366v-.252c0-.752-.096-1.371-.271-1.871v.002zm2.992 1.289c-.02 0-.06.021-.078.021s-.289.075-.714.21c-.423-1.233-1.176-2.37-2.508-2.37h-.115C12.135.209 11.669 0 11.265 0 8.159 0 6.675 3.877 6.21 5.846c-1.194.365-2.063.636-2.16.674-.675.213-.694.232-.772.87-.075.462-1.83 14.063-1.83 14.063L15.009 24l.927-21.166z%22/%3E%3C/svg%3E");             background-color: #95bf47; }
.tool-logo--googleads          { --logo: url("data:image/svg+xml,%3Csvg role=%22img%22 viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M3.9998 22.9291C1.7908 22.9291 0 21.1383 0 18.9293s1.7908-3.9998 3.9998-3.9998 3.9998 1.7908 3.9998 3.9998-1.7908 3.9998-3.9998 3.9998zm19.4643-6.0004L15.4632 3.072C14.3586 1.1587 11.9121.5028 9.9988 1.6074S7.4295 5.1585 8.5341 7.0718l8.0009 13.8567c1.1046 1.9133 3.5511 2.5679 5.4644 1.4646 1.9134-1.1046 2.568-3.5511 1.4647-5.4644zM7.5137 4.8438L1.5645 15.1484A4.5 4.5 0 0 1 4 14.4297c2.5597-.0075 4.6248 2.1585 4.4941 4.7148l3.2168-5.5723-3.6094-6.25c-.4499-.7793-.6322-1.6394-.5878-2.4784z%22/%3E%3C/svg%3E");           background-color: #4285f4; }
.tool-logo--googleanalytics    { --logo: url("data:image/svg+xml,%3Csvg role=%22img%22 viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M22.84 2.9982v17.9987c.0086 1.6473-1.3197 2.9897-2.967 2.9984a2.9808 2.9808 0 01-.3677-.0208c-1.528-.226-2.6477-1.5558-2.6105-3.1V3.1204c-.0369-1.5458 1.0856-2.8762 2.6157-3.1 1.6361-.1915 3.1178.9796 3.3093 2.6158.014.1201.0208.241.0202.3619zM4.1326 18.0548c-1.6417 0-2.9726 1.331-2.9726 2.9726C1.16 22.6691 2.4909 24 4.1326 24s2.9726-1.3309 2.9726-2.9726-1.331-2.9726-2.9726-2.9726zm7.8728-9.0098c-.0171 0-.0342 0-.0513.0003-1.6495.0904-2.9293 1.474-2.891 3.1256v7.9846c0 2.167.9535 3.4825 2.3505 3.763 1.6118.3266 3.1832-.7152 3.5098-2.327.04-.1974.06-.3983.0593-.5998v-8.9585c.003-1.6474-1.33-2.9852-2.9773-2.9882z%22/%3E%3C/svg%3E");     background-color: #e37400; }
.tool-logo--googletagmanager   { --logo: url("data:image/svg+xml,%3Csvg role=%22img%22 viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M12.003 0a3 3 0 0 0-2.121 5.121l6.865 6.865-4.446 4.541 1.745 1.836a3.432 3.432 0 0 1 .7.739l.012.011-.001.002a3.432 3.432 0 0 1 .609 1.953 3.432 3.432 0 0 1-.09.78l7.75-7.647c.031-.029.067-.05.098-.08.023-.023.038-.052.06-.076a2.994 2.994 0 0 0-.06-4.166l-9-9A2.99 2.99 0 0 0 12.003 0zM8.63 2.133L.88 9.809a2.998 2.998 0 0 0 0 4.238l7.7 7.75a3.432 3.432 0 0 1-.077-.729 3.432 3.432 0 0 1 3.431-3.431 3.432 3.432 0 0 1 .826.101l-5.523-5.81 4.371-4.373-2.08-2.08c-.903-.904-1.193-2.183-.898-3.342zm3.304 16.004a2.932 2.932 0 0 0-2.931 2.931A2.932 2.932 0 0 0 11.934 24a2.932 2.932 0 0 0 2.932-2.932 2.932 2.932 0 0 0-2.932-2.931z%22/%3E%3C/svg%3E");    background-color: #246fdb; }
.tool-logo--googlesearchconsole{ --logo: url("data:image/svg+xml,%3Csvg role=%22img%22 viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M8.548 1.156L6.832 2.872v1.682h1.716zm0 3.398v.035H6.832v-.035H3.386L0 7.844v3.577h2.826V8.94c0-.525.429-.954.954-.954h16.476c.525 0 .954.43.954.954v2.48h2.754V7.844l-3.386-3.29H17.3v.035h-1.717v-.035zm7.035 0H17.3V2.872l-1.717-1.716zM8.679 1.188V2.84h6.773V1.188zm11.471 7.07a.834.834 0 00-.132.01l-.543.002c-5.216.014-10.432-.008-15.648.01-.435-.063-.794.436-.716.883v2.264h17.812c-.016-.888.045-1.782-.034-2.666-.104-.342-.427-.502-.739-.502zm-15.422.634a.689.698 0 01.689.698.689.698 0 01-.689.697.689.698 0 01-.688-.697.689.698 0 01.688-.698zm2.134 0a.689.698 0 01.689.698.689.698 0 01-.689.697.689.698 0 01-.688-.697.689.698 0 01.688-.698zM.036 11.645v9.156c0 1.05.858 1.908 1.907 1.908h.883V11.645zm21.174 0v11.064h.882c1.05 0 1.908-.858 1.908-1.908v-9.156zM4.057 13.133v6.85h6.137v-6.85zm13.243.021v3.777l-1.708.977-1.708-.977v-3.758a4.006 4.006 0 000 7.23v2.441h3.457v-2.442a4.006 4.006 0 00-.041-7.248zm-13.243 8.26v1.43h7.925v-1.43z%22/%3E%3C/svg%3E"); background-color: #458cf5; }
.tool-logo--google             { --logo: url("data:image/svg+xml,%3Csvg role=%22img%22 viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z%22/%3E%3C/svg%3E");              background-color: #4285f4; }
.tool-logo--meta               { --logo: url("data:image/svg+xml,%3Csvg role=%22img%22 viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z%22/%3E%3C/svg%3E");                background-color: #0081fb; }
.tool-logo--instagram          { --logo: url("data:image/svg+xml,%3Csvg role=%22img%22 viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077%22/%3E%3C/svg%3E");           background-color: #e4405f; }
.tool-logo--facebook           { --logo: url("data:image/svg+xml,%3Csvg role=%22img%22 viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z%22/%3E%3C/svg%3E");            background-color: #0866ff; }
.tool-logo--linkedin           { --logo: url("data:image/svg+xml,%3Csvg role=%22img%22 viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z%22/%3E%3C/svg%3E");            background-color: #0a66c2; }

/* G multicolore Google (avis, parcours) */
.google-g {
  display: inline-block;
  width: 22px; height: 22px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8c-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4C12.955 4 4 12.955 4 24s8.955 20 20 20s20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z'/%3E%3Cpath fill='%23FF3D00' d='m6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4C16.318 4 9.656 8.337 6.306 14.691z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238C29.211 35.091 26.715 36 24 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.611 20.083H42V20H24v8h11.303a12.04 12.04 0 0 1-4.087 5.571l6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.site-header .container { max-width: 1340px; }
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 94px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-right: auto;
  flex: none;
}
.brand__logo { height: 70px; width: auto; flex: none; }

.site-nav { display: flex; align-items: center; gap: 18px; min-width: 0; }
.site-nav__list { display: flex; gap: 14px; }
.site-nav__list a {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink);
  padding-block: 6px;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.site-nav__list a:hover,
.site-nav__list a[aria-current="page"] { color: var(--teal-dark); border-bottom-color: var(--teal); }

.site-nav__cta { font-size: 0.76rem; padding: .9em 1.2em; white-space: nowrap; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  width: 22px; height: 2px;
  background: var(--ink);
  margin: 5px 0;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  background:
    linear-gradient(92deg, rgba(244, 241, 236, .92) 0%, rgba(244, 241, 236, .75) 34%, rgba(244, 241, 236, .3) 62%, rgba(244, 241, 236, .1) 100%),
    url('../assets/img/hero-bg.webp?v=20260811') center / cover no-repeat,
    var(--cream);
  overflow: hidden;
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 640px);
  align-items: center;
  min-height: min(620px, 44vw);
  padding-block: 60px 52px;
}
.hero__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2.128rem, 3.808vw, 2.912rem);
  line-height: 1.16;
  letter-spacing: -.01em;
  margin-bottom: .55em;
}
.hero__title em { font-style: normal; color: var(--teal); }
.hero__lead { max-width: 46ch; margin-bottom: 1.8em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ============================================================
   PERSONAS
   ============================================================ */
.personas { padding-block: 48px 40px; }
.personas + .hub { padding-top: 40px; }
.personas__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.persona-card {
  position: relative;
  display: block;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px 44px;
  text-decoration: none;
  color: var(--slate);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.persona-card:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-card);
  transform: translateY(-3px);
}
.persona-card__icon { display: block; width: 34px; height: 34px; color: var(--teal); margin-bottom: 14px; }
.persona-card__icon svg { width: 100%; height: 100%; }
.persona-card__title {
  font-size: 1.03rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.persona-card p { font-size: 1.064rem; margin: 0; }
.persona-card__arrow {
  position: absolute;
  right: 22px; bottom: 14px;
  color: var(--teal);
  font-size: 1.344rem;
  transition: transform .18s ease;
}
.persona-card:hover .persona-card__arrow { transform: translateX(4px); }

/* ============================================================
   HUB · tous vos leviers
   ============================================================ */
.hub__diagram {
  position: relative;
  max-width: 1000px;
  margin-inline: auto;
  aspect-ratio: 1000 / 420;
}
.hub__lines {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}
.hub__lines path { fill: none; stroke: var(--teal-soft); stroke-width: 1.5; stroke-dasharray: 1 0; }
.hub__dots circle { fill: var(--teal); opacity: .85; }

.hub__node {
  position: absolute;
  left: 48%; top: 50%;
  transform: translate(-50%, -50%);
  background: var(--teal);
  color: var(--white);
  font-size: 1.064rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.35;
  text-align: center;
  border-radius: 14px;
  padding: 20px 34px 22px;
  margin: 0;
  box-shadow: 0 14px 34px rgba(10, 162, 174, .35);
}
.hub__node-icon { display: block; width: 26px; height: 26px; margin: 0 auto 8px; }

.hub-chip {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 18px;
  font-size: 0.806rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  box-shadow: var(--shadow-chip);
}
.hub-chip .tool-logo, .hub-chip__icon { width: 18px; height: 18px; }
.hub-chip__icon { color: var(--ink); }

/* ============================================================
   PARCOURS · votre boutique ne s'arrête pas…
   ============================================================ */
.parcours__inner {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 44px;
  align-items: center;
}
.parcours__intro .section-title { margin-bottom: .7em; }
.parcours__intro p { margin-bottom: 1.6em; }

.parcours__steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 26px;
  counter-reset: etape;
}
.parcours-step { position: relative; display: flex; flex-direction: column; }
.parcours-step__label { flex: 1; }
.parcours-step img {
  width: 100%;
  aspect-ratio: 8 / 9;
  object-fit: cover;
  border-radius: var(--radius);
}
.parcours-step__label {
  background: var(--white);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  padding: 13px 14px 11px;
  margin: -44px 8px 0;
  position: relative;
}
.parcours-step__label h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 0.806rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
}
.parcours-step__label h3 .tool-logo,
.parcours-step__label h3 .google-g,
.parcours-step__label h3 .hub-chip__icon { width: 17px; height: 17px; }
.parcours-step__label p { font-size: 0.896rem; line-height: 1.45; margin: 0; }

.parcours-step:not(:last-child)::after {
  content: '\2192';
  position: absolute;
  top: 34%;
  right: -22px;
  z-index: 1;
  color: var(--teal);
  font-size: 1.176rem;
  background: var(--white);
  border-radius: 50%;
  width: 26px; height: 26px;
  line-height: 26px;
  text-align: center;
  box-shadow: var(--shadow-chip);
}

/* ============================================================
   RÉALISATIONS
   ============================================================ */
.realisations__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.real-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
}
.real-card:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); }
.real-card__media img { width: 100%; aspect-ratio: 21 / 10; object-fit: cover; }
.real-card__body { padding: 22px 24px 26px; }
.real-card__body h3 { font-size: 1.176rem; font-weight: 700; margin-bottom: 14px; }
.real-card__body dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 12px;
}
.real-card__body dd { font-size: 0.963rem; line-height: 1.5; }

/* ============================================================
   OUTILS
   ============================================================ */
.outils__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.tool-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 10px;
  font-size: 0.918rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
}

/* ============================================================
   ÉQUIPE
   ============================================================ */
.equipe__duo {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 56px;
  align-items: center;
}
.equipe__photo {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.equipe__photo img { width: 100%; aspect-ratio: 8 / 7; object-fit: cover; object-position: top; display: block; }
.equipe__photo figcaption { padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; font-size: 0.986rem; }
.equipe__photo figcaption strong { color: var(--ink); font-size: 1.12rem; }
.equipe__quote {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--teal-dark);
  margin-bottom: 14px;
}
.equipe__text > p:not(.equipe__quote) { max-width: 58ch; }
.equipe__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.equipe__chips li {
  background: var(--teal-tint);
  color: var(--teal-dark);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.918rem;
  font-weight: 600;
}

/* ============================================================
   PREUVE / FAQ / CTA
   ============================================================ */
.closing__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr .95fr;
  gap: 24px;
  align-items: start;
}
.closing-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px;
}

/* Avis Google */
.avis__head {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.avis__head strong { color: var(--ink); font-size: 1.12rem; }
.avis__note { font-weight: 700; color: var(--ink); font-size: 1.176rem; }
.avis__stars { color: var(--star); letter-spacing: 2px; font-size: 1.064rem; }
.avis__count { font-size: 0.918rem; }
.avis blockquote p { font-size: 1.03rem; line-height: 1.65; }
.avis blockquote footer { font-size: 0.952rem; font-weight: 600; color: var(--ink); margin-bottom: 18px; }

/* FAQ */
.faq h2 {
  font-size: 1.142rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 10px;
}
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 13px 0;
  font-size: 0.986rem;
  font-weight: 600;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  color: var(--teal-dark);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { font-size: 0.963rem; padding-bottom: 14px; margin: 0; }
.faq .arrow-link { display: inline-block; margin-top: 18px; }

/* CTA teal */
.cta-card {
  background: linear-gradient(150deg, #0cadb9, var(--teal-dark));
  border: 0;
  color: var(--white);
  text-align: center;
  padding: 36px 30px;
}
.cta-card h2 {
  color: var(--white);
  font-size: 1.288rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: .8em;
}
.cta-card p { font-size: 1.008rem; color: rgba(255, 255, 255, .92); margin-bottom: 1.6em; }
.cta-card .btn { white-space: nowrap; font-size: 0.851rem; padding-inline: 1.3em; }
.cta-card__note { font-size: 0.874rem; color: rgba(255, 255, 255, .8); margin: 14px 0 0; }
/* Lien dans la carte teal : blanc souligné, sinon teal sur teal illisible (pin Véro 18/08) */
.cta-card__note a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.cta-card__note a:hover { color: var(--teal-tint); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  /* Même bleu nuit que les encarts (.cta-band, .cta-duo, .journey…) : demande Véro 17/08 */
  background: var(--ink);
  color: rgba(255, 255, 255, .72);
  font-size: 0.88rem;
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1.2fr;
  gap: 40px;
  align-items: start;
  padding-block: 52px 32px;
}
.site-footer__col h2 {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--white);
  margin: 0 0 16px;
}
.site-footer__col ul { display: grid; gap: 10px; }
.site-footer__col a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.site-footer__col a:hover { color: var(--white); }
.site-footer__logo {
  display: inline-flex;
  background: var(--white);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 18px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .18);
}
.site-footer__logo img { width: 168px; height: auto; display: block; }
.site-footer__col--brand p { max-width: 34ch; font-size: 0.86rem; margin: 0; }
.site-footer__chip {
  display: inline-flex;
  margin-top: 16px !important;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(10, 162, 174, .14);
  border: 1px solid rgba(10, 162, 174, .32);
  color: #b9edf2;
  font-size: 0.74rem !important;
  font-weight: 600;
}
.site-footer__contact { display: grid; gap: 12px; font-size: 0.86rem; }
.site-footer__contact li { display: flex; align-items: flex-start; gap: 12px; }
.site-footer__contact svg { width: 18px; height: 18px; color: var(--teal-soft); flex: none; margin-top: 3px; }
.site-footer__contact a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.site-footer__contact a:hover { color: var(--white); }
.site-footer .social-links { display: flex; gap: 10px; margin-top: 18px; }
.site-footer .social-links a {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--white);
}
.site-footer .social-links a:hover { background: var(--teal); border-color: var(--teal); }
.site-footer .social-links svg { fill: currentColor; }
.site-footer__map {
  display: inline-block;
  margin-top: 18px;
  color: var(--white);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--teal);
  padding-bottom: 5px;
}
.site-footer__map:hover { color: var(--teal-soft); border-color: var(--teal-soft); }
.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-block: 18px 26px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, .55);
}
.site-footer__bottom p { margin: 0; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 0; }
.site-footer__legal li:not(:last-child)::after { content: '·'; margin-inline: 10px; color: rgba(255, 255, 255, .3); }
.site-footer__legal a { color: rgba(255, 255, 255, .55); text-decoration: none; }
.site-footer__legal a:hover { color: var(--white); }
@media (max-width: 900px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 34px; }
}
@media (max-width: 600px) {
  .site-footer__inner { grid-template-columns: 1fr; }
}

/* ============================================================
   PAGE RÉALISATIONS / PAGE AGENCE
   ============================================================ */
.realisations__grid--page { row-gap: 36px; }
.real-card__body .arrow-link { display: inline-block; margin-top: 14px; font-size: 0.952rem; }

.projet-filtres { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.projet-filtre {
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 999px;
  padding: 9px 18px;
  font: inherit;
  font-size: 0.918rem;
  font-weight: 600;
  color: var(--slate);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.projet-filtre:hover { border-color: var(--teal); color: var(--teal-dark); }
.projet-filtre.is-active { background: var(--ink); border-color: var(--ink); color: var(--white); }
.projet__label {
  display: block;
  font-size: 0.784rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--teal-dark);
  margin-bottom: 6px;
}
.projet__desc { font-size: 1.008rem; }
.projet__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.projet__tags li {
  background: var(--cream);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.829rem;
  font-weight: 600;
  color: var(--slate);
}

.feature-grid.feature-grid--5 { grid-template-columns: repeat(5, 1fr); }

.pull-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.288rem, 2.24vw, 1.624rem);
  text-align: center;
  color: var(--ink);
  max-width: 34ch;
  margin: 44px auto 0;
  line-height: 1.5;
}
.pull-quote em { font-style: normal; color: var(--teal-dark); }

.journey__title { color: var(--white); margin-bottom: 36px; }
.journey__grid--5 { grid-template-columns: repeat(5, 1fr); }
.journey__step {
  background: rgba(255, 255, 255, .06);
  border-radius: var(--radius-sm);
  padding: 24px 18px;
  text-align: center;
}
.journey__icon { display: block; width: 42px; height: 42px; margin: 0 auto 14px; color: var(--teal-soft); }
.journey__icon svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.journey__step h3 { color: var(--white); font-size: 0.952rem; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 6px; }
.journey__step p { color: rgba(255, 255, 255, .65); font-size: 0.896rem; line-height: 1.45; margin: 0; }

.cta-final {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 36px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 38px 42px;
}
.cta-final h2 { font-family: var(--font-serif); font-size: clamp(1.456rem, 2.464vw, 1.904rem); color: var(--ink); margin-bottom: 10px; }
.cta-final p { margin: 0; max-width: 56ch; }
.cta-final__action { text-align: center; }
.cta-final__action .cta-band__note { color: var(--slate); margin-top: 10px; }

.avant-apres {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
  align-items: stretch;
}
.avant-apres__col {
  background: var(--cream-light);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 32px;
}
.avant-apres__col--apres { background: var(--teal-tint); border-color: var(--teal-soft); }
.avant-apres__titre {
  font-size: 0.896rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--slate);
  margin-bottom: 16px;
}
.avant-apres__col--apres .avant-apres__titre { color: var(--teal-dark); }
.avant-apres__col ol { list-style: none; counter-reset: aa; display: flex; flex-direction: column; gap: 10px; }
.avant-apres__col ol li { counter-increment: aa; font-size: 1.03rem; }
.avant-apres__col ol li::before {
  content: counter(aa, decimal-leading-zero);
  font-weight: 700;
  font-size: 0.874rem;
  color: var(--teal-dark);
  margin-right: 10px;
}
.avant-apres__fleche { align-self: center; font-size: 2.016rem; color: var(--teal); }

.agence-intro { max-width: 760px; }
.prose--legal { max-width: 760px; }
.agence-intro p { font-size: 1.176rem; }
.agence-intro__accent {
  font-family: var(--font-serif);
  font-size: 1.512rem;
  color: var(--teal-dark);
  margin-top: 18px;
}

.profil {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 48px;
  align-items: start;
  margin-top: 40px;
}
.profil--text { grid-template-columns: 1fr; max-width: 800px; }
.profil + .profil { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--line); }
.profil__text h3 {
  font-family: var(--font-serif);
  font-size: 1.68rem;
  color: var(--ink);
  margin-bottom: 4px;
}
.profil__role {
  color: var(--teal-dark);
  font-weight: 600;
  font-size: 1.03rem;
  margin-bottom: 16px;
}
.profil__text p:not(.profil__role) { max-width: 68ch; }
.profil__text p + p { margin-top: 12px; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(320px, 460px) 1fr;
  gap: 40px;
  align-items: stretch;
}
.contact__card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 34px 32px;
}
.contact__card h2 {
  font-family: var(--font-serif);
  font-size: 1.68rem;
  color: var(--ink);
  margin-bottom: 20px;
}
.contact__list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
.contact__list li { display: flex; align-items: flex-start; gap: 12px; }
.contact__list svg {
  width: 20px; height: 20px; flex: none; margin-top: 2px;
  fill: none; stroke: var(--teal); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.contact__list a { color: var(--slate); text-decoration: none; }
.contact__list a:hover { color: var(--teal-dark); }
.contact__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.contact__note { font-size: 0.952rem; color: var(--slate); margin: 18px 0 0; max-width: 40ch; }
.contact__map { display: flex; flex-direction: column; gap: 12px; }
.contact__map iframe {
  width: 100%; height: 100%; min-height: 420px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.contact-avis .quote-card { max-width: 640px; margin-inline: auto; }

.contact-hero__points { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; font-size: 1.03rem; }
.contact-hero__points li { display: flex; align-items: center; gap: 12px; }
.contact-hero__points strong { color: var(--ink); }
.contact-hero__points svg {
  width: 26px; height: 26px; flex: none;
  fill: none; stroke: var(--teal); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

.contact-split {
  display: grid;
  grid-template-columns: minmax(300px, 420px) 1fr;
  gap: 48px;
  align-items: start;
}
.contact-steps { display: flex; flex-direction: column; gap: 22px; margin-top: 28px; }
.contact-step { display: flex; gap: 16px; align-items: flex-start; }
.contact-step__num {
  flex: none;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--teal);
  color: var(--white);
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.918rem;
}
.contact-step h3 { font-size: 1.098rem; color: var(--ink); margin-bottom: 4px; }
.contact-step p { font-size: 1.008rem; margin: 0; }
.quote-card--mini { margin-top: 30px; }
.quote-card--mini p { font-family: var(--font-serif); color: var(--ink); font-size: 1.142rem; margin: 0; }

.contact-form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 34px 36px;
}
.contact-form-card h2 {
  font-family: var(--font-serif);
  font-size: 1.568rem;
  color: var(--ink);
  margin-bottom: 24px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-grid .form-field { margin-bottom: 0; }
.form-grid { margin-bottom: 16px; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-size: 0.918rem; font-weight: 600; color: var(--ink); }
.req { color: #c0392b; }
.form-field input,
.form-field select,
.form-field textarea {
  font: inherit;
  font-size: 1.03rem;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--white);
  width: 100%;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.form-field textarea { resize: vertical; }
.form-fieldset { border: none; margin: 4px 0 20px; }
.form-fieldset legend { font-size: 0.918rem; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.form-hint { font-weight: 400; color: var(--slate); }
.form-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 20px; }
.form-checks label { display: flex; align-items: flex-start; gap: 8px; font-size: 0.986rem; cursor: pointer; }
.form-checks input { margin-top: 3px; accent-color: var(--teal); }
.form-field--website { position: absolute; left: -9999px; }
.form-rgpd { display: flex; gap: 8px; font-size: 0.952rem; margin: 4px 0 20px; cursor: pointer; }
.form-rgpd input { margin-top: 2px; accent-color: var(--teal); }
.form-submit { width: 100%; }
.form-status { margin: 12px 0 0; font-size: 0.986rem; min-height: 1.2em; }
.form-status--ok { color: var(--teal-dark); font-weight: 600; }
.form-status--err { color: #c0392b; }

.contact-infos {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.contact-info-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 32px;
}
.contact-info-card h2 { font-family: var(--font-serif); font-size: 1.4rem; color: var(--ink); margin-bottom: 12px; }
.contact-info-card p { font-size: 1.03rem; }
.contact-info-card .btn { margin-top: 16px; }
.contact-info-card--map { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.contact-info-card__map iframe { width: 100%; height: 100%; min-height: 220px; border-radius: var(--radius-sm); border: 1px solid var(--line); display: block; }
.contact-info-card__handle { font-weight: 600; color: var(--ink); margin-top: 14px; }
.contact-info-card .social-links { margin-top: 18px; }
.contact-info-card--mail { text-align: left; }
.contact-info-card__icon { display: block; width: 44px; height: 44px; color: var(--teal); margin-bottom: 14px; }
.contact-info-card__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.contact-faq { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 8px; }
.contact-faq__item h3 { font-size: 1.064rem; color: var(--ink); margin-bottom: 8px; }
.contact-faq__item p { font-size: 0.986rem; margin: 0; }

.social-links { display: flex; gap: 10px; margin-top: 14px; }
.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--teal-dark);
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.social-links a:hover { border-color: var(--teal); background: var(--teal); color: var(--white); }
.social-links svg { width: 18px; height: 18px; fill: currentColor; }

/* ============================================================
   GABARITS PAGES INTÉRIEURES
   (réutiliser tel quel sur les prochaines pages)
   ============================================================ */
.page-hero {
  background:
    radial-gradient(80% 130% at 80% 0%, #ece5da 0%, transparent 55%),
    var(--cream);
  padding-block: 48px 44px;
}
.page-hero h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2.016rem, 3.808vw, 2.912rem);
  max-width: 22ch;
  margin-bottom: .3em;
}
.page-hero h1 em { font-style: normal; color: var(--teal); }
.page-hero p { max-width: 60ch; margin: 0; }

.breadcrumb { font-size: 0.829rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 22px; }
.breadcrumb a { color: var(--slate); text-decoration: none; }
.breadcrumb a:hover { color: var(--teal-dark); }
.breadcrumb li { display: inline; }
.breadcrumb li:not(:last-child)::after { content: '\2192'; margin-inline: 8px; color: var(--teal); }

/* Contenu éditorial (mentions légales, articles…) */
.prose { max-width: 72ch; }
.prose h2 { font-family: var(--font-serif); font-size: 1.68rem; margin-top: 1.8em; }
.prose h3 { font-size: 1.176rem; margin-top: 1.5em; }
.prose a { color: var(--teal-dark); }
.prose li { list-style: disc; margin-left: 1.2em; margin-bottom: .4em; }

/* ============================================================
   CALCULATEUR · bannière home + page calculateur.html
   ============================================================ */
.hero__calc { margin: 16px 0 0; font-size: 0.952rem; }
.nowrap { white-space: nowrap; }

.calc-banner {
  /* Crème du site (le beige texturé de l'accueil détonnait ici : retour Véro 2026-08-19) */
  background: var(--cream);
  border-block: 1px solid #e6e1d8;
  padding-block: 52px;
}
.calc-banner__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
}
.calc-banner__content h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.792rem, 3.36vw, 2.464rem);
  color: var(--ink);
  max-width: 24ch;
}
.calc-banner__content h2 em { font-style: normal; color: var(--teal-dark); }
.calc-banner__content p { color: var(--slate); max-width: 54ch; margin-bottom: 24px; }
.calc-banner__figure {
  text-align: center;
  border-left: 1px solid rgba(26, 27, 46, .18);
  padding-left: 48px;
}
.calc-banner__num {
  font-family: var(--font-serif);
  font-size: clamp(3.584rem, 6.72vw, 5.152rem);
  font-weight: 700;
  color: var(--teal-dark);
  line-height: 1;
}
.calc-banner__cap {
  color: var(--slate);
  font-size: 0.952rem;
  margin-top: 8px;
  max-width: 24ch;
  margin-inline: auto;
}
.calc-banner__cap strong { color: var(--ink); }
.calc-banner__h {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.904em;
  color: var(--teal-dark);
  line-height: 1;
}

.calc__container { max-width: 940px; }

.calc__intro {
  border-left: 4px solid var(--teal);
  background: var(--cream-light);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 20px 24px;
  margin-bottom: 36px;
}
.calc__intro p { margin: 0; }
.calc__intro strong { color: var(--ink); }

.calc__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.calc-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 28px;
}
.calc-card__title {
  font-size: 0.874rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--slate);
  font-weight: 600;
  margin-bottom: 20px;
}

.calc-field { margin-bottom: 20px; }
.calc-field:last-child { margin-bottom: 0; }
.calc-field label {
  display: block;
  font-size: 0.952rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}
.calc-field__hint { font-size: 0.84rem; color: var(--slate); font-weight: 400; margin-left: 6px; }
.calc-field input[type="number"],
.calc-field select {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 1.12rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--cream-light);
  transition: border-color .2s;
  outline: none;
  appearance: none;
}
.calc-field input[type="number"]:focus,
.calc-field select:focus { border-color: var(--teal); background: var(--white); }

.calc-range { display: flex; align-items: center; gap: 14px; }
.calc-range input[type="range"] { flex: 1; height: 4px; accent-color: var(--teal); cursor: pointer; }
.calc-range__val { font-size: 1.12rem; font-weight: 700; color: var(--teal-dark); min-width: 48px; text-align: right; }

.calc-results {
  background: var(--ink);
  border-radius: var(--radius);
  padding: 36px 40px;
  margin-bottom: 24px;
}
.calc-results__title {
  font-size: 0.874rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .55);
  font-weight: 600;
  margin-bottom: 28px;
}
.calc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.calc-stat {
  background: rgba(255, 255, 255, .07);
  border-radius: var(--radius-sm);
  padding: 20px;
  text-align: center;
}
.calc-stat--highlight { background: var(--teal); }
.calc-stat__val { font-family: var(--font-serif); font-size: 2.24rem; font-weight: 700; color: var(--white); line-height: 1; }
.calc-stat__lbl { font-size: 0.84rem; color: rgba(255, 255, 255, .65); margin-top: 6px; }
.calc-stat--highlight .calc-stat__lbl { color: rgba(255, 255, 255, .85); }

.calc-results__subtitle {
  font-size: 0.874rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--teal-soft);
  font-weight: 600;
  margin-bottom: 12px;
}
.calc-scenarios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.calc-scenario {
  background: rgba(255, 255, 255, .07);
  border-radius: var(--radius-sm);
  padding: 16px;
  text-align: center;
}
.calc-scenario__pct { font-size: 0.896rem; color: rgba(255, 255, 255, .65); margin-bottom: 4px; }
.calc-scenario__amount { font-family: var(--font-serif); font-size: 1.456rem; font-weight: 700; color: var(--white); }
.calc-scenario__desc { font-size: 0.784rem; color: rgba(255, 255, 255, .55); margin-top: 4px; line-height: 1.3; }

.calc-seuil { margin-bottom: 24px; }
.calc-seuil__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.calc-seuil__item {
  padding: 16px;
  background: var(--cream-light);
  border-left: 3px solid var(--teal);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.calc-seuil__val { font-family: var(--font-serif); font-size: 1.568rem; font-weight: 700; color: var(--ink); }
.calc-seuil__lbl { font-size: 0.896rem; margin-top: 4px; }

.calc-insight {
  background: var(--teal);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 24px;
}
.calc-insight p { margin: 0; color: var(--white); }
.calc-insight strong { font-weight: 700; }

.calc-cta {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 32px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.calc-cta__text h2 { font-family: var(--font-serif); font-size: 1.4rem; margin-bottom: 6px; }
.calc-cta__text p { font-size: 0.986rem; margin: 0; }

.calc-disclaimer { text-align: center; font-size: 0.84rem; color: var(--slate); margin: 24px 0 0; }

/* ============================================================
   ACTUALITÉS (liste + articles)
   ============================================================ */
.post-date { font-size: 0.952rem; color: var(--slate); margin: 0; }

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--slate);
  box-shadow: var(--shadow-chip);
  transition: transform .18s ease, box-shadow .18s ease;
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.post-card__media { aspect-ratio: 16 / 9; background: var(--cream-light); overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: 18px 20px 22px; }
.post-card__date {
  font-size: 0.806rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--teal-dark);
  font-weight: 700;
  margin: 0 0 6px;
}
.post-card__body h2 { font-family: var(--font-serif); font-size: 1.176rem; line-height: 1.35; margin: 0 0 8px; }
.post-card__excerpt { font-size: 0.952rem; margin: 0; }

.section-more--left { text-align: left; margin-top: 36px; }

.post-content { margin-inline: auto; }
.prose img { border-radius: var(--radius-sm); margin: 1.2em 0; height: auto; }
.prose figure { margin: 1.2em 0; }
.prose figcaption { font-size: 0.896rem; color: var(--slate); margin-top: 6px; }
.prose table { border-collapse: collapse; font-size: 1.008rem; margin: 1.2em 0; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; vertical-align: top; }
.prose th { background: var(--cream-light); color: var(--ink); }
.prose blockquote { border-left: 3px solid var(--teal); padding: 4px 0 4px 18px; color: var(--ink); margin: 1.2em 0; }

/* ============================================================
   PAGES INTÉRIEURES · composants
   ============================================================ */
.eyebrow {
  font-size: 0.829rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--teal-dark);
  margin: 0 0 10px;
}

/* Hero de page intérieure : compact, texte à gauche, visuel en carte à droite */
.page-hero--split { padding-block: 40px 44px; }
.page-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
}
.page-hero--split h1 { font-size: clamp(1.904rem, 3.36vw, 2.632rem); }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.page-hero__visual img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  background: var(--white);
}

/* Cartes atouts / leviers */
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.feature-grid--6 { grid-template-columns: repeat(6, 1fr); }
.feature-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-chip);
  padding: 22px 16px;
  text-align: center;
}
.feature-card__icon { display: block; width: 42px; height: 42px; margin: 0 auto 12px; color: var(--teal); }
.feature-card__icon svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.feature-card h3 { font-size: 1.03rem; margin: 0 0 6px; }
.feature-card p { font-size: 0.896rem; line-height: 1.5; margin: 0; }

/* Approche : étapes numérotées + visuel + résultats */
.approche__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr .9fr;
  gap: 44px;
  align-items: center;
}
.step { display: flex; gap: 14px; margin-bottom: 20px; }
.step:last-child { margin-bottom: 0; }
.step__num {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid var(--teal);
  color: var(--teal-dark);
  font-weight: 700;
  font-size: 0.918rem;
  display: grid;
  place-items: center;
}
.step h3 { font-size: 1.098rem; margin: 0 0 3px; }
.step p { font-size: 0.952rem; margin: 0; }
.approche__visual img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-card); }

.check-list li { position: relative; padding-left: 32px; margin-bottom: 14px; color: var(--ink); font-weight: 600; font-size: 1.042rem; line-height: 1.45; }
.check-list li::before {
  content: '\2713';
  position: absolute;
  left: 0; top: 1px;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: var(--teal-tint);
  color: var(--teal-dark);
  font-size: 0.84rem;
  display: grid;
  place-items: center;
}

/* Méthode en 3 étapes + témoignage */
.method__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; }
.method-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.method-steps--4 { grid-template-columns: repeat(4, 1fr); }
.method-step {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-chip);
  padding: 24px 20px;
}
.method-step__num {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--teal);
  color: var(--teal-dark);
  font-weight: 700;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.method-step h3 { font-size: 1.098rem; margin: 0 0 6px; }
.method-step p { font-size: 0.941rem; margin: 0; }

.quote-card {
  background: var(--cream-light);
  border-left: 3px solid var(--teal);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 26px 28px;
}
.quote-card blockquote p { font-family: var(--font-serif); font-size: 1.142rem; line-height: 1.6; color: var(--ink); margin: 0 0 14px; }
.quote-card blockquote footer { font-size: 0.952rem; color: var(--slate); }
.quote-card blockquote footer strong { color: var(--ink); }

/* FAQ deux colonnes */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
.faq-grid details { border-bottom: 1px solid var(--line); padding: 15px 0; }
.faq-grid summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  font-size: 1.064rem;
  list-style: none;
  position: relative;
  padding-right: 28px;
}
.faq-grid summary::-webkit-details-marker { display: none; }
.faq-grid summary::after { content: '+'; position: absolute; right: 2px; top: 0; color: var(--teal); font-weight: 700; }
.faq-grid details[open] summary::after { content: '\2013'; }
.faq-grid details p { font-size: 1.008rem; margin: 10px 0 0; }

/* Grille compacte (liste de freins, petits items texte) */
.feature-grid--compact { grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); gap: 12px; }
.feature-grid--compact .feature-card { padding: 18px 12px; box-shadow: none; }
.feature-grid--compact .feature-card__icon { width: 34px; height: 34px; margin-bottom: 10px; }
.feature-grid--compact .feature-card h3 { font-size: 0.941rem; margin: 0; font-weight: 600; }

/* Bandeau parcours sombre (page Vendre en ligne) */
.journey { background: var(--ink); padding-block: 52px; }
.journey__head { max-width: 46ch; margin-bottom: 36px; }
.journey__head h2 { font-family: var(--font-serif); color: var(--white); font-size: clamp(1.568rem, 2.688vw, 2.128rem); margin: 0 0 12px; }
.journey__head p { color: rgba(255, 255, 255, .7); margin: 0; }
.journey__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.journey-card { background: rgba(255, 255, 255, .06); border-radius: var(--radius-sm); overflow: hidden; }
.journey-card img { width: 100%; aspect-ratio: 8 / 9; object-fit: cover; display: block; }
.journey-card__body { padding: 12px 14px 16px; }
.journey-card__body h3 { color: var(--white); font-size: 0.918rem; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 4px; }
.journey-card__body p { color: rgba(255, 255, 255, .65); font-size: 0.851rem; line-height: 1.45; margin: 0; }

/* Bande image + contenu (univers mode) */
.duo { display: grid; grid-template-columns: .9fr 1.4fr; gap: 44px; align-items: center; }
.duo--balance { grid-template-columns: 1fr 1.3fr; }
.duo__visual img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-card); }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; }

/* Encart mini-audit (accueil) : même bleu nuit que les CTA des autres pages (demande Véro 18/08) */
.audit-section { padding-block: 8px 56px; }
.cta-band--audit h2 { font-size: clamp(1.456rem, 2.464vw, 1.904rem); max-width: 22ch; }
.cta-band--audit .btn { flex: none; }

/* Bandeau CTA de bas de page */
.cta-band {
  background: var(--ink);
  border-radius: var(--radius);
  padding: 40px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.cta-band h2 { font-family: var(--font-serif); color: var(--white); font-size: 1.68rem; margin: 0 0 8px; }
.cta-band p { color: rgba(255, 255, 255, .75); margin: 0; max-width: 52ch; }
.cta-band--teal { background: var(--teal); display: block; }
.cta-band--teal p { color: rgba(255, 255, 255, .88); }
.cta-band--teal .btn { margin-top: 18px; }
.cta-band__note { font-size: 0.896rem; margin-top: 14px; }

/* ============================================================
   PAGES AGENCE & DÉVELOPPER · composants maquettes 2026-08
   ============================================================ */

/* Hero agence : photo + badge nom */
.page-hero__visual { position: relative; }
.photo-badge {
  position: absolute;
  left: 22px; bottom: 22px;
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: 12px 20px;
  font-size: 0.941rem;
  line-height: 1.4;
}
.photo-badge strong { display: block; color: var(--ink); font-size: 1.098rem; }

.page-hero__note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  font-size: 1.008rem;
  font-weight: 600;
  color: var(--ink);
}
.page-hero__note svg {
  width: 22px; height: 22px; flex: none; color: var(--teal);
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Vision / histoire / équipe */
.intro-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.intro-card {
  background: var(--cream-light);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
}
.intro-card__icon { display: block; width: 40px; height: 40px; color: var(--teal); margin-bottom: 16px; }
.intro-card__icon svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.intro-card h3 { font-size: 1.176rem; margin-bottom: 12px; }
.intro-card p { font-size: 1.008rem; }
.intro-card p:last-child { margin-bottom: 0; }
.intro-card__accent { color: var(--teal-dark); font-weight: 600; }

/* Étapes numérotées avec flèches (façon de travailler / méthode) */
.work-grid {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 48px;
  align-items: start;
}
.work-grid__intro h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.568rem, 2.688vw, 2.016rem);
  margin-bottom: 14px;
}
.work-grid__intro p { font-size: 1.064rem; }
.work-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.work-steps--5 { grid-template-columns: repeat(5, 1fr); }
.work-step { position: relative; text-align: center; }
.work-step__num {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--teal-dark);
  color: var(--white);
  font-weight: 700;
  font-size: 1.064rem;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
}
.work-step h3 { font-size: 1.03rem; margin-bottom: 8px; }
.work-step p { font-size: 0.918rem; line-height: 1.5; margin: 0; }
.work-step:not(:last-child)::after {
  content: '\2192';
  position: absolute;
  top: 14px;
  right: -19px;
  color: var(--slate);
  font-size: 1.288rem;
}
.work-quote {
  display: block;
  font-size: 1.142rem;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  margin: 44px auto 0;
  max-width: 62ch;
}
.work-quote::before, .work-quote::after { color: var(--teal); font-family: var(--font-serif); font-size: 1.456em; line-height: 0; }
.work-quote::before { content: '\201C\00a0'; }
.work-quote::after { content: '\00a0\201D'; }

/* Engagements / leviers : colonnes séparées par un filet */
.divide-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.divide-grid--6 { grid-template-columns: repeat(6, 1fr); }
.divide-cell { padding: 10px 22px; text-align: center; }
.divide-cell + .divide-cell { border-left: 1px solid var(--line); }
.divide-cell__icon { display: block; width: 38px; height: 38px; margin: 0 auto 14px; color: var(--teal); }
.divide-cell__icon svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.divide-cell__icon .tool-logo { width: 34px; height: 34px; }
.divide-cell h3 { font-size: 0.986rem; margin-bottom: 8px; }
.divide-grid--6 .divide-cell h3 { text-transform: uppercase; letter-spacing: .04em; font-size: 0.896rem; }
.divide-cell p { font-size: 0.918rem; line-height: 1.5; margin: 0; }

/* Pour qui nous travaillons : cartes photo */
.audience-inner {
  display: grid;
  grid-template-columns: 190px repeat(4, 1fr);
  gap: 18px;
  align-items: stretch;
}
.audience-inner > h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.456rem, 2.464vw, 1.792rem);
  align-self: start;
  margin: 0;
}
.audience-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 300px;
  border-radius: var(--radius);
  overflow: hidden;
}
.audience-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.audience-card__body {
  position: relative;
  width: 100%;
  padding: 74px 20px 20px;
  background: linear-gradient(180deg, transparent, rgba(15, 16, 30, .88) 55%);
}
.audience-card__body h3 {
  color: var(--white);
  font-size: 1.03rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.audience-card__body p { color: rgba(255, 255, 255, .85); font-size: 0.896rem; line-height: 1.5; margin: 0; }

/* CTA sombre avec photo */
.cta-duo {
  display: grid;
  grid-template-columns: .75fr 1.65fr;
  background: var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
}
.cta-duo__media { position: relative; min-height: 220px; background: var(--ink); }
.cta-duo__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Le haut de la photo est presque blanc : sans ce voile, son bord se confond avec le fond crème
   et la photo semble « décrochée » de l'encart (pins Véro 14, 16 et 18/08) */
.cta-duo__media::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(26, 27, 46, .38) 0%, rgba(26, 27, 46, .08) 28%, rgba(26, 27, 46, 0) 55%);
  box-shadow: inset 0 0 0 1px rgba(26, 27, 46, .18);
}
.cta-duo__body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: center;
  padding: 44px 48px;
}
.cta-duo__body h2 { font-family: var(--font-serif); color: var(--white); font-size: clamp(1.4rem, 2.464vw, 1.792rem); margin-bottom: 12px; }
.cta-duo__body p { color: rgba(255, 255, 255, .75); margin: 0; max-width: 56ch; }
.cta-duo__action { white-space: nowrap; }

/* Bloc final : question + FAQ + coordonnées */
.cta-card--ink { background: var(--ink); text-align: left; }
.cta-card--ink h2 { font-family: var(--font-serif); text-transform: none; letter-spacing: 0; font-size: 1.512rem; }
.closing-card__title {
  font-size: 1.142rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 10px;
}
.closing-card address { font-style: normal; font-size: 1.008rem; margin: 16px 0; }
.closing-card address strong { color: var(--ink); }
.closing-card .btn { margin-top: 4px; }

/* Constat : 5 items + citation alignés */
.constat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr) 1.45fr;
  gap: 14px;
  align-items: stretch;
}
.constat-grid .feature-card { display: flex; flex-direction: column; justify-content: flex-start; }
.constat-quote {
  background: var(--white);
  border: 1px solid var(--teal-soft);
  border-radius: var(--radius);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.constat-quote p { font-size: 1.064rem; font-weight: 600; color: var(--ink); line-height: 1.55; margin: 0; }
.constat-quote em { font-style: normal; color: var(--teal-dark); }
.constat-quote::before { content: '\201C'; font-family: var(--font-serif); font-size: 2.24rem; line-height: 1; color: var(--teal); }

/* Bande sombre : système d'acquisition + funnel */
.acquisition__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: center;
}
.acquisition__grid h2 {
  color: var(--white);
  font-size: clamp(1.288rem, 2.24vw, 1.68rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.35;
  margin: 0;
}
.acquisition__grid h2 em { font-style: normal; color: var(--teal-soft); }
.acquisition__grid > p { color: rgba(255, 255, 255, .75); margin: 0; }
.funnel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 44px;
}
.funnel__step { display: flex; align-items: center; gap: 12px; }
.funnel__icon {
  width: 46px; height: 46px;
  flex: none;
  border: 1.5px solid var(--teal-soft);
  border-radius: 50%;
  color: var(--teal-soft);
  display: grid;
  place-items: center;
}
.funnel__icon svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.funnel__step span {
  color: var(--white);
  font-size: 0.829rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.funnel__arrow { color: rgba(255, 255, 255, .45); font-size: 1.232rem; }

/* Cartes cible alignées à gauche */
.feature-card--left { text-align: left; padding: 26px 24px; }
.feature-card--left .feature-card__icon { margin: 0 0 14px; }
.feature-card--left h3 { text-transform: uppercase; letter-spacing: .04em; font-size: 0.952rem; }
.feature-card--left p { font-size: 0.952rem; }
.feature-card__ex { font-size: 0.874rem; color: var(--slate); margin-top: 12px !important; }
.pull-line {
  text-align: center;
  font-weight: 600;
  color: var(--teal-dark);
  margin: 36px 0 0;
}

/* Ce que nous pilotons pour vous */
.pilotage-panel {
  background: var(--cream-light);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 44px 46px;
  display: grid;
  grid-template-columns: 1.25fr .95fr 230px;
  gap: 40px;
  align-items: center;
}
.pilotage-panel__title {
  font-size: 1.12rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 26px;
}
.pilot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 26px; }
.pilot { text-align: left; }
.pilot__icon { display: block; width: 34px; height: 34px; color: var(--teal); margin-bottom: 10px; }
.pilot__icon svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.pilot h3 { font-size: 0.896rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.pilot p { font-size: 0.896rem; line-height: 1.5; margin: 0; }
.pilotage-panel__cta h2 { font-size: 1.176rem; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 12px; }
.pilotage-panel__cta p { font-size: 1.008rem; }
.pilotage-panel__cta .cta-band__note { color: var(--slate); }
.pilotage-panel__media img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; border-radius: var(--radius-sm); }

/* Bandeau de preuves sombre */
.proof-strip { background: var(--ink); padding-block: 28px; }
.proof-strip__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.proof { display: flex; align-items: center; gap: 12px; }
.proof__icon {
  width: 40px; height: 40px;
  flex: none;
  border: 1.5px solid var(--teal-soft);
  border-radius: 50%;
  color: var(--teal-soft);
  display: grid;
  place-items: center;
}
.proof__icon svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.proof p { margin: 0; }
.proof strong { display: block; color: var(--white); font-size: 0.851rem; text-transform: uppercase; letter-spacing: .06em; line-height: 1.3; }
.proof span { color: rgba(255, 255, 255, .6); font-size: 0.829rem; line-height: 1.3; }

@media (max-width: 1100px) {
  .work-grid { grid-template-columns: 1fr; gap: 30px; }
  .work-steps, .work-steps--5 { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .work-step:not(:last-child)::after { display: none; }
  .divide-grid, .divide-grid--6 { grid-template-columns: repeat(3, 1fr); gap: 24px 0; }
  .divide-grid .divide-cell:nth-child(4), .divide-grid--6 .divide-cell:nth-child(4) { border-left: none; }
  .audience-inner { grid-template-columns: repeat(2, 1fr); }
  .audience-inner > h2 { grid-column: 1 / -1; }
  .constat-grid { grid-template-columns: repeat(3, 1fr); }
  .constat-quote { grid-column: 1 / -1; }
  .acquisition__grid { grid-template-columns: 1fr; gap: 24px; }
  .funnel { justify-content: flex-start; gap: 16px; }
  .funnel__arrow { display: none; }
  .pilotage-panel { grid-template-columns: 1fr 1fr; }
  .pilotage-panel__media { display: none; }
  .proof-strip__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .intro-cards { grid-template-columns: 1fr; }
  .cta-duo { grid-template-columns: 1fr; }
  .cta-duo__media { max-height: 240px; }
  .cta-duo__body { grid-template-columns: 1fr; padding: 34px 30px; }
}

@media (max-width: 640px) {
  .work-steps, .work-steps--5 { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; }
  .divide-grid, .divide-grid--6 { grid-template-columns: 1fr; }
  .divide-cell { border-left: none !important; }
  .divide-cell + .divide-cell { border-top: 1px solid var(--line); padding-top: 24px; }
  .audience-inner { grid-template-columns: 1fr; }
  .constat-grid { grid-template-columns: 1fr; }
  .pilotage-panel { grid-template-columns: 1fr; padding: 30px 24px; }
  .proof-strip__grid { grid-template-columns: 1fr; }
  .pilot-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ANIMATIONS D'APPARITION (désactivées si reduced motion)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
  .reveal.is-visible { opacity: 1; transform: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid--6 { grid-template-columns: repeat(3, 1fr); }
  .feature-grid--compact { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .journey__grid { grid-template-columns: repeat(3, 1fr); }
  .duo, .duo--balance { grid-template-columns: 1fr; }
  .duo__visual { max-width: 480px; }
  .approche__grid { grid-template-columns: 1fr 1fr; }
  .approche__visual { display: none; }
  .method__grid { grid-template-columns: 1fr; }
  .parcours__inner { grid-template-columns: 1fr; gap: 32px; }
  .parcours__intro { max-width: 60ch; }
  .parcours__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .parcours-step:not(:last-child)::after { display: none; }
  .outils__grid { grid-template-columns: repeat(4, 1fr); }
  .equipe__duo { grid-template-columns: 1fr; gap: 28px; }
  .equipe__photo { max-width: 420px; }
  .contact__grid { grid-template-columns: 1fr; }
  .contact__map iframe { min-height: 340px; }
  .profil { grid-template-columns: 1fr; gap: 28px; }
  .profil .equipe__photo { max-width: 380px; }
}

@media (max-width: 1320px) {
  .site-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-card);
    padding: 12px 24px 20px;
  }
  .site-nav.is-open { display: flex; }
  .site-nav__list { flex-direction: column; gap: 0; }
  .site-nav__list a { display: block; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 0.918rem; white-space: normal; }
  .site-nav__cta { margin-top: 16px; font-size: 0.896rem; padding: .95em 1.8em; }
  .nav-toggle { display: block; }
}

@media (max-width: 980px) {
  .method-steps--4 { grid-template-columns: repeat(2, 1fr); }
  .feature-grid--5 { grid-template-columns: repeat(2, 1fr) !important; }
  .journey__grid--5 { grid-template-columns: repeat(2, 1fr); }
  .contact-split { grid-template-columns: 1fr; }
  .contact-infos { grid-template-columns: 1fr; }
  .contact-faq { grid-template-columns: repeat(2, 1fr); }
  .avant-apres { grid-template-columns: 1fr; }
  .avant-apres__fleche { transform: rotate(90deg); justify-self: center; }
  .cta-final { grid-template-columns: 1fr; }
  .hero__inner { grid-template-columns: 1fr; padding-block: 52px 48px; }
  .hero {
    background:
      linear-gradient(92deg, rgba(244, 241, 236, .94) 0%, rgba(244, 241, 236, .86) 55%, rgba(244, 241, 236, .6) 100%),
      url('../assets/img/hero-bg.webp?v=20260811') center / cover no-repeat,
      var(--cream);
  }
  .calc-banner__inner { grid-template-columns: 1fr; gap: 28px; }
  .calc-banner__figure { border-left: none; border-top: 1px solid rgba(26, 27, 46, .18); padding-left: 0; padding-top: 24px; }
  .personas__grid { grid-template-columns: repeat(2, 1fr); }
  .closing__grid { grid-template-columns: 1fr; }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .page-hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .page-hero__visual { max-width: 480px; }
  .faq-grid { grid-template-columns: 1fr; }
  .realisations__grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }

  /* Hub : passage en liste fluide autour du nœud */
  .hub__diagram { aspect-ratio: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
  .hub__lines { display: none; }
  .hub__node { position: static; transform: none; order: -1; flex-basis: 100%; max-width: 300px; margin: 0 auto 16px; }
  .hub-chip { position: static; transform: none; }
}

@media (max-width: 640px) {
  .section { padding-block: 44px; }
  .calc__grid { grid-template-columns: 1fr; }
  .calc-stats { grid-template-columns: 1fr; }
  .calc-scenarios { grid-template-columns: 1fr; }
  .calc-seuil__grid { grid-template-columns: 1fr; }
  .calc-results { padding: 28px 24px; }
  .calc-cta { padding: 28px 24px; }
  .post-grid { grid-template-columns: 1fr; }
  .feature-grid, .feature-grid--6 { grid-template-columns: 1fr; }
  .feature-grid--compact { grid-template-columns: repeat(2, 1fr); }
  .form-grid, .form-checks { grid-template-columns: 1fr; }
  .contact-info-card--map { grid-template-columns: 1fr; }
  .contact-faq { grid-template-columns: 1fr; }
  .journey__grid--5 { grid-template-columns: 1fr; }
  .journey__grid { grid-template-columns: repeat(2, 1fr); }
  .check-grid { grid-template-columns: 1fr; }
  .approche__grid { grid-template-columns: 1fr; }
  .method-steps { grid-template-columns: 1fr; }
  .cta-band { padding: 30px 24px; }
  .personas__grid { grid-template-columns: 1fr; }
  .persona-card__title { max-width: none; }
  .persona-card { padding-bottom: 30px; }
  .parcours__steps { grid-template-columns: 1fr 1fr; }
  .outils__grid { grid-template-columns: repeat(2, 1fr); }
  .equipe__cards { grid-template-columns: 1fr; max-width: 340px; }
  .hero__actions .btn { flex: 1 1 100%; }
}

@media (max-width: 460px) {
  .parcours__steps { grid-template-columns: 1fr; max-width: 300px; margin-inline: auto; }
}

/* Docs client reprises du WordPress (/ovh/, /copilhost/) : étapes numérotées sans puce */
.prose ol.idcop-steps li { list-style: none; margin-left: 0; }


/* Carte Google Maps chargée à la demande (RGPD) */
.map-consent { min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; background: var(--teal-tint); border: 1px dashed var(--teal-soft, #9fd9de); border-radius: var(--radius-sm, 10px); }
.map-consent p { margin: 0; font-size: 0.9rem; color: var(--muted, #555); max-width: 34ch; }