/* Jaabwash — refonte visuelle de l'accueil (inspirée de la structure de hellopebl.com).
   Polices (Montserrat / Inter) et couleurs (tokens.css) inchangées. Chargée uniquement sur l'accueil. */

.refonte {
  --gouttiere: 16px;
  --rayon-carte: 28px;
  --rayon-bloc: 20px;
  --ombre-douce: 0 1px 2px rgba(34, 42, 61, 0.04), 0 12px 32px rgba(34, 42, 61, 0.07);
  --ombre-haute: 0 2px 4px rgba(34, 42, 61, 0.05), 0 24px 56px rgba(34, 42, 61, 0.14);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  background: var(--couleur-fond);
}
@media (min-width: 768px) { .refonte { --gouttiere: 24px; } }

/* ---------- Titres : plus grands, plus serrés ---------- */
.refonte h1, .refonte h2 { letter-spacing: -0.025em; text-wrap: balance; }
.refonte h2 { font-size: clamp(30px, 4.2vw, 48px); line-height: 1.12; }
.refonte h3 { letter-spacing: -0.01em; }
.refonte .section { padding-block: clamp(72px, 9vw, 128px); }
.refonte .section__entete { max-width: 760px; }
.refonte .section__texte { font-size: 18px; color: var(--couleur-texte-secondaire); }
.refonte .section--centre .section__texte { margin-inline: auto; }

/* ---------- Boutons : pilules avec flèche ---------- */
.refonte .bouton { min-height: 52px; padding-inline: 28px; letter-spacing: -0.005em; }
.refonte .bouton--sur-sombre { border-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(6px); }

/* ---------- En-tête : barre collante et légère ---------- */
.refonte .entete {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.86); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(213, 222, 234, 0.6);
}
.refonte .entete__ligne { width: min(100% - 2 * var(--gouttiere), 1320px); }
.refonte .entete__nav { gap: 4px; }
.refonte .entete__nav a { padding: 10px 16px; border: 0; border-radius: var(--rayon-pastille); font-size: 15px; }
.refonte .entete__nav a:hover { background: var(--couleur-fond-alterne); }
.refonte .entete__nav a[aria-current="page"] { background: var(--couleur-fond-alterne); }
.refonte .entete__tel { color: var(--couleur-texte); font-size: 15px; }
.refonte .entete__actions { gap: var(--espace-4); }
.refonte .entete__actions .bouton { min-height: 44px; padding-inline: 22px; font-size: 15px; }
.refonte .menu-bouton { background: var(--couleur-fond-alterne); margin-right: 0; padding-inline: var(--espace-4); }

