/* Jaabwash — un bloc par type de section. Mobile d'abord, puis tablette (768 px) et ordinateur (1025 px). */

/* ---------- Commun à toutes les sections ---------- */
.section { position: relative; padding-block: var(--section-vertical); background: var(--couleur-fond); }
.section--alterne { background: var(--couleur-fond-alterne); }
.fond-sombre { background: var(--couleur-fond-sombre); color: var(--couleur-texte-sur-sombre); }
.section--intro { padding-block: var(--section-intro); }
.section--centre { text-align: center; }
.section__entete { max-width: 792px; }
.section--centre .section__entete { margin-inline: auto; }
.section__texte { margin-top: var(--espace-4); }
.fond-sombre .section__texte { color: var(--couleur-texte-secondaire-sur-sombre); }
.section__corps { margin-top: var(--espace-6); }
.section__bouton { margin-top: var(--espace-6); }
.section__bouton .bouton { width: 100%; }
@media (min-width: 768px) {
  .section__bouton .bouton { width: auto; }
}
@media (min-width: 1025px) {
  .section__corps, .section__bouton { margin-top: var(--espace-7); }
}

/* Photos : toujours recadrées dans leur emplacement */
.photo { position: relative; overflow: hidden; border-radius: var(--image-rayon); background: var(--couleur-filet); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--4-3 { aspect-ratio: 4 / 3; }
.photo--3-2 { aspect-ratio: 3 / 2; }
.photo--1-1 { aspect-ratio: 1 / 1; }
.photo--vide { display: flex; align-items: center; justify-content: center; }

/* Bulles décoratives (motif du design system) */
.decor { position: relative; }
.bulles { position: absolute; pointer-events: none; color: var(--couleur-principale); --bulle-claire: var(--couleur-fond-alterne); }
.section--alterne .bulles--blanc { --bulle-claire: var(--couleur-fond); }
.bulles--haut-droite { top: -56px; right: -40px; width: 110px; height: auto; }
.bulles--bas-droite { bottom: -40px; right: -32px; width: 90px; height: auto; }
.bulles--haut-gauche { top: -44px; left: -36px; width: 90px; height: auto; }
@media (max-width: 767px) { .bulles--desktop { display: none; } }
@media (min-width: 1025px) {
  .bulles--haut-droite { top: -70px; right: -84px; width: 150px; }
  .bulles--bas-droite { bottom: -52px; right: -60px; width: 120px; }
  .bulles--haut-gauche { top: -56px; left: -72px; width: 120px; }
}

/* ---------- Héros (image et texte) ---------- */
.hero { overflow: hidden; }
.hero__grille { display: grid; gap: var(--espace-6); align-items: center; }
.hero__texte { display: flex; flex-direction: column; align-items: flex-start; }
.hero__texte .surtitre { margin-bottom: var(--espace-3); }
.hero__texte h1 + p { margin-top: var(--espace-4); }
.hero__texte .boutons { align-self: stretch; }
.hero__legende { margin-top: var(--espace-4); }
.hero.fond-sombre .hero__texte > p:not(.surtitre) { color: var(--couleur-texte-secondaire-sur-sombre); }
.hero__texte > .bouton { margin-top: var(--espace-5); width: 100%; }
@media (min-width: 768px) {
  .hero__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-7); }
  .hero__texte h1 + p { margin-top: var(--espace-5); }
  .hero__texte .boutons { align-self: flex-start; }
  .hero__texte > .bouton { width: auto; margin-top: var(--espace-6); }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .hero__texte .boutons { flex-direction: column; align-self: stretch; }
  .hero__texte .boutons .bouton { width: 100%; }
}

/* ---------- Titre de page simple (devis, contact, pages de texte) ---------- */
.page-titre h1 { max-width: 792px; }
.page-titre p { max-width: 792px; margin-top: var(--espace-4); }
.page-titre .bouton { margin-top: var(--espace-5); width: 100%; }
@media (min-width: 768px) { .page-titre .bouton { width: auto; margin-top: var(--espace-6); } }

