@media (max-width: 900px) {
  div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  h1[style] { font-size: clamp(38px, 10vw, 76px) !important; }
  h2[style] { font-size: clamp(30px, 8vw, 56px) !important; }
  section[style] { padding-left: 20px !important; padding-right: 20px !important; }
  .cvc-photo-hero { height: 340px !important; }
  .cvc-portrait { height: 400px !important; }
  nav[style], header[style] > div { flex-wrap: wrap !important; }
  div:has(> .cvc-saison) { flex-wrap: wrap !important; }
  .cvc-saison { flex: 1 1 160px !important; }
  .cvc-badge { border-radius: 16px !important; text-align: center !important; }
}
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 92px; }
#cvc-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none;
  background: rgba(30,42,54,.97); backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); gap: 10px; }
#cvc-bar a { flex: 1; text-align: center; font-family: 'Archivo Black', sans-serif;
  font-size: 16px; padding: 14px 10px; border-radius: 999px; }
#cvc-bar .cvc-tel { background: #35A8DE; color: #1E2A36; }
#cvc-bar .cvc-devis { border: 2px solid rgba(245,246,248,.4); color: #F5F6F8; }
@media (max-width: 900px) { #cvc-bar { display: flex; }
  /* PAS sur body : #dc-root (racine du runtime) a une hauteur CSS fixe
     (100vh) et déborde en overflow visible, donc le padding-bottom de body
     tombe juste après cette hauteur nominale, pas après le vrai bas visuel
     de la page — vérifié en debug le 15/08, un padding-bottom sur body était
     sans effet sur l'écran réel. On agit directement sur le footer, dernier
     élément du flux réel, qui lui pousse correctement le vrai bas de page. */
  footer { padding-bottom: calc(100px + env(safe-area-inset-bottom)); } }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid #35A8DE; outline-offset: 2px; }
/* héros : repli statique tant que le script n'a pas pris la main (A3) */
.cvc-anime { display: none; }
html.cvc-js .cvc-repli { display: none; }
html.cvc-js .cvc-anime { display: inline; }
/* lien d'évitement : hors écran, révélé à la tabulation */
.cvc-skip { position: fixed; top: -60px; left: 12px; z-index: 200;
  background: #1E2A36; color: #F5F6F8; font-family: Archivo, sans-serif;
  font-weight: 700; font-size: 15px; padding: 12px 18px; border-radius: 0 0 10px 10px;
  transition: top .2s cubic-bezier(.4,0,.2,1); }