/* ---------- Héros : grande carte photo arrondie ---------- */
.refonte .hero { padding: var(--espace-3) var(--gouttiere) 0; overflow: visible; background: var(--couleur-fond); }
.refonte .hero__cadre {
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--rayon-carte);
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: min(760px, calc(100svh - 96px)); padding: 88px 24px 148px;
  background: var(--couleur-fond-sombre);
}
.refonte .hero__fond, .refonte .hero__fond img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.refonte .hero__fond img { object-position: center; }
.refonte .hero__cadre::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(34, 42, 61, 0.35) 0%, rgba(34, 42, 61, 0.78) 100%),
    linear-gradient(180deg, rgba(34, 42, 61, 0.35) 0%, rgba(34, 42, 61, 0.7) 100%);
}
.refonte .hero__texte { align-items: center; max-width: 900px; }
.refonte .hero .surtitre {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--espace-5);
  padding: 8px 16px; border-radius: var(--rayon-pastille);
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--couleur-texte-sur-sombre); font-size: 12px; letter-spacing: 0.14em;
}
.refonte .hero .surtitre::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--couleur-principale); box-shadow: 0 0 0 4px rgba(58, 187, 237, 0.3); }
.refonte .hero h1 { font-size: clamp(34px, 5.6vw, 72px); line-height: 1.06; color: #fff; }
.refonte .hero__texte h1 + p { max-width: 640px; margin-top: var(--espace-5); font-size: clamp(17px, 1.6vw, 20px); color: rgba(255, 255, 255, 0.85) !important; }
.refonte .hero__texte .boutons { align-self: center; justify-content: center; margin-top: var(--espace-6); }
.refonte .hero__legende { margin-top: var(--espace-5); color: rgba(255, 255, 255, 0.75) !important; }
@media (max-width: 767px) {
  .refonte .hero__cadre { min-height: 600px; padding: 56px 20px 112px; }
  .refonte .hero .surtitre { font-size: 11px; letter-spacing: 0.08em; padding: 7px 14px; text-align: left; }
  .refonte .hero__texte .boutons { align-self: stretch; }
}

/* ---------- Réassurance : bandeau flottant qui chevauche le héros ---------- */
.refonte .reassurance { padding-block: 0; background: transparent; z-index: 2; }
.refonte .reassurance ul {
  width: min(100% - 2 * var(--gouttiere) - 16px, 1120px); margin: -72px auto 0; padding: 28px 8px;
  position: relative; background: var(--couleur-fond); border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-haute); border: 1px solid rgba(213, 222, 234, 0.7);
}
.refonte .reassurance li { font-size: 15px; line-height: 1.35; }
.refonte .reassurance .bulle-icone { width: 48px; height: 48px; background: var(--couleur-fond-alterne); color: var(--couleur-accent); }
@media (min-width: 768px) {
  .refonte .reassurance ul { padding: 28px 16px; }
  .refonte .reassurance li { padding: 0 var(--espace-5); }
}
@media (max-width: 767px) {
  .refonte .reassurance ul { margin-top: -64px; padding: 24px 16px; }
  .refonte .reassurance li:nth-child(even) { border-left: 0; padding-left: 0; }
  .refonte .reassurance li { padding-right: 0; }
}
.refonte .reassurance + .section { padding-top: clamp(72px, 9vw, 128px); }

/* ---------- Prestations : cartes photo ---------- */
.refonte .section--alterne { background: var(--couleur-fond-alterne); }
.refonte .carte { border-radius: var(--rayon-carte); box-shadow: var(--ombre-douce); }
.refonte .carte--lien { transition: box-shadow 0.2s ease; }
.refonte .carte--lien:hover { transform: none; box-shadow: var(--ombre-haute); }
.refonte .carte-service { padding: 10px; }
.refonte .carte-service .photo { border-radius: calc(var(--rayon-carte) - 10px); aspect-ratio: 4 / 3; }
.refonte .carte-service__corps { padding: var(--espace-5) 14px 14px; gap: 10px; }
.refonte .carte-service__corps h3 { font-size: 22px; }
.refonte .carte-service__corps p { font-size: 16px; line-height: 1.55; }
.refonte .carte-service__bas .icone { display: flex; width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--couleur-fond-sombre); color: #fff; transition: background-color 0.2s, color 0.2s; }
.refonte .carte-service:hover .carte-service__bas .icone { background: var(--couleur-principale); color: var(--couleur-principale-texte); transform: none; }
.refonte .pastille { min-height: 36px; padding-inline: 16px; background: var(--couleur-fond-alterne); color: var(--couleur-accent); font-weight: 700; }
.refonte .grille-services { gap: 20px; }
@media (min-width: 1025px) { .refonte .grille-services { gap: 24px; } }

/* ---------- Comparateur avant / après ---------- */
.refonte .comparateur-section { background: var(--couleur-fond); }
.refonte .comparateur {
  width: 100%; max-width: 1040px; border-radius: var(--rayon-carte); box-shadow: var(--ombre-haute);
  border: 8px solid var(--couleur-fond); outline: 1px solid var(--couleur-filet);
}
.refonte .comparateur__poignee { background: var(--couleur-fond); color: var(--couleur-fond-sombre); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.4), var(--ombre-carte); }
.refonte .comparateur__ligne { width: 3px; margin-left: -1.5px; box-shadow: 0 0 12px rgba(0, 0, 0, 0.25); }
.refonte .comparateur-section .bouton { margin-top: var(--espace-7); }