/* ---------- Bande de réassurance ---------- */
.reassurance ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--espace-6); }
.reassurance li { display: flex; flex-direction: column; gap: var(--espace-2); font-weight: 600; }
.reassurance li:nth-child(odd) { padding-right: var(--espace-4); }
.reassurance li:nth-child(even) { padding-left: var(--espace-4); border-left: 1px solid var(--couleur-filet); }
@media (min-width: 768px) {
  .reassurance { padding-block: var(--espace-7); }
  .reassurance ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .reassurance li { flex-direction: row; align-items: center; gap: var(--espace-4); padding: 0 var(--espace-5); }
  .reassurance li:nth-child(odd) { padding-right: var(--espace-5); }
  .reassurance li + li { border-left: 1px solid var(--couleur-filet); }
  .reassurance li:first-child { padding-left: 0; }
  .reassurance li:last-child { padding-right: 0; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .reassurance li { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 1025px) { .reassurance { padding-block: var(--espace-8); } }

/* ---------- Cartes (services, formules, options…) ---------- */
.carte { background: var(--couleur-fond); border-radius: var(--rayon-moyen); box-shadow: var(--ombre-carte); color: var(--couleur-texte); }
.carte--lien { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; transition: box-shadow var(--transition), transform var(--transition); }
.carte--lien:hover { box-shadow: var(--ombre-survol); transform: var(--carte-deplacement); }
.carte--lien:focus-visible { outline: 2px solid var(--couleur-accent); outline-offset: 2px; }

.grille-services { display: grid; gap: var(--espace-5); }
.carte-service .photo { border-radius: 0; aspect-ratio: 3 / 2; }
.carte-service__corps { flex-grow: 1; display: flex; flex-direction: column; gap: var(--espace-2); padding: var(--espace-5); }
.carte-service__corps p { color: var(--couleur-texte-secondaire); }
.carte-service__bas { margin-top: auto; padding-top: var(--espace-4); display: flex; align-items: center; justify-content: space-between; gap: var(--espace-2); }
.carte-service__bas .icone { color: var(--couleur-texte-secondaire); display: none; transition: transform var(--transition); }
.carte-service:hover .carte-service__bas .icone { transform: translateX(4px); }
@media (min-width: 768px) {
  .grille-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carte-service__bas .icone { display: block; }
}
@media (min-width: 1025px) { .grille-services { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Comparateur avant / après ---------- */
.comparateur { position: relative; margin-inline: auto; overflow: hidden; border-radius: var(--image-rayon); background: var(--couleur-filet); aspect-ratio: 4 / 3; --position: 50%; touch-action: pan-y; }
.comparateur picture, .comparateur img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comparateur__apres { clip-path: inset(0 calc(100% - var(--position)) 0 0); }
.comparateur__ligne { position: absolute; top: 0; bottom: 0; left: var(--position); width: 2px; margin-left: -1px; background: var(--couleur-fond); pointer-events: none; }
.comparateur__poignee {
  position: absolute; top: 50%; left: var(--position); width: 48px; height: 48px; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center; border-radius: var(--rayon-pastille);
  background: var(--couleur-principale); color: var(--couleur-principale-texte); box-shadow: var(--ombre-carte); pointer-events: none;
}
.comparateur input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.comparateur:has(input:focus-visible) .comparateur__poignee { outline: 2px solid var(--couleur-accent); outline-offset: 3px; }
.comparateur-section .bouton { margin-top: var(--espace-6); }
@media (max-width: 767px) { .comparateur-section .bouton { width: 100%; } }
@media (min-width: 768px) { .comparateur { aspect-ratio: 16 / 9; } }
@media (min-width: 1025px) {
  .comparateur__poignee { width: 56px; height: 56px; }
  .comparateur-section .bouton { margin-top: var(--espace-7); }
}

/* ---------- Points clés avec photo (accueil) ---------- */
.points-photo { display: grid; grid-template-areas: "titre" "photo" "points" "bouton"; gap: var(--espace-6); align-items: start; }
.points-photo__titre { grid-area: titre; }
.points-photo__photo { grid-area: photo; }
.points-photo__points { grid-area: points; display: grid; gap: var(--espace-5); }
.points-photo__bouton { grid-area: bouton; }
.points-photo__bouton .bouton { width: 100%; }
.points-photo__points p { margin-top: var(--espace-2); color: var(--couleur-texte-secondaire); }
@media (min-width: 768px) {
  .points-photo { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-areas: "photo titre" "photo points" "photo bouton"; column-gap: var(--espace-7); row-gap: var(--espace-6); }
  .points-photo__photo { align-self: start; }
  .points-photo__photo .photo { aspect-ratio: 1 / 1; }
  .points-photo__bouton .bouton { width: auto; }
}
@media (min-width: 1025px) {
  .points-photo { grid-template-columns: 486px minmax(0, 1fr); column-gap: var(--espace-9); row-gap: var(--espace-7); grid-template-rows: auto auto 1fr; }
  .points-photo__points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-6); }
}

/* ---------- Étapes numérotées ---------- */
.etapes { position: relative; }
.etapes ol { position: relative; display: flex; flex-direction: column; gap: var(--espace-6); }
.etapes::before { content: ""; position: absolute; left: 24px; top: 24px; bottom: 24px; width: 1px; background: var(--couleur-filet); }
.etapes li { display: flex; gap: var(--espace-4); align-items: flex-start; }
.etapes__numero {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; position: relative;
  border-radius: var(--rayon-pastille); background: var(--couleur-principale); color: var(--couleur-principale-texte);
  font-family: var(--h3-police); font-weight: 700; font-size: var(--h3-taille); line-height: 1;
}
.etapes h3 { margin-top: 10px; }
.etapes p { margin-top: var(--espace-2); color: var(--couleur-texte-secondaire); }
.section--centre .etapes { text-align: left; }
@media (min-width: 768px) {
  .etapes::before { left: calc(100% / (2 * var(--nb, 4))); right: calc(100% / (2 * var(--nb, 4))); top: 28px; bottom: auto; width: auto; height: 1px; }
  .etapes ol { display: grid; grid-template-columns: repeat(var(--nb, 4), minmax(0, 1fr)); gap: var(--espace-5); text-align: center; }
  .etapes li { flex-direction: column; align-items: center; gap: 0; }
  .etapes__numero { width: 56px; height: 56px; font-size: 24px; }
  .etapes h3 { margin-top: var(--espace-5); }
  .section--centre .etapes { text-align: center; }
}

/* ---------- Chiffres clés ---------- */
.chiffres { overflow: hidden; }
.chiffres .bulles { width: 140px; }
.chiffres .bulles--1 { top: -30px; left: -30px; }
.chiffres .bulles--2 { bottom: -40px; right: -24px; }
.chiffres dl { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-6) var(--espace-4); }
.chiffres dl > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; align-items: center; }
.chiffres dd { display: flex; align-items: flex-end; justify-content: center; min-height: 40px; color: var(--couleur-principale); }
.chiffres dt { margin-top: var(--espace-2); color: var(--couleur-texte-secondaire-sur-sombre); }
@media (min-width: 768px) {
  .chiffres dl { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .chiffres dl > div { padding: 0 var(--espace-3); }
  .chiffres dl > div + div { border-left: 1px solid var(--couleur-texte-secondaire); }
  .chiffres dd { min-height: 63px; }
  .chiffres .bulles { width: 180px; }
}
@media (min-width: 1025px) {
  .chiffres dl { grid-template-columns: repeat(4, 288px); justify-content: center; }
  .chiffres dd { min-height: 64px; }
  .chiffres .bulles { width: 220px; }
  .chiffres .bulles--1 { top: -40px; left: -40px; }
  .chiffres .bulles--2 { bottom: -50px; right: -30px; }
}

/* ---------- Témoignages ---------- */
.avis__entete { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espace-4); }
.avis__note { display: inline-flex; align-items: center; gap: var(--espace-3); padding: var(--espace-2) var(--espace-4); border-radius: var(--rayon-pastille); background: var(--couleur-fond); font-weight: 600; line-height: var(--petit-interligne); }
.etoiles { display: flex; gap: 2px; color: var(--couleur-texte); }
.etoiles .icone { width: 16px; height: 16px; }
.avis__carte .etoiles { gap: var(--espace-1); }
.avis__carte .etoiles .icone { width: 20px; height: 20px; }
.avis__liste { display: flex; gap: var(--espace-4); align-items: flex-start; margin-top: var(--espace-6); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.avis__liste::-webkit-scrollbar { display: none; }
.avis__carte { flex: 0 0 100%; scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--espace-4); padding: var(--espace-5); background: var(--couleur-fond); border-radius: var(--rayon-moyen); }
.avis__carte figcaption { margin-top: auto; font-weight: 600; }
.avis__points { display: flex; justify-content: center; margin-top: var(--espace-2); }
.avis__points button { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; }
.avis__points span { width: 12px; height: 12px; border-radius: var(--rayon-pastille); background: var(--couleur-bordure-champ); }
.avis__points button[aria-current="true"] span { background: var(--couleur-texte); }
.avis .section__bouton { margin-top: var(--espace-4); }
@media (min-width: 768px) {
  .avis__entete { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--espace-5); }
  .avis__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-5); align-items: stretch; overflow: visible; }
  .avis__carte { box-shadow: var(--ombre-carte); }
  .avis__points { display: none; }
  .avis .section__bouton { margin-top: var(--espace-6); }
}
@media (min-width: 1025px) {
  .avis__liste { margin-top: var(--espace-7); }
  .avis__carte { padding: var(--espace-6); }
  .avis .section__bouton { margin-top: var(--espace-7); }
}