.cvc-skip:focus { top: 0; }
/* survol : cartes soulevées (le zoom photo est géré par la maquette) */
@media (hover: hover) {
  .cvc-carte {
    transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1),
      opacity .6s cubic-bezier(.4,0,.2,1); }
  .cvc-carte:hover { transform: translateY(-6px); }
  /* néon discret en surcouche ::after : ne touche pas aux box-shadow inline
     posés par le style-hover du runtime */
  .cvc-carte, .cvc-mini, .cvc-mini-sombre { position: relative; }
  .cvc-carte::after, .cvc-mini::after, .cvc-mini-sombre::after {
    content: ""; position: absolute; inset: 0; border-radius: 18px; pointer-events: none;
    box-shadow: 0 0 0 1px rgba(53,168,222,.5), 0 0 22px rgba(53,168,222,.28),
      inset 0 0 16px rgba(53,168,222,.08);
    opacity: 0; transition: opacity .3s cubic-bezier(.4,0,.2,1); }
  .cvc-mini::after, .cvc-mini-sombre::after { border-radius: 14px; }
  .cvc-carte:hover::after, .cvc-mini:hover::after,
  .cvc-mini-sombre:hover::after { opacity: 1; }
  /* pastilles de villes : lueur légère */
  #zone .cvc-ville {
    transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s cubic-bezier(.4,0,.2,1); }
  #zone .cvc-ville:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 16px rgba(53,168,222,.3); }
  /* bordure-projecteur : anneau lumineux qui suit le curseur sur la pastille */
  .cvc-ville { position: relative; }
  .cvc-ville::after { content: ""; position: absolute; inset: -3px; border-radius: 999px;
    padding: 3px; pointer-events: none;
    background: radial-gradient(circle 70px at var(--cvc-mx, 50%) var(--cvc-my, 50%),
      #35A8DE 0%, rgba(53,168,222,.55) 40%, transparent 72%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .25s cubic-bezier(.4,0,.2,1); }
  .cvc-ville:hover::after { opacity: 1; }
  .cvc-ville:hover { box-shadow: 0 0 22px rgba(53,168,222,.35); }
  /* chevrons FAQ : accent au survol de la question */
  .faq-chev { transition: border-color .25s cubic-bezier(.4,0,.2,1),
    box-shadow .25s cubic-bezier(.4,0,.2,1), color .25s cubic-bezier(.4,0,.2,1); }
  #questions button:hover .faq-chev { border-color: #35A8DE !important; color: #35A8DE !important;
    box-shadow: 0 0 12px rgba(53,168,222,.35); }
  /* boutons d'action : halo au survol */
  #top .cvc-pilule:hover, button[type="submit"]:hover, #cvc-bar a:hover {
    box-shadow: 0 0 20px rgba(53,168,222,.4) !important; }
  /* carte projecteur (« Parlons de votre projet ») : lumière qui suit la souris */
  .cvc-mini-sombre, .cvc-panneau { position: relative; }
  .cvc-mini-sombre::before, .cvc-panneau::before {
    content: ""; position: absolute; inset: 0; border-radius: 14px; pointer-events: none;
    background: radial-gradient(circle 240px at var(--cvc-mx, 50%) var(--cvc-my, 50%),
      rgba(53,168,222,.22), transparent 65%);
    opacity: 0; transition: opacity .35s cubic-bezier(.4,0,.2,1); }
  .cvc-panneau::before { border-radius: 20px;
    background: radial-gradient(circle 320px at var(--cvc-mx, 50%) var(--cvc-my, 50%),
      rgba(53,168,222,.10), transparent 65%); }
  .cvc-mini-sombre:hover::before, .cvc-panneau:hover::before { opacity: 1; }
}
/* clic : enfoncement bref des boutons */
.cvc-pilule:active, button:active, #cvc-bar a:active {
  transform: scale(.96); transition: transform .15s cubic-bezier(.4,0,.2,1); }
/* boucle discrète : halo sur le bouton d'appel de la barre mobile */
@keyframes cvc-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(53,168,222,0); }
  50% { box-shadow: 0 0 0 9px rgba(53,168,222,.20); } }
.cvc-tel-glow { animation: cvc-glow 4s ease-in-out infinite; }
/* scroll : barre de progression de lecture */
#cvc-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120;
  background: #35A8DE; transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
/* blob morphing : forme organique (amplitude doublée) */
@keyframes cvc-blob-shape {
  0%, 100% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
  33% { border-radius: 42% 58% 66% 34% / 40% 34% 66% 60%; }
  66% { border-radius: 62% 38% 32% 68% / 66% 54% 46% 34%; }
}
.cvc-blob-ring { animation: cvc-blob-shape 18s ease-in-out infinite; }
@keyframes cvc-blob-move {
  0%, 100% { border-radius: 38% 62% 66% 34% / 42% 34% 66% 58%; transform: rotate(0) scale(1); }
  33% { border-radius: 66% 34% 30% 70% / 60% 70% 30% 40%; transform: rotate(16deg) scale(1.16); }
  66% { border-radius: 30% 70% 60% 40% / 70% 40% 60% 30%; transform: rotate(-12deg) scale(.88); }
}
#cvc-blob { position: absolute; right: -160px; top: 8%; width: 620px; height: 620px;
  background: radial-gradient(circle at 40% 40%, rgba(53,168,222,.5), rgba(53,168,222,.12) 55%, transparent 72%);
  opacity: .14; pointer-events: none; z-index: 0;
  animation: cvc-blob-move 22s ease-in-out infinite; }