/* ---------- Points clés avec photo ---------- */
.refonte .points-photo__photo .photo { border-radius: var(--rayon-carte); box-shadow: var(--ombre-haute); }
.refonte .points-photo__titre { font-size: clamp(30px, 4vw, 44px); }
.refonte .points-photo__points > div {
  position: relative; padding: 24px 24px 24px 28px; background: var(--couleur-fond);
  border-radius: var(--rayon-bloc); box-shadow: var(--ombre-douce); transition: box-shadow 0.2s ease;
}
.refonte .points-photo__points > div::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 4px; border-radius: 0 4px 4px 0; background: var(--couleur-principale); }
.refonte .points-photo__points h3 { font-size: 19px; }
.refonte .points-photo__points p { font-size: 15.5px; line-height: 1.6; }
@media (min-width: 1025px) {
  .refonte .points-photo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 72px; }
  .refonte .points-photo__photo { position: sticky; top: 112px; }
  .refonte .points-photo__points { gap: 20px; }
}

/* ---------- Étapes : cartes numérotées ---------- */
.refonte .etapes::before { display: none; }
.refonte .etapes ol { gap: 16px; }
.refonte .etapes li {
  position: relative; padding: 28px; background: var(--couleur-fond-alterne); border-radius: var(--rayon-carte);
  transition: box-shadow 0.2s ease;
}
.refonte .etapes li:hover { box-shadow: var(--ombre-douce); }
.refonte .etapes__numero { background: var(--couleur-fond-sombre); color: var(--couleur-principale); box-shadow: 0 0 0 6px rgba(58, 187, 237, 0.25); }
.refonte .etapes h3 { font-size: 20px; }
.refonte .etapes p { font-size: 16px; }
.refonte .section--centre .etapes { text-align: left; }
@media (min-width: 768px) {
  .refonte .etapes ol { grid-template-columns: repeat(var(--nb, 4), minmax(0, 1fr)); gap: 20px; text-align: left; }
  .refonte .etapes li { flex-direction: column; align-items: flex-start; }
  .refonte .etapes h3 { margin-top: var(--espace-5); }
}
@media (min-width: 1025px) {
  /* petite flèche entre les cartes */
  .refonte .etapes li:not(:last-child)::after {
    content: ""; position: absolute; right: -19px; top: 44px; z-index: 1; width: 18px; height: 18px;
    background: var(--couleur-principale); border-radius: 50%; box-shadow: 0 0 0 4px var(--couleur-fond);
  }
}
.refonte .section__bouton { margin-top: var(--espace-7); }