/* ---------- Zone d'intervention ---------- */
.zone__grille { display: grid; gap: var(--espace-6); align-items: center; }
.zone__texte { display: flex; flex-direction: column; align-items: flex-start; }
.zone__texte h2 + p { margin-top: var(--espace-4); }
.communes { display: flex; flex-wrap: wrap; gap: var(--espace-2); margin-top: var(--espace-5); }
.communes li { padding: 6px var(--espace-4); border-radius: var(--rayon-pastille); background: var(--couleur-fond-alterne); font-size: var(--petit-taille); line-height: var(--petit-interligne); }
.zone__texte .bouton { margin-top: var(--espace-6); width: 100%; }
.zone__carte { width: 240px; margin-inline: auto; }
.zone__carte .photo { aspect-ratio: 1 / 1; background: var(--couleur-fond-alterne); }
.zone__carte svg { width: 100%; height: 100%; }
@media (min-width: 768px) {
  .zone__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-7); }
  .zone__texte h2 + p { margin-top: var(--espace-5); }
  .zone__texte .bouton { width: auto; }
  .zone__carte { width: auto; margin: 0; }
}

/* ---------- Questions fréquentes ---------- */
.faq__grille { display: grid; gap: var(--espace-6); align-items: start; }
.faq__liste { border-top: 1px solid var(--couleur-filet); }
.faq__item { border-bottom: 1px solid var(--couleur-filet); }
.faq__question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--espace-4);
  padding: 20px 0; background: transparent; border: 0; text-align: left;
  font-family: var(--texte-police); font-weight: 600; font-size: var(--texte-taille); line-height: var(--texte-interligne); color: var(--couleur-texte);
}
.faq__signe { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--rayon-pastille); background: var(--couleur-fond-alterne); }
.section--alterne .faq__signe { background: var(--couleur-fond); }
.faq__signe .icone { width: 20px; height: 20px; }
.faq__signe .icone--moins, .faq__question[aria-expanded="true"] .icone--plus { display: none; }
.faq__question[aria-expanded="true"] .icone--moins { display: block; }
.faq__reponse { padding: 0 0 var(--espace-5); }
@media (min-width: 768px) {
  .faq__grille { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--espace-5); }
  .faq__grille > h2 { grid-column: span 4; }
  .faq__liste { grid-column: span 8; }
  .faq__question { padding: var(--espace-5) 0; gap: var(--espace-5); }
  .faq__reponse { padding-right: 56px; }
}

