/* =====================================================================
   ALSAPAC – Feuille de style

   SOMMAIRE
    1. Couleurs et variables
    2. Base (page, titres, textes)
    3. Boutons
    4. En-tête et menu
    5. Section d'accueil (hero)
    6. Cartes, puces et champs
    7. Bandeau des marques
    8. Services
    9. Économies (simulateur)
   10. Notre méthode
   11. FAQ
   12. Devis (formulaire)
   13. Pied de page et bouton flottant
   14. Animations à l'apparition
   15. Écrans moyens et petits (responsive)
   16. Pages légales (mentions légales, confidentialité)
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. COULEURS ET VARIABLES
   Pour changer une couleur du site, modifie-la ici.
   --------------------------------------------------------------------- */

:root {
  --ink:    #0b3558;   /* texte principal */
  --blue:   #006bff;   /* bleu principal (boutons, liens) */
  --slate:  #476788;   /* texte secondaire */
  --mist:   #a6bbd1;   /* gris-bleu clair */
  --cloud:  #f8f9fb;   /* fond de la page */
  --paper:  #fff;      /* fond des cartes */
  --pebble: #f0f3f8;   /* fond des champs */
  --line:   #d4e0ed;   /* bordures */
  --cobalt: #004eba;   /* texte des badges */
  --badge:  #e6f0ff;   /* fond des badges */
  --cyan:   #0099ff;
  --amber:  #ff9a1f;   /* orange d'accent */
  --navy:   #0b3558;   /* fond foncé (section devis) */

  --shadow:
    rgba(71, 103, 136, .04) 0 4px 5px,
    rgba(71, 103, 136, .03) 0 8px 15px,
    rgba(71, 103, 136, .08) 0 30px 50px;
  --shadow-small:
    rgba(71, 103, 136, .04) 0 4px 5px,
    rgba(71, 103, 136, .03) 0 8px 15px,
    rgba(71, 103, 136, .06) 0 15px 30px;

  color-scheme: light;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Mode sombre automatique (si l'appareil du visiteur est en mode sombre) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --ink:    #e8f1fb;
    --slate:  #9db4cc;
    --mist:   #6d88a5;
    --cloud:  #0a1a2b;
    --paper:  #10263c;
    --pebble: #16324d;
    --line:   #234563;
    --badge:  #12365e;
    --cobalt: #8dbbff;
    color-scheme: dark;
  }
}

/* Mode sombre forcé (même couleurs que ci-dessus) */
:root[data-theme=dark] {
  --ink:    #e8f1fb;
  --slate:  #9db4cc;
  --mist:   #6d88a5;
  --cloud:  #0a1a2b;
  --paper:  #10263c;
  --pebble: #16324d;
  --line:   #234563;
  --badge:  #12365e;
  --cobalt: #8dbbff;
  color-scheme: dark;
}


/* ---------------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------------- */

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(84px + env(safe-area-inset-top, 0px));
}

body {
  font: 400 16px/1.6 Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--cloud);
  color: var(--ink);
  overflow-x: hidden;
}

/* Bande de couleur sous la barre d'état des téléphones */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: var(--paper);
}

[hidden] {
  display: none !important;
}

a {
  color: inherit;
}