/* ---------- Chiffres : grand bloc sombre arrondi ---------- */
.refonte .chiffres {
  margin: 0 var(--gouttiere); border-radius: var(--rayon-carte); background: var(--couleur-fond-sombre);
  padding-block: clamp(72px, 9vw, 120px);
}
.refonte .chiffres h2 { color: var(--couleur-texte-sur-sombre); }
.refonte .chiffres .bulles { opacity: 0.16; color: var(--couleur-principale); }
.refonte .chiffres .chiffre {
  font-size: clamp(44px, 6.4vw, 80px); letter-spacing: -0.03em;
  background: linear-gradient(180deg, #7BD6F7 0%, var(--couleur-principale) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.refonte .chiffres dt { font-size: 15px; max-width: 190px; text-align: center; }
.refonte .chiffres dl { margin-top: var(--espace-8); row-gap: var(--espace-7); }
.refonte .chiffres dl > div + div { border-left-color: rgba(255, 255, 255, 0.16); }
@media (max-width: 767px) { .refonte .chiffres dl > div + div { border-left: 0; } }

/* ---------- Avis ---------- */
.refonte .avis__note { padding: 10px 20px; box-shadow: var(--ombre-douce); }
.refonte .etoiles { color: #F5A524; }
.refonte .avis__carte {
  position: relative; padding: 32px; border-radius: var(--rayon-carte); box-shadow: var(--ombre-douce); overflow: hidden;
  transition: box-shadow 0.2s ease;
}
.refonte .avis__carte::before {
  content: "\201C"; position: absolute; right: 24px; top: 4px; font-family: var(--h1-police); font-weight: 700; font-size: 120px; line-height: 1;
  color: var(--couleur-principale); opacity: 0.22; pointer-events: none;
}
.refonte .avis__carte:hover { box-shadow: var(--ombre-haute); }
.refonte .avis__carte blockquote { font-size: 17px; line-height: 1.65; }
.refonte .avis__carte figcaption { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--couleur-filet); }
.refonte .avis__carte figcaption::before {
  content: ""; width: 36px; height: 36px; border-radius: 50%; background: var(--couleur-fond-sombre) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ABBED' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 18px no-repeat;
}

/* ---------- Zone d'intervention ---------- */
.refonte .zone__carte .photo { border-radius: var(--rayon-carte); box-shadow: var(--ombre-douce); border: 1px solid var(--couleur-filet); }
.refonte .communes li { padding: 8px 16px; border: 1px solid #BFE6F8; transition: background-color 0.2s; }
.refonte .communes li:hover { background: var(--couleur-principale); }
@media (min-width: 768px) { .refonte .zone__grille { gap: 72px; } }

/* ---------- FAQ : cartes accordéon ---------- */
.refonte .faq__liste { border-top: 0; display: flex; flex-direction: column; gap: 12px; }
.refonte .faq__item { border: 0; background: var(--couleur-fond); border-radius: var(--rayon-bloc); box-shadow: var(--ombre-douce); padding-inline: 24px; transition: box-shadow 0.2s; }
.refonte .faq__item:hover { box-shadow: var(--ombre-haute); }
.refonte .faq__question { padding-block: 22px; font-family: var(--h3-police); font-weight: 600; font-size: 18px; line-height: 1.4; }
.refonte .faq__signe { width: 36px; height: 36px; background: var(--couleur-fond-alterne); transition: background-color 0.3s, transform 0.3s var(--ease); }
.refonte .faq__question[aria-expanded="true"] .faq__signe { background: var(--couleur-principale); }
.refonte .faq__reponse { padding: 0 48px 24px 0; color: var(--couleur-texte-secondaire); }
@media (min-width: 768px) { .refonte .faq__grille > h2 { position: sticky; top: 112px; align-self: start; } }

/* ---------- Appel à l'action final : carte photo arrondie ---------- */
.refonte .cta-photo { margin: 0 var(--gouttiere) var(--gouttiere); border-radius: var(--rayon-carte); min-height: 480px; padding-block: 96px; }
.refonte .cta-photo::after { background: radial-gradient(120% 100% at 50% 50%, rgba(34, 42, 61, 0.55), rgba(34, 42, 61, 0.86)); }
.refonte .cta-photo h2 { font-size: clamp(32px, 5vw, 60px); color: #fff; }
.refonte .cta-photo p { font-size: 19px; color: rgba(255, 255, 255, 0.85); }

/* ---------- Pied de page ---------- */
.refonte .pied { margin: 0 var(--gouttiere) var(--gouttiere); border-radius: var(--rayon-carte); padding-top: var(--espace-9); }
.refonte .pied .bulles { opacity: 0.16; }
.refonte .pied a.retour-haut { right: 24px; bottom: 24px; }
.refonte .pied__bas { border-top-color: rgba(255, 255, 255, 0.14); }
.refonte .barre-mobile { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); }

/* ---------- Apparition discrète au défilement (fondu léger, activée par le script) ---------- */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js-reveal [data-reveal].est-visible { opacity: 1; transform: none; }

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


/* ---------- Bulles du héros (gardées) ---------- */
.refonte .hero__cadre > .hero__texte { position: relative; z-index: 1; }
.bulles-flottantes { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bulle-f {
  position: absolute; bottom: -60px; left: var(--x); width: var(--t); height: var(--t); border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.08) 45%, rgba(58, 187, 237, 0.12) 70%);
  border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.18);
  opacity: 0; animation: monte var(--d) linear var(--r) infinite;
}
@keyframes monte {
  0% { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
  10% { opacity: 0.9; }
  50% { transform: translate3d(var(--dx), -55vh, 0) scale(1); }
  100% { transform: translate3d(calc(var(--dx) * -1), -115vh, 0) scale(1.1); opacity: 0; }
}
@media (max-width: 767px) { .bulle-f:nth-child(n+9) { display: none; } }
@media (prefers-reduced-motion: reduce) { .bulles-flottantes { display: none; } }

/* ---------- Section sombre « Un nettoyage soigné » (alternance blanc / sombre de la référence) ---------- */
.refonte [data-section="S-accueil-05"] { background: var(--couleur-fond-sombre); color: var(--couleur-texte-sur-sombre); }
.refonte [data-section="S-accueil-05"] .points-photo__titre { color: #fff; }
.refonte [data-section="S-accueil-05"] .points-photo__points > div { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: none; }
.refonte [data-section="S-accueil-05"] .points-photo__points h3 { color: #fff; }
.refonte [data-section="S-accueil-05"] .points-photo__points p { color: var(--couleur-texte-secondaire-sur-sombre); }
.refonte [data-section="S-accueil-05"] .points-photo__photo .photo { box-shadow: none; }
.refonte [data-section="S-accueil-05"] .bulles { opacity: 0.5; }
.refonte .entete.est-defile { box-shadow: 0 8px 24px rgba(34, 42, 61, 0.08); }
.refonte .cta-photo .bulles-flottantes { z-index: 1; }
.refonte .cta-photo .conteneur { z-index: 2; }
.refonte .cta-photo::after { z-index: 0; }

/* =====================================================================
   PAGES INTÉRIEURES (offre, canapé, à propos, contact, devis, pages de texte)
   ===================================================================== */
.refonte { --champ-rayon: 14px; }
.refonte .fil-ariane { padding: 20px 0 8px; }
.refonte .fil-ariane ol { width: min(100% - 2 * var(--gouttiere), 1320px); margin-inline: auto; }

/* Bandeau d'introduction : grande carte sombre arrondie (comme le héros de l'accueil) */
.refonte .hero.section--alterne, .refonte .section--intro.page-titre { padding: 12px var(--gouttiere) 0; background: var(--couleur-fond); overflow: visible; }
.refonte .hero.section--alterne .hero__grille, .refonte .page-titre > .conteneur {
  position: relative; isolation: isolate; overflow: hidden; width: 100%; max-width: none; margin: 0;
  background: var(--couleur-fond-sombre); color: var(--couleur-texte-sur-sombre); border-radius: var(--rayon-carte);
  padding: clamp(32px, 5.5vw, 80px); box-shadow: none;
}
.refonte .hero.section--alterne .hero__grille { gap: clamp(28px, 4vw, 72px); min-height: min(560px, 70svh); }
.refonte .hero.section--alterne .hero__grille > *:not(.bulles-flottantes), .refonte .page-titre > .conteneur > *:not(.bulles-flottantes) { position: relative; z-index: 1; }
.refonte .hero.section--alterne h1, .refonte .page-titre h1 { color: #fff; font-size: clamp(32px, 4.6vw, 60px); line-height: 1.08; }
.refonte .hero.section--alterne .hero__texte > p, .refonte .page-titre p { color: rgba(255, 255, 255, 0.82); font-size: clamp(17px, 1.5vw, 19px); }
.refonte .hero.section--alterne .photo { border-radius: calc(var(--rayon-carte) - 8px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.refonte .hero.section--alterne .bulles, .refonte .page-titre .bulles { display: none; }
.refonte .page-titre > .conteneur { min-height: 300px; display: flex; flex-direction: column; justify-content: center; }
.refonte .page-titre .bouton { align-self: flex-start; }
.refonte .hero.section--alterne .hero__texte > .bouton { margin-top: var(--espace-6); }

/* Photos et blocs image + texte */
.refonte .image-texte .photo, .refonte .presentation .photo { border-radius: var(--rayon-carte); box-shadow: var(--ombre-haute); }
.refonte .image-texte__texte > p { color: var(--couleur-texte-secondaire); }
.refonte .image-texte__texte .bouton { align-self: flex-start; }
.refonte .liste-coches__rond { width: 28px; height: 28px; background: var(--couleur-fond-alterne); color: var(--couleur-accent); }
.refonte .section--alterne .liste-coches__rond { background: var(--couleur-fond); }
@media (min-width: 1025px) { .refonte .image-texte { gap: 96px; } }

/* Tarifs */
.refonte .tarifs { gap: 20px; }
.refonte .tarif { padding: 32px 28px; border: 1px solid var(--couleur-filet); border-radius: var(--rayon-carte); box-shadow: var(--ombre-douce); transition: box-shadow 0.2s ease; background: var(--couleur-fond); }
.refonte .tarif:hover { box-shadow: var(--ombre-haute); }
.refonte .tarif .titre-h2 { font-size: 44px; letter-spacing: -0.03em; }
.refonte .tarif__liste { border-top-color: var(--couleur-filet); }
.refonte .tarif__liste .icone { color: var(--couleur-accent); }
.refonte .tarifs + .petit { color: var(--couleur-texte-secondaire); }

/* Cartes avec pictogramme et points avec pictogramme */
.refonte .carte-icone { padding: 32px 28px; border-radius: var(--rayon-carte); box-shadow: var(--ombre-douce); }
.refonte .bulle-icone { color: var(--couleur-accent); }
.refonte .carte-icone h3 { font-size: 20px; }
.refonte .points-icones > div { padding: 28px; background: var(--couleur-fond); border-radius: var(--rayon-carte); box-shadow: var(--ombre-douce); }
.refonte .points-icones h3 { font-size: 20px; }

/* Véhicules, réalisations, bandeau, frise */
.refonte .vehicules li { border-radius: var(--rayon-bloc); background: var(--couleur-fond-alterne); }
.refonte .realisation { border-radius: var(--rayon-carte); box-shadow: var(--ombre-douce); border: 0; }
.refonte .realisation__paire { border-radius: calc(var(--rayon-carte) - 10px); }
.refonte .bandeau { border-radius: var(--rayon-carte); box-shadow: var(--ombre-douce); padding: 28px; }
.refonte .bandeau .photo { border-radius: var(--rayon-bloc); }
.refonte .histoire .photo, .refonte .histoire__picto { border-radius: var(--rayon-bloc); }

/* Appel à l'action sombre : carte arrondie */
.refonte .cta-sombre { margin: 0 var(--gouttiere) var(--gouttiere); border-radius: var(--rayon-carte); padding-block: clamp(72px, 9vw, 112px); isolation: isolate; }
.refonte .cta-sombre h2 { color: #fff; font-size: clamp(30px, 4.4vw, 52px); }
.refonte .cta-sombre .conteneur { position: relative; z-index: 2; }
.refonte .cta-sombre .bulles-flottantes { z-index: 1; }
.refonte .cta-sombre .lien-fort { color: var(--couleur-principale); }

/* Formulaires et coordonnées */
.refonte .formulaire--carte { border-radius: var(--rayon-carte); box-shadow: var(--ombre-douce); }
.refonte .formulaire--bordure { border: 1px solid var(--couleur-filet); box-shadow: var(--ombre-douce); }
.refonte .devis__reassurance { border-radius: var(--rayon-carte); }
.refonte .contact__coordonnees { border-radius: var(--rayon-carte); background: var(--couleur-fond-sombre); }
.refonte .choix-carte { transition: border-color 0.2s, box-shadow 0.2s; }
.refonte .champ input, .refonte .champ textarea { transition: border-color 0.2s; }

/* Pages de texte et pages message */
.refonte .texte-legal h2 { font-size: 24px; }
.refonte .page-message { margin: 12px var(--gouttiere) 0; border-radius: var(--rayon-carte); background: var(--couleur-fond-alterne); }
.refonte .page-message h1 { font-size: clamp(34px, 5vw, 60px); letter-spacing: -0.025em; }

/* Pages de texte : titre dans une carte sombre */
.refonte div.section--intro { padding: 12px var(--gouttiere) 0; background: var(--couleur-fond); }
.refonte div.section--intro > .conteneur { width: 100%; max-width: none; background: var(--couleur-fond-sombre); border-radius: var(--rayon-carte); padding: clamp(40px, 6vw, 88px) clamp(28px, 5.5vw, 80px); }
.refonte div.section--intro h1 { color: #fff; font-size: clamp(32px, 4.6vw, 56px); }
.refonte .section--texte { padding-top: clamp(48px, 6vw, 88px); }

/* ---------- Réassurance : carte bien posée sous le héros ---------- */
.refonte .reassurance { padding-bottom: clamp(48px, 6vw, 80px); background: transparent; }
.refonte .reassurance ul { align-items: stretch; }
.refonte .reassurance li { align-items: center; }
@media (min-width: 768px) and (max-width: 1024px) {
  .refonte .reassurance ul { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; padding: 28px 24px; }
  .refonte .reassurance li { flex-direction: row; align-items: center; gap: 16px; padding: 0 16px; border-left: 0; }
  .refonte .reassurance li:nth-child(even) { border-left: 1px solid var(--couleur-filet); }
  .refonte .reassurance li:first-child, .refonte .reassurance li:last-child { padding-inline: 16px; }
}
@media (min-width: 1025px) {
  .refonte .reassurance li { flex-direction: row; }
}
@media (max-width: 767px) {
  .refonte .reassurance ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; padding: 22px 18px; }
  .refonte .reassurance li { flex-direction: row; align-items: center; gap: 10px; padding: 0; font-size: 14px; border-left: 0; }
  .refonte .reassurance li:nth-child(even) { padding-left: 0; }
  .refonte .reassurance .bulle-icone { width: 40px; height: 40px; }
  .refonte .reassurance .bulle-icone .icone { width: 20px; height: 20px; }
}
@media (max-width: 767px) {
  .refonte .reassurance ul { gap: 18px 8px; padding: 20px 14px; }
  .refonte .reassurance li { gap: 8px; font-size: 13.5px; line-height: 1.3; min-width: 0; }
  .refonte .reassurance li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
}

/* ---------- En-tête réactif : caché en descendant, visible en remontant ---------- */
.refonte .entete { transition: transform 0.35s var(--ease), box-shadow 0.3s ease, background-color 0.3s ease; will-change: transform; }
.refonte .entete.est-cache { transform: translateY(-100%); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .refonte .entete { transition: none; } }

/* Appels à l'action de fin de page : fond marine uni, sans photo (identique sur toutes les pages) */
.refonte .cta-sombre { min-height: 0; }


/* ---------- Espacement entre sections et cartes arrondies (mobile compris) ---------- */
.refonte .chiffres { margin-block: 0 clamp(40px, 6vw, 80px); }
.refonte .section--alterne + .chiffres { margin-top: clamp(40px, 6vw, 80px); }
.refonte .section--alterne + .cta-sombre, .refonte .section--alterne + .cta-photo { margin-top: clamp(40px, 6vw, 80px); }
.refonte .cta-sombre { margin-top: 0; }
.refonte .page-message { margin-bottom: clamp(40px, 6vw, 80px); }

/* ---------- Réassurance sur mobile : liste d'une ligne par engagement ---------- */
@media (max-width: 767px) {
  .refonte .reassurance ul { grid-template-columns: 1fr; gap: 0; padding: 8px 20px; }
  .refonte .reassurance li { padding: 14px 0; gap: 14px; font-size: 15px; line-height: 1.35; border-left: 0; }
  .refonte .reassurance li + li { border-top: 1px solid var(--couleur-filet); }
  .refonte .reassurance li:nth-child(even), .refonte .reassurance li:nth-child(odd) { padding-left: 0; padding-right: 0; }
  .refonte .reassurance .bulle-icone { width: 40px; height: 40px; }
}
@media (max-width: 767px) {
  .refonte .section--formulaire { padding-top: 40px; }
  .refonte .fil-ariane { padding-top: 12px; }
}