/* ---------- Appel à l'action sur photo ---------- */
.cta-photo { display: flex; flex-direction: column; justify-content: center; min-height: 390px; overflow: hidden; text-align: center; color: var(--couleur-texte-sur-sombre); background: var(--couleur-fond-sombre); }
.cta-photo__fond, .cta-photo__fond img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-photo::after { content: ""; position: absolute; inset: 0; background: var(--couleur-voile-photo); }
.cta-photo .conteneur { position: relative; z-index: 1; }
.cta-photo h2, .cta-sombre h2 { max-width: 900px; margin-inline: auto; }
.cta-photo p, .cta-sombre p { max-width: 720px; margin: var(--espace-4) auto 0; }
.cta-sombre p { color: var(--couleur-texte-secondaire-sur-sombre); }
.cta-photo .boutons, .cta-sombre .boutons { justify-content: center; margin-top: var(--espace-6); }
.cta-sombre { overflow: hidden; text-align: center; }
.cta-sombre .lien-fort { margin-top: var(--espace-4); }
@media (min-width: 768px) { .cta-photo { min-height: 480px; } }
@media (min-width: 1025px) { .cta-photo { min-height: 560px; } }

/* Coordonnées en grand (devis) */
.contacts-directs { display: flex; flex-direction: column; align-items: center; gap: var(--espace-4); margin-top: var(--espace-6); }
.contacts-directs a { display: flex; align-items: center; gap: var(--espace-3); font-family: var(--h3-police); font-weight: 600; font-size: 20px; line-height: var(--h3-interligne); color: var(--couleur-principale); text-decoration: none; }
.contacts-directs a:hover { text-decoration: underline; }
@media (min-width: 768px) {
  .contacts-directs { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--espace-7); }
  .contacts-directs a { font-size: var(--h3-taille); }
}