/* Icônes (le dessin vient de la liste d'icônes dans index.html) */
svg.i {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* Conteneur centré (largeur max 1200px) */
.container {
  max-width: 1200px;
  margin: auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

section {
  padding: 72px 0;
  position: relative;
}

h1, h2, h3 {
  font-weight: 700;
  line-height: 1.15;
}

h1 {
  font-size: clamp(38px, 6vw, 68px);
  font-weight: 800;
  letter-spacing: -.02em;
}

h2 {
  font-size: clamp(34px, 4.4vw, 50px);
  letter-spacing: -.01em;
}

h3 {
  font-size: 22px;
}

p {
  color: var(--slate);
}

/* Titre de section centré (badge + titre + texte) */
.section-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 48px;
}

.section-head p {
  margin-top: 16px;
  font-size: 18px;
}

/* Paragraphe d'introduction à côté d'un titre */
.intro {
  margin-top: 16px;
  font-size: 18px;
}

/* Petite étiquette arrondie au-dessus des titres */
.badge {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  background: var(--badge);
  color: var(--cobalt);
  font-size: 13px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 50px;
  margin-bottom: 20px;
}

/* Liste avec coches */
.check-list {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  display: grid;
  gap: 12px;
}

.check-list li {
  display: flex;
  gap: 10px;
  color: var(--ink);
  font-weight: 500;
}

.check-list svg {
  color: var(--blue);
  font-size: 22px;
  margin-top: 2px;
}

/* Taches de couleur floues en arrière-plan */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .4;
  transform: translateY(calc(var(--sy, 0) * -.1px));
}

/* Séparation en deux colonnes (texte à gauche, carte à droite) */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}


/* ---------------------------------------------------------------------
   3. BOUTONS
   --------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s, background .25s;
}

/* Reflet qui traverse le bouton au survol */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .28);
  transform: translateX(-130%) skewX(-20deg);
  transition: transform .6s;
}

.btn:hover::after {
  transform: translateX(130%) skewX(-20deg);
}

.btn:hover {
  transform: translateY(-3px);
}

.btn svg {
  transition: transform .25s;
}

.btn:hover svg {
  transform: translateX(4px);
}

.btn-block {
  width: 100%;
}

/* Bouton bleu */
.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: var(--shadow-small);
}

.btn-primary:hover {
  box-shadow: 0 12px 28px rgba(0, 107, 255, .35);
}

/* Bouton foncé */
.btn-dark {
  background: var(--navy);
  color: #fff;
}

/* Bouton blanc avec bordure */
.btn-ghost {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
}

.btn-ghost:hover {
  border-color: var(--blue);
}


/* ---------------------------------------------------------------------
   4. EN-TÊTE ET MENU
   --------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: 16px;
}

.logo img {
  height: 58px;
  display: block;
  background: #fff;
  border-radius: 10px;
  transition: transform .3s;
}

.logo:hover img {
  transform: scale(1.06) rotate(-2deg);
}

nav {
  display: flex;
  gap: 32px;
}

nav a {
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  position: relative;
  padding: 6px 0;
}

/* Soulignement animé au survol */
nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s;
}

nav a:hover {
  color: var(--blue);
}

nav a:hover::after {
  transform: scaleX(1);
}

/* Bouton ☰ (visible seulement sur téléphone) */
#menu-toggle {
  display: none;
  background: none;
  border: 0;
  font-size: 28px;
  color: var(--ink);
  cursor: pointer;
}

/* Barre de progression du défilement, tout en haut */
#scroll-progress {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  height: 3px;
  width: 0;
  background: var(--blue);
  z-index: 70;
}


/* ---------------------------------------------------------------------
   5. SECTION D'ACCUEIL (HERO)
   --------------------------------------------------------------------- */

.hero {
  overflow: hidden;
  padding: 56px 0 72px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items: center;
}

/* Les deux grosses taches de couleur */
.blob-hero-cyan {
  width: 420px;
  height: 420px;
  right: -100px;
  top: 40px;
  background: var(--cyan);
}

.blob-hero-amber {
  width: 300px;
  height: 300px;
  right: 240px;
  bottom: -60px;
  background: var(--amber);
}

/* Petites icônes qui flottent */
.float-icon {
  position: absolute;
  opacity: .35;
  animation: float 8s ease-in-out infinite;
  z-index: 0;
}

.hero .float-icon-1 {
  left: 4%;
  top: 12%;
  width: 38px;
  height: 38px;
  color: var(--cyan);
}

.hero .float-icon-2 {
  left: 46%;
  top: 6%;
  width: 30px;
  height: 30px;
  color: var(--amber);
  animation: spin 18s linear infinite;
}