/* modale du formulaire (ouverte à l'arrivée sur la section contact).
   Le panneau N'EST PAS déplacé dans le DOM (le runtime perdrait ses
   liaisons) : il passe simplement en position fixed centré, voile derrière. */
#cvc-modal { position: fixed; inset: 0; z-index: 130; display: none;
  background: rgba(14,20,26,.6); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .3s cubic-bezier(.4,0,.2,1); }
#cvc-modal.cvc-on { display: block; }
#cvc-modal.cvc-vis { opacity: 1; }
.cvc-modal-panel { position: fixed !important; z-index: 131 !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(640px, calc(100vw - 36px)) !important;
  max-height: 88vh !important; overflow: auto !important;
  box-shadow: 0 30px 80px rgba(10,16,24,.5) !important; }
#cvc-modal-close { position: fixed; top: 16px; right: 16px; z-index: 132;
  width: 44px; height: 44px; border-radius: 50%; border: none; background: #1E2A36;
  color: #F5F6F8; font-size: 18px; cursor: pointer; display: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.35); }
#cvc-modal-close.cvc-on { display: block; }
#cvc-modal-close:hover { background: #35A8DE; color: #1E2A36; }
#cvc-confetti { position: fixed; inset: 0; z-index: 133; pointer-events: none; }
/* notifications toast */
#cvc-toast { position: fixed; right: 18px; bottom: 18px; z-index: 140;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
@media (max-width: 900px) { #cvc-toast { bottom: calc(90px + env(safe-area-inset-bottom)); } }
.cvc-toast { display: flex; align-items: center; gap: 12px;
  font-family: Archivo, sans-serif; font-size: 15.5px; line-height: 1.4; color: #F5F6F8;
  background: rgba(30,42,54,.96); border: 1px solid rgba(53,168,222,.45);
  border-left: 4px solid #35A8DE; padding: 14px 18px; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(10,16,24,.4);
  max-width: min(380px, calc(100vw - 36px)); pointer-events: auto;
  opacity: 0; transform: translateY(12px);
  transition: opacity .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1); }
.cvc-toast.cvc-vis { opacity: 1; transform: none; }
.cvc-toast-ico { flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: #35A8DE; color: #1E2A36; display: grid; place-items: center;
  font-family: 'Archivo Black', sans-serif; font-size: 14px; }