/* ---------- Formules et prix ---------- */
.tarifs { display: grid; gap: var(--espace-4); }
.tarif { display: flex; flex-direction: column; padding: var(--espace-5); border: 1px solid var(--couleur-filet); }
.tarif h3 a { color: var(--couleur-texte); text-decoration: none; }
.tarif h3 a:hover { text-decoration: underline; }
.tarif__prix { margin-top: var(--espace-3); }
.tarif__prix .petit { display: block; color: var(--couleur-texte-secondaire); }
.tarif__prix .titre-h2 { display: block; }
.tarif__liste { display: flex; flex-direction: column; gap: var(--espace-2); margin: var(--espace-4) 0 var(--espace-5); padding-top: var(--espace-4); border-top: 1px solid var(--couleur-filet); }
.tarif__liste li { display: flex; gap: var(--espace-2); align-items: flex-start; }
.tarif__liste .icone { width: 20px; height: 20px; margin-top: 4px; color: var(--couleur-accent); }
.tarif .bouton { margin-top: auto; width: 100%; }
.tarifs + .petit { margin-top: var(--espace-5); text-align: center; color: var(--couleur-texte-secondaire); }
@media (min-width: 768px) {
  .tarifs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-5); }
  .tarif__prix { margin-top: var(--espace-4); min-height: 69px; display: flex; flex-direction: column; justify-content: flex-end; }
  .tarifs + .petit { margin-top: var(--espace-6); }
}
@media (min-width: 1025px) { .tarifs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Image et texte ---------- */
.image-texte { display: grid; gap: var(--espace-6); align-items: center; }
.image-texte--haut { align-items: start; }
.image-texte__texte { display: flex; flex-direction: column; align-items: flex-start; }
.image-texte__texte h2 + p { margin-top: var(--espace-4); }
.image-texte__texte .pastille { margin-top: var(--espace-5); }
.image-texte__texte .bouton { margin-top: var(--espace-6); width: 100%; }
.liste-coches { display: flex; flex-direction: column; gap: var(--espace-3); margin-top: var(--espace-5); }
.liste-coches li { display: flex; align-items: center; gap: var(--espace-3); }
.liste-coches li.gras { align-items: flex-start; }
.liste-coches__rond { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--rayon-pastille); background: var(--couleur-fond-alterne); color: var(--couleur-accent); }
.section--alterne .liste-coches__rond { background: var(--couleur-fond); }
.liste-coches__rond .icone { width: 20px; height: 20px; }
@media (max-width: 767px) {
  .image-texte--texte-dabord .image-texte__media { order: 2; }
}
@media (min-width: 768px) {
  .image-texte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-7); }
  .image-texte--inverse .image-texte__media { order: 2; }
  .image-texte__texte h2 + p { margin-top: var(--espace-5); }
  .image-texte__texte .bouton { width: auto; }
}
@media (min-width: 1025px) { .image-texte { gap: var(--espace-8); } }

/* ---------- Cartes avec pictogramme (options, ambition) ---------- */
.cartes-icones { display: grid; gap: var(--espace-4); }
.carte-icone { padding: var(--espace-5); }
.carte-icone h3 { margin-top: var(--espace-4); }
.carte-icone p { margin-top: var(--espace-2); color: var(--couleur-texte-secondaire); }
.carte-icone .pastille { margin-top: var(--espace-3); }
@media (min-width: 768px) {
  .cartes-icones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-5); }
  .carte-icone { padding: var(--espace-6); }
}