.hero .float-icon-3 {
  left: 40%;
  bottom: 6%;
  width: 44px;
  height: 44px;
  color: var(--cyan);
  animation-delay: -3s;
}

/* Mots qui changent : « en été / en hiver / toute l'année » */
.rotating-words {
  display: inline-grid;
  vertical-align: bottom;
}

.rotating-words b {
  grid-area: 1 / 1;
  opacity: 0;
  animation: word-swap 9s infinite;
  white-space: nowrap;
}

.rotating-words b:nth-child(1) {
  color: var(--amber);
}

.rotating-words b:nth-child(2) {
  color: var(--blue);
  animation-delay: 3s;
}

.rotating-words b:nth-child(3) {
  animation-delay: 6s;
}

.lead {
  font-size: 19px;
  margin: 24px 0 32px;
  max-width: 540px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* « Devis gratuit · Sans engagement · Pose soignée » */
.trust-list {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 28px;
  font-size: 14px;
  font-weight: 600;
  color: var(--slate);
}

.trust-list span {
  display: flex;
  gap: 6px;
  align-items: center;
}

.trust-list svg {
  color: var(--blue);
  font-size: 18px;
}

/* Colonne de droite : mini-formulaire + bulles de température */
.hero-visual {
  position: relative;
}

.float-badge {
  position: absolute;
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-small);
  border-radius: 12px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 14px;
  animation: float 6s ease-in-out infinite;
}

.float-badge-cool {
  left: -24px;
  top: -22px;
  color: var(--blue);
}

.float-badge-warm {
  right: -12px;
  bottom: -24px;
  color: var(--amber);
  animation-delay: -2s;
}

/* Mini-formulaire « Devis gratuit en 1 minute » */
.quick-quote {
  position: relative;
}

.quick-quote h3 {
  font-size: 24px;
}

.quick-quote p {
  margin: 4px 0 16px;
}

.quick-quote .btn {
  width: 100%;
}


/* ---------------------------------------------------------------------
   6. CARTES, PUCES ET CHAMPS
   --------------------------------------------------------------------- */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 24px;
  transition: box-shadow .3s, border-color .3s, transform .2s;
}

/* Grande carte (simulateur, formulaire de devis) */
.card-large {
  border-radius: 24px;
  padding: 32px;
}

.card-title {
  margin-bottom: 16px;
}

/* Puces à cocher (Climatisation, Chauffage…) */
.chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.chip,
.check-chip span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--pebble);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  transition: all .25s;
}

.chip:hover,
.check-chip span:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
}

.chip.on,
.check-chip input:checked + span {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

/* Les vraies cases à cocher sont cachées, seule la puce est visible */
.check-chip {
  position: relative;
}

.check-chip input {
  position: absolute;
  opacity: 0;
}

/* Champs de saisie */
.quick-quote input[type=text],
.devis-form input,
.devis-form select,
.devis-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--pebble);
  color: var(--ink);
  border-radius: 8px;
  margin-bottom: 14px;
  transition: border .2s, box-shadow .2s;
}

input:focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 107, 255, .2);
}

label {
  font-weight: 600;
  font-size: 14px;
  display: block;
  margin-bottom: 6px;
}


/* ---------------------------------------------------------------------
   7. BANDEAU DES MARQUES (défile tout seul)
   --------------------------------------------------------------------- */

.brands {
  padding: 20px 0;
  border-block: 1px solid var(--line);
  background: var(--paper);
  overflow: hidden;
}

.brands p {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.brands-track {
  display: flex;
  width: max-content;
  animation: marquee 38s linear infinite;
}

/* Le défilement s'arrête quand la souris passe dessus */
.brands:hover .brands-track {
  animation-play-state: paused;
}

.brands-track span {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mist);
  padding: 0 36px;
  transition: color .3s, transform .3s;
}