.cvc-toast-err { border-color: rgba(212,135,60,.55); border-left-color: #D4873C; }
.cvc-toast-err .cvc-toast-ico { background: #D4873C; }
/* curseur avant/après réactif (teinte chaude) — poignée en blob morphing */
.g-ligne > span { transition: transform .2s cubic-bezier(.4,0,.2,1),
  box-shadow .2s cubic-bezier(.4,0,.2,1);
  animation: cvc-blob-shape 7s ease-in-out infinite; }
.g-ligne { transition: box-shadow .2s cubic-bezier(.4,0,.2,1); }
.glisseur:hover .g-ligne { box-shadow: 0 0 20px rgba(212,135,60,.65); }
.glisseur:has(.g-range:active) .g-ligne > span,
.glisseur:has(.g-range:focus-visible) .g-ligne > span {
  transform: translate(-50%, -50%) scale(1.18) !important;
  box-shadow: 0 6px 24px rgba(212,135,60,.6), 0 0 0 7px rgba(212,135,60,.25) !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cvc-tel-glow, .cvc-blob-ring, #cvc-blob { animation: none !important; }
  .cvc-carte:hover { transform: none !important; }
  .cvc-ville:hover { transform: none !important; }
  .g-ligne > span, .g-ligne { transition: none !important; animation: none !important; }
  .g-lab { transition: none !important; }
  #cvc-modal, #cvc-modal-box { transition: none !important; }
  .cvc-toast { transition: none !important; }
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/51b78fd3.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;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/51b78fd3.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;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/51b78fd3.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;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/51b78fd3.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;
}
/* latin */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ec6bf305.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;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/61f74c29.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;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/71b7318d.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;
}
body { margin: 0; background: #F5F6F8; -webkit-font-smoothing: antialiased; }
  a { color: #1E2A36; text-decoration: none; }
  a:hover { color: #35A8DE; }
  html { scroll-behavior: smooth; }
  [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1), transform 0.6s cubic-bezier(0.4,0,0.2,1); }
  [data-reveal].est-visible { opacity: 1; transform: none; }
  @keyframes pulseUrgence { 0%, 100% { box-shadow: 0 0 0 0 rgba(53,168,222,0.45); } 55% { box-shadow: 0 0 0 14px rgba(53,168,222,0); } }
  .cta-pulse { animation: pulseUrgence 2.4s cubic-bezier(0.4,0,0.2,1) infinite; }
  .nav-scrolled { box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
  .lien-anime { background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0% 2px; padding-bottom: 3px; transition: background-size 0.3s cubic-bezier(0.4,0,0.2,1); }
  .lien-anime:hover, nav a.lien-anime.section-active { background-size: 100% 2px; }
  .img-zoom { transition: transform 0.5s cubic-bezier(0.4,0,0.2,1); }
  .img-zoom:hover { transform: scale(1.04); }
  .logo-boite { transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); }
  a:hover > .logo-boite { transform: rotate(-10deg) scale(1.07); }
  .faq-chev { transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), border-color 0.3s cubic-bezier(0.4,0,0.2,1), color 0.3s cubic-bezier(0.4,0,0.2,1); }
  .faq-r { max-height: 0; transition: max-height 0.45s cubic-bezier(0.4,0,0.2,1); }
  .faq-item.ouvert .faq-r { max-height: 380px; }
  .faq-item.ouvert .faq-chev { transform: rotate(45deg); border-color: #35A8DE; color: #35A8DE; }
  @keyframes tourner { to { transform: rotate(360deg); } }
  .spinner { animation: tourner 0.8s linear infinite; }
  @keyframes apparitionSucces { from { opacity: 0; transform: translateY(-14px); } }
  .succes-anim { animation: apparitionSucces 0.5s cubic-bezier(0.4,0,0.2,1); }
  @keyframes entreeFlottant { from { opacity: 0; transform: translateX(90px); } }
  #appel-flottant { animation: pulseUrgence 2.4s cubic-bezier(0.4,0,0.2,1) 1.4s infinite, entreeFlottant 0.5s cubic-bezier(0.4,0,0.2,1) 0.8s backwards; }
  @keyframes cibleFlash { 30% { color: #35A8DE; } }
  section:target h2 { animation: cibleFlash 1.4s cubic-bezier(0.4,0,0.2,1) 0.25s; }
  nav a.section-active { color: #35A8DE !important; }
  .bulle { position: relative; cursor: help; }
  .bulle::after { content: attr(data-bulle); position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 40; width: max-content; max-width: 260px; background: #F5F6F8; color: #1E2A36; font-family: Archivo, sans-serif; font-size: 13.5px; font-weight: 600; letter-spacing: 0; line-height: 1.45; padding: 10px 14px; border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,0.35); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity 0.25s cubic-bezier(0.4,0,0.2,1), transform 0.25s cubic-bezier(0.4,0,0.2,1); }
  .bulle:hover::after { opacity: 1; transform: translateY(0); }
  @keyframes clignote { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } }
  .caret { display: inline-block; width: 11px; height: 20px; background: #35A8DE; vertical-align: -3px; margin-left: 4px; animation: clignote 0.9s steps(1) infinite; }
  #appel-flottant { display: none; }
  @media (max-width: 760px) { #appel-flottant { display: grid; } }
  @media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
    .cta-pulse, #appel-flottant, .succes-anim, section:target h2 { animation: none; }
    .img-zoom, .logo-boite, .lien-anime, .faq-r, .faq-chev, .bulle::after { transition: none; }
    .caret { animation: none; }
    html { scroll-behavior: auto; }
  }