/* ---------- Points avec pictogramme, sans carte (canapé) ---------- */
.points-icones { display: grid; gap: var(--espace-6); }
.points-icones h3 { margin-top: var(--espace-4); }
.points-icones p { margin-top: var(--espace-2); color: var(--couleur-texte-secondaire); }
@media (min-width: 768px) { .points-icones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-6) var(--espace-7); } }
@media (min-width: 1025px) { .points-icones { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--espace-5); } }

/* ---------- Véhicules pris en charge ---------- */
.vehicules ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-3); }
.vehicules li { display: flex; flex-direction: column; align-items: center; gap: var(--espace-2); padding: var(--espace-4) var(--espace-2); border-radius: var(--rayon-moyen); background: var(--couleur-fond-alterne); font-weight: 600; line-height: var(--h3-interligne); }
.vehicules li:last-child:nth-child(odd) { grid-column: span 2; justify-self: center; width: calc(50% - var(--espace-3) / 2); }
.vehicules .icone { width: 64px; height: 32px; }
@media (min-width: 768px) {
  .vehicules ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--espace-4); }
  .vehicules li { width: 160px; padding: var(--espace-5) var(--espace-2); gap: var(--espace-3); }
  .vehicules li:last-child:nth-child(odd) { width: 160px; grid-column: auto; }
}
@media (min-width: 1025px) {
  .vehicules ul { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .vehicules li, .vehicules li:last-child:nth-child(odd) { width: auto; }
}

/* ---------- Réalisations avant / après ---------- */
.realisations { padding-inline: 0; }
.realisations__liste { display: flex; gap: var(--espace-4); overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--marge-laterale) var(--espace-2); scroll-padding: 0 var(--marge-laterale); }
.realisation { flex: 0 0 310px; scroll-snap-align: start; padding: var(--espace-3); background: var(--couleur-fond); border: 1px solid var(--couleur-filet); border-radius: var(--rayon-moyen); }
.realisation__paire { display: flex; overflow: hidden; border-radius: var(--rayon-moyen); }
.realisation__paire picture { flex: 1; aspect-ratio: 1 / 1; }
.realisation__paire picture + picture { border-left: 2px solid var(--couleur-fond); }
.realisation__paire img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) {
  .realisations__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espace-5); overflow: visible; padding: 0; width: min(100% - 2 * var(--marge-laterale), var(--contenu-max)); margin-inline: auto; }
  .realisation { padding: var(--espace-4); box-shadow: var(--ombre-carte); }
}

/* ---------- Bandeau (lien vers une autre prestation) ---------- */
.bandeau { display: flex; flex-direction: column; align-items: stretch; padding: var(--espace-5); }
.bandeau .photo { width: 96px; border-radius: var(--rayon-moyen); aspect-ratio: 1 / 1; }
.bandeau h2 { margin-top: var(--espace-4); }
.bandeau p { margin-top: var(--espace-2); color: var(--couleur-texte-secondaire); }
.bandeau .bouton { margin-top: var(--espace-5); }
@media (min-width: 768px) {
  .bandeau { flex-direction: row; align-items: center; gap: var(--espace-6); }
  .bandeau .photo { width: 120px; flex-shrink: 0; }
  .bandeau__texte { flex-grow: 1; }
  .bandeau h2 { margin-top: 0; }
  .bandeau .bouton { margin-top: 0; flex-shrink: 0; }
}

/* ---------- Présentation (à propos) ---------- */
.presentation { display: grid; gap: var(--espace-6); align-items: center; }
.presentation__texte h2 + p { margin-top: var(--espace-4); }
@media (min-width: 768px) {
  .presentation { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--espace-7); }
  .presentation__texte h2 + p { margin-top: var(--espace-5); }
}
@media (min-width: 1025px) { .presentation { grid-template-columns: 486px minmax(0, 600px); gap: var(--espace-9); } }