.brands-track span:hover {
  color: var(--ink);
  transform: scale(1.1);
}


/* ---------------------------------------------------------------------
   8. SERVICES (4 cartes)
   --------------------------------------------------------------------- */

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.service-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Trait bleu qui apparaît en bas de la carte au survol */
.service-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 100%;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s;
}

.service-card:hover {
  transform: translateY(-10px);
  border-color: var(--blue);
  box-shadow: var(--shadow);
}

.service-card:hover::after {
  transform: scaleX(1);
}

/* Pastille de l'icône */
.icon-box {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--badge);
  color: var(--blue);
  display: grid;
  place-items: center;
  font-size: 28px;
  transition: all .35s;
}

.icon-box.amber {
  background: rgba(255, 154, 31, .16);
  color: var(--amber);
}

.service-card:hover .icon-box {
  background: var(--blue);
  color: #fff;
  transform: rotate(-8deg) scale(1.12);
}

.service-card:hover .icon-box.amber {
  background: var(--amber);
}

/* Lien « Demander un devis » en bas de chaque carte */
.service-card a {
  margin-top: auto;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  display: flex;
  gap: 6px;
  align-items: center;
}

.service-card a svg {
  transition: transform .25s;
}

.service-card a:hover svg {
  transform: translateX(6px);
}


/* ---------------------------------------------------------------------
   9. ÉCONOMIES (texte + simulateur)
   --------------------------------------------------------------------- */

/* Chiffres : « 4 kWh » et « 70 % » */
.stats {
  display: flex;
  gap: 40px;
  margin-top: 8px;
}

.stats div {
  font-size: 14px;
  color: var(--slate);
  max-width: 150px;
}

.stats strong {
  display: block;
  font-size: 48px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--blue);
}

.stats div:nth-child(2) strong {
  color: var(--amber);
}

/* Simulateur */
.calc-wrap {
  position: relative;
}

.calc-wrap .blob {
  width: 280px;
  height: 280px;
  right: -40px;
  top: -30px;
  background: var(--amber);
}

.calc-card {
  position: relative;
  z-index: 1;
}

/* Boutons Électrique / Gaz / Fioul */
.energy-choice {
  display: flex;
  gap: 8px;
  margin: 8px 0 20px;
}

.energy-choice button {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--line);
  background: var(--pebble);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  transition: all .25s;
}

.energy-choice button.on {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

input[type=range] {
  width: 100%;
  accent-color: var(--blue);
  margin: 6px 0 20px;
}

/* Barres de comparaison */
.result-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
}

.bar {
  height: 12px;
  border-radius: 6px;
  background: var(--pebble);
  margin: 6px 0 14px;
  overflow: hidden;
}

.bar-fill {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: var(--mist);
  transition: width .9s cubic-bezier(.2, .8, .2, 1);
}

.bar-fill.blue {
  background: var(--blue);
}

/* Largeur de départ des barres (le script la met ensuite à jour) */
#bar-now {
  width: 100%;
}

#bar-pac {
  width: 30%;
}

.big-number {
  font-size: 44px;
  font-weight: 800;
  color: var(--blue);
  line-height: 1.1;
  margin: 4px 0;
}

.small {
  font-size: 12px;
  color: var(--slate);
}

.small.spaced {
  margin-bottom: 16px;
}


/* ---------------------------------------------------------------------
   10. NOTRE MÉTHODE (4 étapes)
   --------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.step {
  position: relative;
}

/* Trait bleu qui relie les étapes */
.step::before {
  content: "";
  position: absolute;
  top: 27px;
  left: 64px;
  right: -8px;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .9s .4s;
}

.step.in::before {
  transform: scaleX(1);
}

.step:last-child::before {
  display: none;
}

.step h3 {
  font-size: 20px;
  margin-bottom: 6px;
}

.step-number {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--blue);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 20px;
  color: var(--blue);
  margin-bottom: 16px;
  transition: all .3s;
  position: relative;
  z-index: 1;
}