/* ---------- Histoire (frise) ---------- */
.histoire { position: relative; }
.histoire::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 0; width: 1px; background: var(--couleur-filet); }
.histoire ol { position: relative; display: flex; flex-direction: column; gap: var(--espace-6); }
.histoire li { position: relative; display: flex; flex-direction: column; padding-left: var(--espace-6); }
.histoire__point { position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: var(--rayon-pastille); background: var(--couleur-principale); }
.histoire__media { order: 1; margin-top: var(--espace-3); }
.histoire .surtitre { order: 0; }
.histoire h3 { order: 2; margin-top: var(--espace-4); }
.histoire li > p:last-child { order: 3; margin-top: var(--espace-2); color: var(--couleur-texte-secondaire); }
.histoire .photo { border-radius: var(--rayon-moyen); aspect-ratio: 3 / 2; }
.histoire__picto { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--rayon-moyen); background: var(--couleur-fond-alterne); color: var(--couleur-texte); }
.histoire__picto .icone { position: relative; width: 64px; height: 64px; }
.histoire__picto i { position: absolute; border-radius: var(--rayon-pastille); background: var(--couleur-principale); }
.histoire__frise { display: none; }
@media (min-width: 768px) {
  .histoire::before { display: none; }
  .histoire ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--espace-5); }
  .histoire li { padding-left: 0; }
  .histoire__point { display: none; }
  .histoire__media { order: 0; margin-top: 0; }
  .histoire__frise { order: 0; display: block; position: relative; height: 12px; margin: var(--espace-5) calc(-1 * var(--espace-5)) var(--espace-5) 0; }
  .histoire li:last-child .histoire__frise { margin-right: 0; }
  .histoire__frise::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--couleur-filet); }
  .histoire__frise::after { content: ""; position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: var(--rayon-pastille); background: var(--couleur-principale); }
  .histoire .surtitre { order: 1; }
  .histoire h3 { order: 2; margin-top: var(--espace-2); }
}