.step:hover .step-number {
  background: var(--blue);
  color: #fff;
  transform: scale(1.15);
}


/* ---------------------------------------------------------------------
   11. FAQ (questions qui s'ouvrent au clic)
   --------------------------------------------------------------------- */

.faq-list {
  max-width: 760px;
  margin: auto;
  display: grid;
  gap: 12px;
}

.faq-list .card {
  padding: 0;
  overflow: hidden;
  cursor: pointer;
}

.faq-list .card:hover {
  border-color: var(--blue);
}

.faq-list h3 {
  font-size: 18px;
  font-weight: 600;
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.faq-list h3 svg {
  transition: transform .35s;
  color: var(--blue);
}

/* Flèche retournée quand la question est ouverte */
.faq-list .open h3 svg {
  transform: rotate(180deg);
}

/* Réponse : hauteur 0 (fermée) puis pleine hauteur (ouverte) */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s;
}

.faq-answer div {
  overflow: hidden;
}

.faq-answer p {
  padding: 0 24px 20px;
}

.open .faq-answer {
  grid-template-rows: 1fr;
}


/* ---------------------------------------------------------------------
   12. DEVIS (section foncée + formulaire)
   --------------------------------------------------------------------- */

#devis {
  background: var(--navy);
  color: #fff;
  overflow: hidden;
}

#devis h2 {
  color: #fff;
}

#devis p {
  color: #c4d6ea;
}

#devis p a {
  color: #fff;
}

#devis .blob {
  width: 360px;
  height: 360px;
  left: -120px;
  top: 20%;
  background: var(--cyan);
}

#devis .check-list li {
  color: #fff;
}

#devis .check-list svg {
  color: var(--amber);
}

/* Liens téléphone / e-mail soulignés */
#devis p a,
footer .contact a {
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.devis-form {
  color: var(--ink);
}

.devis-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}

.devis-form textarea {
  min-height: 90px;
  resize: vertical;
}

.devis-form .btn {
  width: 100%;
  margin-top: 16px;
}

/* Case « J'accepte d'être recontacté » */
.consent {
  display: flex;
  gap: 8px;
  font-weight: 400;
  font-size: 13px;
}

.consent input {
  width: auto;
  margin: 3px 0 0;
}

/* Message d'erreur si l'envoi échoue */
.form-error {
  color: #c0392b;
  margin-top: 12px;
  font-size: 14px;
}

/* Message de succès après l'envoi */
.success {
  text-align: center;
  padding: 32px 0;
}

.success svg {
  font-size: 72px;
  color: var(--blue);
  stroke-dasharray: 30;
  animation: draw 1s forwards;
}

.success h3 {
  margin: 12px 0 6px;
}


/* ---------------------------------------------------------------------
   13. PIED DE PAGE ET BOUTON FLOTTANT
   --------------------------------------------------------------------- */

footer {
  padding: 40px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

footer .container {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

footer a {
  text-decoration: none;
  font-weight: 500;
  margin-left: 20px;
}

footer a:hover {
  color: var(--blue);
}

footer .contact a {
  margin: 0;
}

/* Bouton « Devis gratuit » qui apparaît en bas à droite quand on défile */
#floating-cta {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  transform: translateY(140px);
  transition: transform .4s;
  animation: pulse 2.4s infinite;
}

#floating-cta.show {
  transform: none;
}


/* ---------------------------------------------------------------------
   14. ANIMATIONS À L'APPARITION
   Les éléments marqués data-reveal apparaissent en glissant quand on
   arrive dessus (le script ajoute la classe "in").
   --------------------------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity .8s cubic-bezier(.2, .8, .2, 1) var(--d, 0s),
    transform .8s cubic-bezier(.2, .8, .2, 1) var(--d, 0s);
}

.js [data-reveal=left]  { transform: translateX(-48px); }
.js [data-reveal=right] { transform: translateX(48px); }
.js [data-reveal=zoom]  { transform: scale(.9); }

.js [data-reveal].in {
  opacity: 1;
  transform: none;
}

.js .service-card[data-reveal].in {
  transition: transform .35s, border-color .3s, box-shadow .3s;
}

/* Définition des animations */
@keyframes word-swap {
  0%        { opacity: 0; transform: translateY(45%); }
  5%, 30%   { opacity: 1; transform: none; }
  35%, 100% { opacity: 0; transform: translateY(-45%); }
}

@keyframes float {
  50% { transform: translateY(-22px) rotate(25deg); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

@keyframes draw {
  from { stroke-dashoffset: 30; }
  to   { stroke-dashoffset: 0; }
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 107, 255, .5); }
  100% { box-shadow: 0 0 0 18px rgba(0, 107, 255, 0); }
}

/* Pour les visiteurs qui désactivent les animations sur leur appareil */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .rotating-words b:first-child {
    opacity: 1;
  }

  html {
    scroll-behavior: auto;
  }
}


/* ---------------------------------------------------------------------
   15. ÉCRANS MOYENS ET PETITS (tablette, téléphone)
   --------------------------------------------------------------------- */

/* Tablette */
@media (max-width: 960px) {
  .grid-4,
  .steps {
    grid-template-columns: 1fr 1fr;
  }

  .hero-grid,
  .split {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .step::before {
    display: none;
  }
}

/* Petit écran : le menu devient un bouton ☰ */
@media (max-width: 860px) {
  #menu-toggle {
    display: block;
  }

  nav {
    display: none;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: var(--paper);
    flex-direction: column;
    padding: 16px 24px;
    gap: 12px;
    border-bottom: 1px solid var(--line);
  }

  nav.open {
    display: flex;
  }

  .header-inner > .btn {
    display: none;
  }
}

/* Téléphone */
@media (max-width: 560px) {
  .grid-4,
  .steps,
  .devis-form .form-row {
    grid-template-columns: 1fr;
  }

  .stats {
    gap: 24px;
  }

  section {
    padding: 56px 0;
  }

  .float-badge {
    display: none;
  }
}


/* ---------------------------------------------------------------------
   16. PAGES LÉGALES
   Utilisé par mentions-legales.html et politique-confidentialite.html
   --------------------------------------------------------------------- */

/* Liens « Mentions légales » et « Politique de confidentialité » du pied de page */
.legal-links {
  flex-basis: 100%;
  font-size: 13px;
}

.legal-links a {
  margin: 0 20px 0 0;
}

/* Zone de texte */
.legal {
  padding: 56px 0 72px;
}

.legal-inner {
  max-width: 820px;
}

.legal h1 {
  font-size: clamp(32px, 5vw, 48px);
}

.legal-date {
  margin-top: 8px;
  font-size: 14px;
}

.legal-intro {
  margin-top: 24px;
  font-size: 18px;
}

.legal h2 {
  font-size: 24px;
  letter-spacing: 0;
  margin: 40px 0 12px;
}

.legal p + p {
  margin-top: 12px;
}

.legal ul {
  padding-left: 22px;
  margin-top: 12px;
  display: grid;
  gap: 6px;
}

.legal li {
  color: var(--slate);
}

.legal a {
  color: var(--blue);
  font-weight: 600;
}

/* Tableau d'informations (éditeur, hébergeur…) */
.legal dl {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 10px 20px;
  margin-top: 12px;
  padding: 20px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.legal dt {
  font-weight: 600;
}

.legal dd {
  color: var(--slate);
}

/* Repère jaune : information à remplir (Ctrl + F → « À COMPLÉTER ») */
mark.todo {
  background: #fff3b0;
  color: #5c4400;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}

@media (max-width: 560px) {
  .legal dl {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .legal dd {
    margin-bottom: 12px;
  }
}