/* ---------- Formulaire de devis ---------- */
.devis__grille { display: flex; flex-direction: column; gap: var(--espace-5); }
.formulaire--carte { padding: var(--espace-5) var(--espace-5); background: var(--couleur-fond); border-radius: var(--rayon-moyen); box-shadow: var(--ombre-carte); }
.etapes-formulaire { display: flex; flex-direction: column; gap: var(--espace-3) var(--espace-5); margin: 0 0 var(--espace-5); padding: 0 0 var(--espace-5); border-bottom: 1px solid var(--couleur-filet); }
.etapes-formulaire li { display: flex; align-items: center; }
.etapes-formulaire__bouton {
  display: flex; align-items: center; gap: var(--espace-3); min-height: 44px; padding: 0; background: transparent; border: 0; text-align: left;
  font-weight: 600; font-size: var(--champ-taille-texte); line-height: 1.4; color: var(--couleur-texte-secondaire);
}
.etapes-formulaire__bouton:disabled { cursor: default; }
.etapes-formulaire__numero {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: 2px solid currentColor; border-radius: var(--rayon-pastille); background: var(--couleur-fond);
  font-family: var(--h3-police); font-weight: 700; font-size: var(--petit-taille);
}
.etapes-formulaire__bouton[aria-current="step"] { color: var(--couleur-accent); }
.etapes-formulaire__bouton[aria-current="step"] .etapes-formulaire__numero { background: var(--couleur-accent); border-color: var(--couleur-accent); color: var(--couleur-texte-sur-sombre); }
.formulaire__etape { display: flex; flex-direction: column; gap: var(--espace-6); }
.formulaire__etape--coordonnees { gap: var(--espace-5); }
.formulaire__etape > .bouton, .formulaire__corps > .bouton { width: 100%; }
.adresse-intervention { display: grid; gap: var(--espace-4); align-items: start; }
.devis__reassurance { padding: var(--espace-5) 20px; border-radius: var(--rayon-moyen); background: var(--couleur-fond-alterne); }
.devis__reassurance ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px var(--espace-4); }
.devis__reassurance li { display: flex; flex-direction: column; gap: var(--espace-2); font-weight: 600; }
.devis__reassurance .bulle-icone { width: 48px; height: 48px; background: var(--couleur-fond); }
@media (min-width: 768px) {
  .formulaire--carte { padding: var(--espace-6); }
  .etapes-formulaire { flex-direction: row; }
  .formulaire__etape > .bouton, .formulaire__corps > .bouton { width: auto; align-self: flex-start; }
  .adresse-intervention { grid-template-columns: 2fr 1fr; }
}
@media (min-width: 1025px) {
  .devis__grille { flex-direction: row; align-items: flex-start; gap: var(--espace-5); }
  .devis__grille .formulaire--carte { flex: 0 0 792px; max-width: calc(100% - 384px - var(--espace-5)); }
  .devis__reassurance { position: sticky; top: var(--espace-5); flex: 0 0 384px; padding: var(--espace-6); }
  .devis__reassurance ul { grid-template-columns: 1fr; gap: var(--espace-5); }
  .devis__reassurance li { flex-direction: row; align-items: center; gap: var(--espace-4); }
  .devis__reassurance .bulle-icone { width: 56px; height: 56px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .devis__grille { flex-direction: row; align-items: flex-start; }
  .devis__grille .formulaire--carte { flex: 1 1 auto; min-width: 0; }
  .devis__reassurance { flex: 0 0 280px; padding: var(--espace-5); position: sticky; top: var(--espace-5); }
  .devis__reassurance ul { grid-template-columns: 1fr; }
}
.section--formulaire { padding-top: var(--espace-5); }
@media (min-width: 768px) { .section--formulaire { padding-top: var(--espace-7); } }
@media (min-width: 1025px) { .section--formulaire { padding-top: var(--espace-8); } }

/* ---------- Contact ---------- */
.contact__grille { display: flex; flex-direction: column; gap: var(--espace-6); }
.contact__coordonnees { padding: var(--espace-5) 20px; border-radius: var(--rayon-moyen); }
.contact__coordonnees .coordonnees { gap: var(--espace-4); }
.contact__coordonnees .reseaux__liste { margin-top: var(--espace-6); padding-top: var(--espace-5); border-top: 1px solid var(--couleur-texte-secondaire); }
.contact__formulaire h2 { margin-bottom: var(--espace-6); }
.formulaire--bordure { border: 1px solid var(--couleur-filet); }
@media (min-width: 768px) {
  .contact__grille { flex-direction: row-reverse; align-items: flex-start; justify-content: flex-end; gap: var(--espace-5); }
  .contact__formulaire { flex: 0 1 690px; min-width: 0; }
  .contact__coordonnees { flex: 1 1 0; margin-top: 80px; padding: var(--espace-6); }
  .contact__coordonnees .coordonnees { gap: 20px; }
}

/* ---------- Pages de texte (mentions légales, confidentialité) ---------- */
.texte-legal { max-width: 760px; margin: 0; }
.texte-legal h2 { font-family: var(--h3-police); font-weight: var(--h3-graisse); font-size: var(--h3-taille); line-height: var(--h3-interligne); margin-top: var(--espace-7); }
.texte-legal > :first-child { margin-top: 0; }
.texte-legal p { margin-top: var(--espace-4); }
.texte-legal h2 + p { margin-top: var(--espace-4); }
.texte-legal strong { font-weight: 600; }
.section--texte { padding-top: var(--section-intro); }

/* ---------- Page introuvable et page merci ---------- */
.page-message { display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; text-align: center; min-height: 60vh; }
.page-message .bulles-fond { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--couleur-principale); --bulle-claire: var(--couleur-fond); }
.page-message .conteneur { position: relative; }
.page-message h1 { max-width: 820px; margin-inline: auto; }
.page-message p { max-width: 640px; margin: var(--espace-5) auto 0; }
.page-message p a { font-weight: 600; text-decoration: none; }
.page-message .boutons { justify-content: center; margin-top: var(--espace-6); }
@media (min-width: 1025px) { .page-message .boutons { margin-top: var(--espace-7); } }

/* ---------- Compléments ---------- */
.centre { text-align: center; }
.etapes--3 { --nb: 3; }
/* Bulles du pictogramme de la frise (étape sans photo) */
.histoire__picto i:nth-child(1) { left: 8%; top: 14%; width: 26px; height: 26px; opacity: .35; }
.histoire__picto i:nth-child(2) { left: 78%; top: 10%; width: 19px; height: 19px; opacity: .5; }
.histoire__picto i:nth-child(3) { left: 86%; top: 62%; width: 34px; height: 34px; opacity: .3; }
.histoire__picto i:nth-child(4) { left: 14%; top: 70%; width: 15px; height: 15px; opacity: .55; }
.histoire__picto i:nth-child(5) { left: 64%; top: 78%; width: 13px; height: 13px; opacity: .45; }
.histoire__picto i:nth-child(6) { left: 30%; top: 22%; width: 9px; height: 9px; opacity: .6; }
@media (max-width: 767px) {
  .choix--vehicule { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .boutons--inverse-mobile { flex-direction: column-reverse; }
}