/* KV Transport — site vitrine. Charte « le carton » : kraft #C99A66, charbon, ivoire (pas d'orange : c'est l'accent de KV Eats). */
@font-face { font-family: "Jakarta"; src: url("fonts/PlusJakartaSans-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("fonts/PlusJakartaSans-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("fonts/PlusJakartaSans-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }

:root {
  --charbon: #171715; --ivoire: #F2EBDD; --kraft: #C99A66; --kraft-clair: #E2B67E; --kraft-fonce: #8A5E2E;
  --sable: #F4EBDC; --carte: #FBF8F2; --carton: #EADBC4; --brun: #2B2219; --brun-carte: #3A2E22; --vert: #2E9D63;
  /* couleurs secondaires du bloc courant, redéfinies par les sections sombres */
  --doux: #6B5A45; --filet: rgba(23, 23, 21, .12);
  --haut-entete: 72px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--sable); color: var(--charbon); font: 500 16px/1.55 "Jakarta", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; letter-spacing: -.03em; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--charbon); outline-offset: 3px; }
.section--sombre :focus-visible, .simulateur__carte :focus-visible, .pied :focus-visible { outline-color: var(--ivoire); }

.cadre { width: min(1180px, 100%); margin-inline: auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.evitement { position: absolute; left: -999px; top: 8px; z-index: 50; padding: 10px 14px; border-radius: 10px; background: var(--charbon); color: var(--ivoire); }
.evitement:focus { left: 12px; }

/* Boutons */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 22px; border-radius: 14px; border: 2px solid transparent; font: inherit; font-weight: 800; font-size: .95rem; text-decoration: none; cursor: pointer; transition: transform .15s, background .15s, border-color .15s; }
.bouton:hover { transform: translateY(-1px); }
.bouton--sombre { background: var(--charbon); color: var(--ivoire); }
.bouton--contour { border-color: rgba(23, 23, 21, .35); color: var(--charbon); }
.bouton--contour:hover { border-color: var(--charbon); }
.bouton--petit { height: 40px; padding: 0 16px; border-radius: 11px; font-size: .86rem; }
.bouton--inactif { opacity: .55; cursor: default; }
.bouton--inactif:hover { transform: none; }

/* En-tête, sur le kraft du haut de page */
/* transparent tout en haut (le kraft du haut de page passe dessous), blanc cassé dès qu'on fait défiler */
.entete { position: sticky; top: 0; z-index: 20; margin-bottom: calc(-1 * (var(--haut-entete) + env(safe-area-inset-top, 0px))); background: transparent; border-bottom: 1px solid transparent; padding-top: env(safe-area-inset-top, 0px); transition: background .25s, border-color .25s, box-shadow .25s; }
.entete--defile { background: var(--sable); border-bottom-color: rgba(23, 23, 21, .08); box-shadow: 0 6px 24px rgba(60, 35, 10, .1); }
.entete__ligne { display: flex; align-items: center; gap: 28px; height: var(--haut-entete); }
.entete__logo img { display: block; height: 46px; width: auto; }
.entete__nav { display: flex; gap: 26px; margin-right: auto; }
.entete__nav a { text-decoration: none; font-weight: 700; font-size: .92rem; color: #3A2810; }
.entete__nav a:hover { color: var(--charbon); }
.entete__outils { display: flex; align-items: center; gap: 14px; }
.langues { display: flex; padding: 3px; border-radius: 11px; border: 1px solid rgba(23, 23, 21, .22); }
.langues button { border: 0; background: none; color: #3A2810; font: inherit; font-weight: 800; font-size: .78rem; padding: 6px 9px; border-radius: 8px; cursor: pointer; }
.langues button[aria-pressed="true"] { background: var(--charbon); color: var(--ivoire); }

/* Haut de page : fond kraft fibré, le carton qui s'ouvre */
.heros { padding: calc(28px + var(--haut-entete) + env(safe-area-inset-top, 0px)) 0 64px; overflow: hidden; background: var(--kraft); background-image: repeating-linear-gradient(100deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 7px), radial-gradient(circle at 78% 30%, rgba(255, 232, 196, .45), transparent 55%); }
.heros__grille { display: grid; grid-template-columns: 1.05fr .95fr; gap: 36px; align-items: center; }
.heros__texte { min-width: 0; }
.heros h1 { font-size: clamp(2.5rem, 5vw, 3.9rem); line-height: 1.04; letter-spacing: -.045em; font-weight: 800; }
/* le mot qui change : étiquette charbon, les mots glissent de bas en haut */
.heros__mots { display: inline-grid; vertical-align: top; height: 1.12em; overflow: hidden; padding: 0 .14em; border-radius: .08em; background: var(--charbon); color: var(--ivoire); transform: rotate(-1.5deg); }
.heros__mots span { grid-area: 1 / 1; transform: translateY(110%); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.heros__mots span.on { transform: none; }
.heros__mots span.parti { transform: translateY(-110%); }
.heros__sous { margin: 22px 0 30px; max-width: 44ch; font-size: 1.08rem; color: #3A2810; }
.heros__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.heros__scene { min-width: 0; }
.heros__scene svg { display: block; width: 100%; height: auto; overflow: visible; }
.carton-objet { display: none; }
.carton-objet.on { display: inline; }
.carton-camion { animation: camion 3s ease-in-out infinite; }
@keyframes camion { 50% { transform: translateY(-1.5px); } }

/* Sections : chacune fixe son fond et ses couleurs secondaires */
.section { padding: 88px 0; background: var(--sable); color: var(--charbon); }
.section--sombre { --doux: rgba(242, 235, 221, .68); --filet: rgba(242, 235, 221, .14); background: var(--brun); color: var(--ivoire); }
.section--carton { background: var(--carton); }
.section--kraft { --doux: #4A3216; --filet: rgba(23, 23, 21, .18); background: var(--kraft); }
/* même kraft fibré que le haut de page ; l'image est décalée de la hauteur du bord déchiré pour que le bord (::before) et la section se raccordent sans couture */
.section--kraft { background-image: repeating-linear-gradient(100deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 7px), radial-gradient(circle 680px at 78% 260px, rgba(255, 232, 196, .45), transparent); background-size: 100% 4000px; background-repeat: no-repeat; background-position: 0 calc(1px - var(--vague-h)); }
.section--kraft::before { background-position: 0 0; }
.surtitre { margin: 0 0 10px; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--doux); }
.section h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.05; font-weight: 800; max-width: 22ch; }
.section__sous { margin: 14px 0 0; max-width: 60ch; color: var(--doux); }

/* Services */
.services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.service { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 20px; background: var(--carte); border: 1px solid var(--filet); }
.service__icone { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--charbon); color: var(--kraft-clair); }
.service__icone svg { width: 28px; height: 28px; }
.service h3 { font-size: 1.12rem; }
.service p { margin: 0; color: var(--doux); font-size: .94rem; }
.service small { margin-top: auto; padding-top: 8px; font-weight: 800; font-size: .8rem; color: var(--kraft-fonce); }

/* Véhicules */
.vehicules { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.vehicule { display: flex; flex-direction: column; padding: 18px; border-radius: 20px; background: var(--brun-carte); border: 1px solid var(--filet); }
.vehicule svg { display: block; width: 100%; height: auto; margin-bottom: 12px; }
.vehicule h3 { font-size: 1.02rem; }
.vehicule__usage { margin: 2px 0 14px; font-size: .84rem; color: var(--doux); }
.vehicule dl { display: grid; gap: 6px; margin: 0 0 16px; font-size: .84rem; }
.vehicule dl div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed var(--filet); padding-bottom: 6px; }
.vehicule dt { color: var(--doux); }
.vehicule dd { margin: 0; font-weight: 700; text-align: right; }
.vehicule__prix { margin-top: auto; font-size: .82rem; color: var(--doux); }
.vehicule__prix strong { display: block; font-size: 1.5rem; color: var(--kraft-clair); letter-spacing: -.02em; }

/* Chauffeurs vérifiés */
.confiance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.confiance article { display: grid; align-content: start; gap: 8px; padding: 24px; border-radius: 20px; background: var(--carte); border: 1px solid var(--filet); }
.confiance h3 { display: flex; align-items: center; gap: 12px; font-size: 1.1rem; }
.confiance h3::before { content: ""; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--kraft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171715' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 16px no-repeat; }
.confiance p { margin: 0; color: var(--doux); font-size: .94rem; }

/* Simulateur */
.simulateur { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }
.simulateur__note { margin-top: 18px; padding: 12px 14px; border-radius: 12px; background: rgba(23, 23, 21, .06); font-size: .86rem; color: var(--doux); max-width: 44ch; }
.simulateur__carte { --doux: rgba(242, 235, 221, .68); --filet: rgba(242, 235, 221, .14); display: grid; gap: 22px; padding: 26px; border-radius: 26px; background: var(--brun); color: var(--ivoire); box-shadow: 0 28px 60px rgba(60, 35, 10, .28); min-width: 0; }
.simulateur fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.simulateur legend, .champ b { display: block; margin-bottom: 10px; font-weight: 800; font-size: .9rem; }
.choix-vehicule { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.choix-vehicule label { position: relative; display: grid; justify-items: center; gap: 4px; padding: 10px 6px; border-radius: 14px; border: 1px solid var(--filet); cursor: pointer; text-align: center; font-size: .78rem; font-weight: 700; color: var(--doux); }
.choix-vehicule svg { display: block; width: 100%; height: auto; filter: grayscale(1) opacity(.55); transition: filter .2s; }
.choix-vehicule input { position: absolute; opacity: 0; }
.choix-vehicule label:has(input:checked) { background: var(--kraft); color: var(--charbon); border-color: var(--kraft); }
.choix-vehicule label:has(input:checked) svg { filter: none; }
.choix-vehicule label:has(input:focus-visible) { outline: 2px solid var(--ivoire); outline-offset: 2px; }
.champ { display: grid; }
.champ > span:first-child { display: flex; justify-content: space-between; align-items: baseline; }
.champ output { font-weight: 800; }
.champ input[type="range"] { width: 100%; accent-color: var(--kraft); }
.champs-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.champ input[type="number"], .champ select { width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--filet); background: var(--brun-carte); color: var(--ivoire); font: inherit; font-weight: 700; color-scheme: dark; }
.champ__unite { position: relative; display: block; }
.champ__unite i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--doux); font-size: .86rem; }
.interrupteur { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; border: 1px solid var(--filet); cursor: pointer; }
.interrupteur input { width: 20px; height: 20px; accent-color: var(--kraft); }
.interrupteur span { display: grid; }
.interrupteur small { color: var(--doux); font-size: .82rem; }
.interrupteur[aria-disabled="true"] { opacity: .45; cursor: default; }
.resultat { padding-top: 18px; border-top: 1px solid var(--filet); }
.resultat__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 700; }
.resultat__total strong { font-size: 2.4rem; letter-spacing: -.03em; color: var(--kraft-clair); }
.resultat__detail { display: grid; gap: 4px; margin: 10px 0 0; font-size: .86rem; color: var(--doux); }
.resultat__detail div { display: flex; justify-content: space-between; }
.resultat__detail dd { margin: 0; }

/* Étapes */
.etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 40px 0 0; padding: 0; list-style: none; counter-reset: etape; }
.etapes li { counter-increment: etape; padding: 24px; border-radius: 20px; border: 1px solid var(--filet); }
.etapes li::before { content: "0" counter(etape); display: block; margin-bottom: 18px; font-weight: 800; font-size: .9rem; color: var(--kraft-clair); }
.etapes h3 { font-size: 1.08rem; margin-bottom: 6px; }
.etapes p { margin: 0; font-size: .92rem; color: var(--doux); }

/* Conducteurs */
.chauffeurs { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.avantages { display: grid; gap: 14px; margin: 30px 0 0; padding: 0; list-style: none; }
.avantages li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; }
.avantages li::before { content: ""; width: 26px; height: 26px; border-radius: 8px; background: var(--charbon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2B67E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 16px no-repeat; }
.avantages b { display: block; }
.avantages span { color: var(--doux); font-size: .93rem; }
.chauffeurs__carte { display: grid; gap: 14px; padding: 28px; border-radius: 26px; background: var(--carte); border: 1px solid rgba(23, 23, 21, .1); box-shadow: 0 22px 50px rgba(60, 35, 10, .25); }
.chauffeurs__carte h3 { font-size: 1.2rem; }
.chauffeurs__carte p { margin: 0; color: #6B5A45; font-size: .92rem; }
.requis { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.requis li { padding: 10px 14px; border-radius: 12px; background: var(--sable); font-weight: 700; font-size: .92rem; }

/* FAQ */
.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; }
.faq details { border-bottom: 1px solid var(--filet); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font-weight: 800; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--kraft-fonce); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 20px; max-width: 62ch; color: var(--doux); }

/* Pied */
.pied { padding: 40px 0 calc(40px + env(safe-area-inset-bottom, 0px)); background: var(--brun); color: var(--ivoire); }
.pied__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.pied img { height: 36px; width: auto; }
.pied p { margin: 0; color: rgba(242, 235, 221, .68); font-size: .9rem; }
.pied nav { display: flex; flex-wrap: wrap; gap: 20px; margin-left: auto; }
.pied nav a { font-weight: 700; font-size: .9rem; text-decoration: none; }
.pied small { color: rgba(242, 235, 221, .68); }

/* Séparations : chaque section remonte sur la précédente par une vague ou un bord de carton déchiré, de sa propre couleur */
:root {
  --dechire: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60 V32 L0 32 L22 34 L60 23 L80 39 L101 33 L137 23 L171 28 L190 24 L221 35 L241 29 L261 39 L292 23 L336 40 L357 29 L395 40 L414 40 L450 34 L469 29 L488 39 L533 26 L560 35 L582 39 L603 40 L630 39 L674 27 L695 40 L731 28 L760 25 L795 24 L831 23 L868 28 L901 39 L932 32 L964 40 L996 33 L1023 29 L1066 27 L1106 29 L1126 40 L1153 38 L1186 32 L1227 36 L1254 24 L1275 38 L1306 27 L1348 32 L1370 37 L1401 23 L1440 30 V60 Z'/%3E%3C/svg%3E");
  /* ombre du bord déchiré : le même tracé, remonté et flouté */
  --dechire-ombre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-5%25' y='-50%25' width='110%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E%3Cpath filter='url(%23f)' transform='translate(0 -5)' d='M0 60 V32 L0 32 L22 34 L60 23 L80 39 L101 33 L137 23 L171 28 L190 24 L221 35 L241 29 L261 39 L292 23 L336 40 L357 29 L395 40 L414 40 L450 34 L469 29 L488 39 L533 26 L560 35 L582 39 L603 40 L630 39 L674 27 L695 40 L731 28 L760 25 L795 24 L831 23 L868 28 L901 39 L932 32 L964 40 L996 33 L1023 29 L1066 27 L1106 29 L1126 40 L1153 38 L1186 32 L1227 36 L1254 24 L1275 38 L1306 27 L1348 32 L1370 37 L1401 23 L1440 30 V60 Z'/%3E%3C/svg%3E");
  --vague-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60 V30 C240 2 480 2 720 26 S1200 56 1440 20 V60 Z'/%3E%3C/svg%3E");
  --vague-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60 V18 C300 50 560 56 840 30 S1260 2 1440 34 V60 Z'/%3E%3C/svg%3E");
  --vague-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60 V40 C200 40 300 8 560 10 S1000 44 1200 30 S1380 12 1440 16 V60 Z'/%3E%3C/svg%3E");
  --vague-h: 56px;
}
.section, .pied { position: relative; }
.section::before, .pied::before { content: ""; position: absolute; left: 0; right: 0; top: calc(1px - var(--vague-h)); height: var(--vague-h); background: inherit; -webkit-mask: var(--forme, var(--vague-a)) bottom / 100% 100% no-repeat; mask: var(--forme, var(--vague-a)) bottom / 100% 100% no-repeat; pointer-events: none; }
#servicios { --forme: var(--dechire); }
#vehiculos { --forme: var(--vague-a); }
#confianza { --forme: var(--vague-b); }
#precio { --forme: var(--vague-c); }
#como { --forme: var(--vague-b); }
#conductores { --forme: var(--dechire); }
/* Bord de carton déchiré : une ombre portée sur la section du dessus, pour le relief du papier */
#servicios::before, #conductores::before, #preguntas::before { z-index: 1; }
#servicios::after, #conductores::after, #preguntas::after { content: ""; position: absolute; left: 0; right: 0; top: calc(1px - var(--vague-h)); height: var(--vague-h); background: rgba(58, 34, 10, .5); -webkit-mask: var(--dechire-ombre) bottom / 100% 100% no-repeat; mask: var(--dechire-ombre) bottom / 100% 100% no-repeat; pointer-events: none; }
#preguntas { --forme: var(--dechire); }
#preguntas::before, #preguntas::after { transform: scaleX(-1); } /* même déchirure qu'en haut de page, retournée */
.pied { --forme: var(--vague-c); }
@media (max-width: 560px) { :root { --vague-h: 30px; } }
/* Chevauchement : sur ordinateur, la carte du simulateur déborde sur la vague de la section suivante */
@media (min-width: 861px) {
  #precio { padding-bottom: 40px; }
  .simulateur__carte { position: relative; z-index: 3; margin-bottom: -110px; border: 1px solid rgba(242, 235, 221, .16); box-shadow: 0 30px 70px rgba(0, 0, 0, .45); }
  #como { padding-top: 150px; }
}

/* Badges des stores */
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
.stores a, .stores span { display: block; line-height: 0; border-radius: 9px; transition: transform .15s; }
.stores a:hover { transform: translateY(-2px); }
.stores img { display: block; height: 44px; width: auto; }
.stores--grand img { height: 52px; }
.stores span { cursor: default; }
.chauffeurs__carte .stores { margin-top: 4px; }

/* Section « l'app » : téléchargement et passerelle vers KV Eats */
.appli { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.appli__texte { min-width: 0; }
.eats { display: grid; gap: 14px; padding: 28px; border-radius: 26px; background: #F28C28; color: var(--charbon); text-decoration: none; box-shadow: 0 24px 50px rgba(0, 0, 0, .3); transition: transform .25s ease; }
.eats:hover { transform: translateY(-4px) rotate(-.6deg); }
.eats img { height: 56px; width: auto; }
.eats__titre { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.eats__lien { display: inline-flex; align-items: center; gap: 8px; justify-self: start; height: 46px; padding: 0 18px; border-radius: 13px; background: var(--charbon); color: var(--ivoire); font-weight: 800; }
.eats__lien svg { width: 18px; transition: transform .2s; }
.eats:hover .eats__lien svg { transform: translateX(3px); }
.entete__eats { padding: 4px 10px; border-radius: 8px; background: #F28C28; color: var(--charbon) !important; }
@media (max-width: 860px) { .appli { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 560px) { .stores img { height: 40px; } .stores--grand img { height: 46px; } }

/* ---------------------------------------------------------------- Animations */
/* Apparition au défilement : app ajoute .apparait, puis .vu quand l'élément entre à l'écran (--rang décale les cartes d'une même grille) */
.apparait { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--rang, 0) * 90ms); }
.apparait.vu { opacity: 1; transform: none; }

/* Cartes : légère montée au survol */
.service, .confiance article, .etapes li { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.service:hover, .confiance article:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(60, 35, 10, .14); }
.service__icone { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.service:hover .service__icone { transform: rotate(-8deg) scale(1.08); }
.service.vu .service__icone { animation: saut .6s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--rang, 0) * 90ms + .25s); }
@keyframes saut { from { transform: scale(.4); } }
.confiance.vu h3::before, .confiance article.vu h3::before { animation: saut .6s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--rang, 0) * 90ms + .3s); }

/* Véhicules : ils arrivent en roulant, les roues tournent ; au survol ils repartent un peu */
.v-roue { transform-box: fill-box; transform-origin: center; }
.vehicule svg { transform: translateX(-46%); opacity: 0; transition: transform 1.1s cubic-bezier(.2, .8, .25, 1), opacity .5s ease; transition-delay: calc(var(--rang, 0) * 120ms + .15s); }
.vehicule.vu svg { transform: none; opacity: 1; }
.vehicule.vu .v-roue { animation: roue 1.1s cubic-bezier(.2, .8, .25, 1) both; animation-delay: calc(var(--rang, 0) * 120ms + .15s); }
@keyframes roue { from { transform: rotate(-540deg); } }
.vehicule { transition: transform .25s ease, border-color .25s ease, opacity .7s ease; }
.vehicule:hover { transform: translateY(-4px); border-color: rgba(226, 182, 126, .45); }
.vehicule:hover svg { animation: cahot .5s ease-in-out infinite alternate; }
.vehicule:hover .v-roue { animation: tourne .6s linear infinite; }
@keyframes cahot { to { transform: translateY(-2px); } }
@keyframes tourne { to { transform: rotate(360deg); } }

/* Comment ça marche : un itinéraire, le camion avance d'étape en étape */
.parcours { position: relative; margin-top: 44px; --pastille: 56px; }
.parcours__route { position: absolute; top: calc(var(--pastille) / 2 - 2px); left: calc((100% - 48px) / 8); right: calc((100% - 48px) / 8); height: 4px; border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(242, 235, 221, .25) 0 14px, transparent 14px 26px); }
.parcours__trace { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 2px; background: var(--kraft-clair); transition: width 4.2s cubic-bezier(.45, 0, .55, 1) .3s; }
.parcours__camion { position: absolute; left: 0; bottom: -4px; width: 104px; transform: translateX(-50%); transition: left 4.2s cubic-bezier(.45, 0, .55, 1) .3s; }
.parcours__camion svg { display: block; width: 100%; height: auto; }
.parcours.vu .parcours__trace { width: 100%; }
.parcours.vu .parcours__camion { left: calc(100% - 64px); }
.parcours.vu .parcours__camion .v-roue { animation: tourne .5s linear 9 .3s; }
.parcours .etapes { margin-top: 0; text-align: center; }
.parcours .etapes li { position: relative; padding-top: calc(var(--pastille) + 22px); border: 0; }
.parcours .etapes li::before { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: var(--pastille); height: var(--pastille); margin: 0; border-radius: 50%; background: var(--brun); border: 2px solid rgba(242, 235, 221, .25); color: var(--doux); transition: background .4s ease, border-color .4s ease, color .4s ease, transform .4s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(.3s + var(--rang, 0) * 1.35s); }
.parcours.vu .etapes li::before { background: var(--kraft-clair); border-color: var(--kraft-clair); color: var(--charbon); transform: translateX(-50%) scale(1.08); }
.parcours .etapes li h3, .parcours .etapes li p { transition: opacity .5s ease; transition-delay: calc(.3s + var(--rang, 0) * 1.35s); opacity: .45; }
.parcours.vu .etapes li h3, .parcours.vu .etapes li p { opacity: 1; }

/* Conduisez avec KV Transport : les conditions arrivent une à une */
.requis li { transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .5s ease; transition-delay: calc(var(--rang, 0) * 110ms + .3s); }
.chauffeurs__carte:not(.vu) .requis li { opacity: 0; transform: translateX(24px); }
.avantages li { transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .5s ease; transition-delay: calc(var(--rang, 0) * 110ms); }
.avantages:not(.vu) li { opacity: 0; transform: translateX(-20px); }

/* Prix du simulateur : petit rebond quand il change */
.resultat__total strong.change { animation: rebond-prix .35s ease; }
@keyframes rebond-prix { 40% { transform: scale(1.06); color: #fff; } }

@media (max-width: 860px) {
  .parcours__route { display: none; }
  .parcours .etapes { text-align: left; }
  .parcours .etapes li { padding: 0 0 0 76px; min-height: var(--pastille); }
  .parcours .etapes li::before { left: 0; transform: none; }
  .parcours.vu .etapes li::before { transform: scale(1.06); }
  .parcours .etapes li::after { content: ""; position: absolute; left: calc(var(--pastille) / 2 - 1px); top: var(--pastille); bottom: -18px; border-left: 2px dashed rgba(242, 235, 221, .25); }
  .parcours .etapes li:last-child::after { display: none; }
  .parcours .etapes li h3, .parcours .etapes li p { transition-delay: calc(.2s + var(--rang, 0) * .45s); }
  .parcours .etapes li::before { transition-delay: calc(.2s + var(--rang, 0) * .45s); }
}
@media (prefers-reduced-motion: reduce) {
  .apparait, .vehicule svg, .requis li, .avantages li, .parcours .etapes li h3, .parcours .etapes li p { opacity: 1 !important; transform: none !important; }
  .parcours__trace { width: 100%; } .parcours__camion { left: 100%; }
}

@media (max-width: 1040px) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vehicules { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parcours__route { display: none; }
}
@media (max-width: 860px) {
  .entete__nav { display: none; }
  .entete__ligne { justify-content: space-between; }
  .heros { padding: calc(12px + var(--haut-entete) + env(safe-area-inset-top, 0px)) 0 48px; }
  .heros__grille, .simulateur, .chauffeurs, .faq { grid-template-columns: 1fr; gap: 28px; }
  .heros__scene { order: -1; width: min(460px, 100%); margin: 0 auto -8px; }
  .confiance { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
}
@media (max-width: 560px) {
  :root { --haut-entete: 64px; }
  .entete__logo img { height: 38px; }
  .entete__outils .bouton { display: none; }
  .services, .etapes { grid-template-columns: 1fr; }
  .vehicules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vehicules .vehicule:last-child { grid-column: span 2; }
  .vehicules .vehicule:last-child svg { max-width: 240px; margin-inline: auto; }
  .vehicule { padding: 14px; }
  .vehicule dl { font-size: .78rem; }
  .vehicule dd { white-space: nowrap; }
  .choix-vehicule { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .champs-duo { grid-template-columns: 1fr; }
  .simulateur__carte { padding: 20px; }
  .pied nav { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------- Réservation (reservation.js) */
[hidden] { display: none !important; }
/* Barre du haut de page : départ, arrivée, « Voir les prix » */
.heros__resa { margin-top: 26px; max-width: 660px; }
.resa-barre { padding: 14px; border-radius: 24px; background: var(--carte); box-shadow: 0 22px 50px rgba(60, 35, 10, .3); }
.resa-barre__champs { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
.resa-champ { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 8px 0 12px; height: 58px; border-radius: 15px; background: var(--sable); border: 2px solid transparent; transition: border-color .15s; }
.resa-champ:focus-within { border-color: var(--charbon); }
.resa-champ--ok .resa-champ__ico { color: var(--vert); }
.resa-champ__ico { flex: none; display: grid; color: var(--charbon); }
.resa-champ__ico svg { width: 20px; height: 20px; }
.resa-champ__corps { display: grid; flex: 1; min-width: 0; cursor: text; }
.resa-champ__corps em { font-style: normal; font-weight: 800; font-size: .74rem; color: var(--doux); }
.resa-champ__corps input { width: 100%; min-width: 0; border: 0; background: none; padding: 0; font: inherit; font-weight: 700; font-size: .95rem; color: var(--charbon); outline: none; text-overflow: ellipsis; }
.resa-ici { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 10px; background: none; color: var(--charbon); cursor: pointer; }
.resa-ici:hover { background: rgba(23, 23, 21, .08); }
.resa-ici svg { width: 19px; height: 19px; }
.resa-sugg { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; border-radius: 16px; background: #fff; box-shadow: 0 18px 40px rgba(23, 23, 21, .2); max-height: 300px; overflow: auto; }
.resa-sugg button { display: grid; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none; text-align: left; font: inherit; color: var(--charbon); cursor: pointer; }
.resa-sugg button:hover, .resa-sugg button:focus-visible { background: var(--sable); }
.resa-sugg b { font-size: .92rem; }
.resa-sugg small { color: var(--doux); font-size: .8rem; }
.resa-voir { display: inline-flex; align-items: center; gap: 8px; height: 58px; padding: 0 20px; border: 0; border-radius: 15px; background: var(--charbon); color: var(--ivoire); font: inherit; font-weight: 800; white-space: nowrap; cursor: pointer; transition: transform .15s; }
.resa-voir:hover { transform: translateY(-1px); }
.resa-voir:disabled { opacity: .6; cursor: progress; }
.resa-voir svg { width: 18px; }
.resa-barre__msg { margin: 10px 4px 0; color: #B3332B; font-weight: 700; font-size: .88rem; }
.resa-bandeau { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; max-width: 660px; margin-top: 22px; padding: 12px 14px; border-radius: 16px; background: var(--charbon); color: var(--ivoire); font-weight: 800; }
.resa-bandeau span { display: inline-flex; align-items: center; gap: 10px; }
.resa-bandeau i { width: 9px; height: 9px; border-radius: 50%; background: var(--vert); animation: pouls 2s infinite; }
.resa-bandeau button { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 0; border-radius: 11px; background: var(--kraft-clair); color: var(--charbon); font: inherit; font-weight: 800; cursor: pointer; }
.resa-bandeau button svg { width: 16px; }

/* Fenêtre : panneau à droite sur ordinateur, plein écran sur téléphone */
html.resa-ouverte { overflow: hidden; }
.resa { position: fixed; inset: 0; z-index: 60; }
.resa__fond { position: absolute; inset: 0; background: rgba(23, 23, 21, .55); animation: resa-fondu .25s ease; }
.resa__boite { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(560px, 100%); background: var(--sable); color: var(--charbon); box-shadow: -20px 0 60px rgba(0, 0, 0, .3); animation: resa-entree .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes resa-fondu { from { opacity: 0; } }
@keyframes resa-entree { from { transform: translateX(40px); opacity: 0; } }
.resa__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(14px + env(safe-area-inset-top, 0px)) 18px 14px 22px; border-bottom: 1px solid var(--filet); }
.resa__tete h2 { font-size: 1.3rem; }
.resa__fermer { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: rgba(23, 23, 21, .06); color: var(--charbon); cursor: pointer; }
.resa__fermer svg { width: 20px; }
.resa__corps { flex: 1; overflow-y: auto; padding: 18px 22px 26px; overscroll-behavior: contain; }
.resa__pied { padding: 12px 22px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--filet); background: var(--carte); }

.resa-carte { height: 210px; border-radius: 18px; overflow: hidden; background: #E9DFCE; }
.resa-carte__ko { display: grid; place-items: center; height: 100%; margin: 0; color: var(--doux); font-weight: 700; }
.resa-trajet__infos { display: grid; gap: 6px; margin-top: 12px; font-size: .92rem; }
.resa-trajet__infos p, .resa-recap p { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.resa-pt { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: .72rem; border: 2px solid var(--charbon); }
.resa-pt--a { background: var(--kraft-clair); } .resa-pt--b { background: var(--ivoire); }
.resa-trajet__km { color: var(--doux); font-weight: 700; }
.resa-lien { padding: 0; border: 0; background: none; color: var(--kraft-fonce); font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
.resa-lien--danger { color: #B3332B; }
.resa-bloc { margin-top: 24px; }
.resa-bloc h3 { margin: 18px 0 10px; font-size: 1.02rem; }
.resa-bloc h3:first-child { margin-top: 0; }
.resa-puces-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.resa-puces-choix button, .resa-tailles button { border: 1.5px solid rgba(23, 23, 21, .25); background: var(--carte); color: var(--charbon); font: inherit; cursor: pointer; transition: background .15s, border-color .15s; }
.resa-puces-choix button { padding: 8px 13px; border-radius: 999px; font-weight: 700; font-size: .86rem; }
.resa-puces-choix button[aria-pressed="true"], .resa-tailles button[aria-pressed="true"] { background: var(--charbon); border-color: var(--charbon); color: var(--ivoire); }
.resa-tailles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.resa-tailles button { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; text-align: left; }
.resa-tailles small { font-size: .74rem; opacity: .75; }
.resa-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: .88rem; font-weight: 700; }
.resa-ligne--bloc { display: grid; justify-content: stretch; }
.resa-ligne input, .resa-ligne textarea, .resa-dims input { box-sizing: border-box; width: 100%; max-width: 100%; padding: 10px 12px; border-radius: 11px; border: 1.5px solid rgba(23, 23, 21, .2); background: var(--carte); font: inherit; font-weight: 600; color: var(--charbon); }
.resa-ligne input[type="number"] { max-width: 120px; }
.resa-ligne--bloc input[type="number"] { max-width: none; }
.resa-details { margin-top: 14px; padding: 10px 14px; border-radius: 14px; background: rgba(23, 23, 21, .04); }
.resa-details summary { font-weight: 800; font-size: .9rem; cursor: pointer; }
.resa-dims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.resa-dims label { display: grid; gap: 4px; }
.resa-dims small { font-weight: 600; color: var(--doux); }
.resa-options { display: grid; gap: 10px; }
.resa-option { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; border-radius: 16px; background: var(--carte); border: 1px solid var(--filet); cursor: default; }
.resa-option div:first-child { display: grid; gap: 2px; }
.resa-option small { color: var(--doux); font-size: .8rem; }
.resa-compteur { display: flex; align-items: center; gap: 4px; }
.resa-compteur button { width: 36px; height: 36px; border: 0; border-radius: 11px; background: var(--charbon); color: var(--ivoire); font: inherit; font-weight: 800; font-size: 1.1rem; cursor: pointer; }
.resa-compteur output { min-width: 26px; text-align: center; font-weight: 800; font-size: 1.1rem; }
.resa-interrupteur { flex: none; appearance: none; width: 48px; height: 28px; margin: 0; border-radius: 999px; background: rgba(23, 23, 21, .2); position: relative; cursor: pointer; transition: background .2s; }
.resa-interrupteur::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.resa-interrupteur:checked { background: var(--charbon); }
.resa-interrupteur:checked::after { transform: translateX(20px); }
.resa-vehicules { display: grid; gap: 8px; }
.resa-veh { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 16px; border: 2px solid transparent; background: var(--carte); color: var(--charbon); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, transform .15s; }
.resa-veh:not(:disabled):hover { transform: translateX(2px); }
.resa-veh[aria-pressed="true"] { border-color: var(--charbon); background: #fff; }
.resa-veh:disabled { cursor: not-allowed; opacity: .5; }
.resa-veh:disabled .resa-veh__dessin { filter: grayscale(1); }
.resa-veh__dessin svg { display: block; width: 100%; height: auto; }
.resa-veh__nom { display: grid; }
.resa-veh__nom small { color: var(--doux); font-size: .78rem; }
.resa-veh__prix { font-weight: 800; font-size: 1.1rem; }
.resa-detail { display: grid; gap: 4px; margin: 14px 0 0; padding: 14px; border-radius: 16px; background: var(--carte); font-size: .88rem; }
.resa-detail div { display: flex; justify-content: space-between; gap: 10px; }
.resa-detail dt { color: var(--doux); }
.resa-detail dd { margin: 0; font-weight: 700; }
.resa-detail__total { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--filet); }
.resa-detail__total dt, .resa-detail__total dd { color: var(--charbon); font-weight: 800; font-size: 1.05rem; }
.resa-especes { margin: 10px 2px 0; font-size: .84rem; color: var(--doux); }
.resa-erreur { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: #F8DEDA; color: #8E2A22; font-weight: 700; font-size: .88rem; }
.resa-commander { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 54px; border: 0; border-radius: 15px; background: var(--charbon); color: var(--ivoire); font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer; }
.resa-commander:disabled { opacity: .45; cursor: not-allowed; }
.resa-commander svg { width: 18px; }
.resa-commander--danger { background: #B3332B; }

/* Connexion, téléphone, annulation */
.resa-compte { display: grid; gap: 12px; }
.resa-compte > p { margin: 0; color: var(--doux); }
.resa-compte form { display: grid; gap: 4px; }
.resa-google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; border-radius: 14px; border: 1.5px solid rgba(23, 23, 21, .25); background: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.resa-google svg { width: 20px; height: 20px; }
.resa-ou { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--doux); font-size: .84rem; }
.resa-ou::before, .resa-ou::after { content: ""; flex: 1; height: 1px; background: var(--filet); }
.resa-radio { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 13px; background: var(--carte); font-weight: 700; cursor: pointer; }

/* Suivi */
.resa-suivi .resa-carte { height: 240px; }
.resa-etapes { display: grid; gap: 0; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: resa; }
.resa-etapes li { position: relative; padding: 0 0 14px 34px; color: var(--doux); font-weight: 700; counter-increment: resa; }
.resa-etapes li::before { content: counter(resa); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(23, 23, 21, .1); font-size: .74rem; }
.resa-etapes li:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: 24px; bottom: 2px; width: 2px; background: rgba(23, 23, 21, .1); }
.resa-etapes li.fait { color: var(--charbon); }
.resa-etapes li.fait::before { content: "✓"; background: var(--charbon); color: var(--ivoire); }
.resa-etapes li.fait::after { background: var(--charbon); }
.resa-etapes li.en-cours { color: var(--charbon); }
.resa-etapes li.en-cours::before { background: var(--kraft); color: var(--charbon); box-shadow: 0 0 0 4px rgba(201, 154, 102, .35); animation: resa-pouls 1.6s infinite; }
@keyframes resa-pouls { 50% { box-shadow: 0 0 0 8px rgba(201, 154, 102, .12); } }
.resa-suivi__msg { margin: 6px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--carte); font-weight: 700; }
.resa-suivi__msg--attente { background: var(--charbon); color: var(--ivoire); }
.resa-chauffeur { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px; border-radius: 16px; background: var(--carte); }
.resa-chauffeur img, .resa-chauffeur__initiale { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.resa-chauffeur__initiale { display: grid; place-items: center; background: var(--kraft); font-weight: 800; font-size: 1.4rem; }
.resa-chauffeur div { display: grid; gap: 2px; min-width: 0; }
.resa-chauffeur small, .resa-chauffeur span { color: var(--doux); font-size: .84rem; }
.resa-recap { display: grid; gap: 8px; margin-top: 14px; padding: 14px; border-radius: 16px; background: var(--carte); font-size: .9rem; }
.resa-recap__ligne { color: var(--doux); font-weight: 700; }
.resa-recap__total { justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--filet); font-weight: 800; }
.resa-recap__total b { font-size: 1.2rem; }
.resa-suivi__actions { display: grid; gap: 10px; justify-items: center; margin-top: 16px; }
.resa-aide { margin: 14px 0 0; text-align: center; color: var(--doux); font-size: .82rem; }

@media (max-width: 760px) {
  .resa-barre__champs { grid-template-columns: 1fr; }
  .resa-voir { justify-content: center; height: 52px; }
  .resa__boite { width: 100%; }
}
@media (max-width: 560px) {
  .resa-barre { padding: 10px; border-radius: 20px; }
  .resa__corps { padding: 16px 16px 24px; }
  .resa__pied { padding-left: 16px; padding-right: 16px; }
  .resa-veh { grid-template-columns: 76px 1fr auto; }
}
@keyframes pouls { 70% { box-shadow: 0 0 0 9px rgba(46, 157, 99, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 157, 99, 0); } }

/* ---------------------------------------------------------------- Menu latéral et zone (menu.js) */
.ico { width: 20px; height: 20px; flex: none; }
.ico--petit { width: 14px; height: 14px; }
.burger { display: grid; place-items: center; flex: none; width: 42px; height: 42px; margin-right: -14px; border: 0; border-radius: 12px; background: none; color: var(--charbon); cursor: pointer; }
.burger:hover { background: rgba(23, 23, 21, .08); }
.burger svg { width: 26px; height: 26px; }

/* Zone dans l'en-tête */
.zone { position: relative; flex: none; }
.zone__bouton { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border: 0; border-left: 1px solid rgba(23, 23, 21, .18); background: none; color: var(--charbon); font: inherit; font-weight: 800; font-size: .92rem; cursor: pointer; white-space: nowrap; }
.zone__bouton span { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.zone__liste { position: absolute; left: 0; top: calc(100% + 8px); z-index: 40; min-width: 230px; margin: 0; padding: 6px; list-style: none; border-radius: 16px; background: var(--carte); box-shadow: 0 18px 40px rgba(23, 23, 21, .2); }
.zone__liste button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--charbon); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.zone__liste button span { flex: 1; }
.zone__liste button:hover { background: var(--sable); }
.zone__liste [aria-checked="true"] { color: var(--kraft-fonce); }
.zone__note { padding: 8px 12px; font-size: .8rem; color: var(--doux); }
.zone__liste { max-height: min(70vh, 520px); overflow-y: auto; overscroll-behavior: contain; }
.zone__chercher { position: sticky; top: -6px; z-index: 1; margin: -6px -6px 4px; padding: 8px 8px 6px; background: var(--carte); }
.zone__chercher input { width: 100%; box-sizing: border-box; height: 40px; padding: 0 12px; border: 1px solid var(--filet); border-radius: 10px; background: var(--sable); color: var(--charbon); font: inherit; font-size: 16px; }
.zone__aucune { padding: 10px 12px; font-size: .9rem; color: var(--doux); }

/* Panneau latéral */
html.ml-ouvert { overflow: hidden; }
.ml { position: fixed; top: 0; left: 0; bottom: 0; z-index: 70; display: flex; flex-direction: column; width: min(340px, 88vw); overflow-y: auto; background: var(--sable); color: var(--charbon); box-shadow: 10px 0 40px rgba(0, 0, 0, .25); transform: translateX(-105%); transition: transform .25s ease; padding-top: env(safe-area-inset-top, 0px); }
.ml--ouvert { transform: none; }
.ml-fond { position: fixed; inset: 0; z-index: 65; background: rgba(23, 23, 21, .45); opacity: 0; pointer-events: none; transition: opacity .2s; }
.ml-fond--visible { opacity: 1; pointer-events: auto; }
.ml__entete { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--filet); }
.ml__entete img { height: 40px; width: auto; }
.ml__fermer { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: rgba(23, 23, 21, .06); color: var(--charbon); cursor: pointer; }
.ml__compte { display: grid; gap: 10px; padding: 18px 20px 10px; }
.ml__bonjour { margin: 0; font-size: 1.15rem; font-weight: 800; }
.ml__bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border: 1.5px solid rgba(23, 23, 21, .25); border-radius: 13px; background: var(--carte); color: var(--charbon); font: inherit; font-weight: 800; cursor: pointer; }
.ml__bouton--plein { background: var(--charbon); border-color: var(--charbon); color: var(--ivoire); }
.ml__reserver { display: flex; align-items: center; gap: 12px; margin: 6px 20px 12px; padding: 14px 16px; border-radius: 14px; background: var(--kraft); color: var(--charbon); font-weight: 800; text-decoration: none; }
.ml__reserver .ico { width: 24px; height: 24px; }
.ml__groupe { padding: 10px 0; border-top: 1px solid var(--filet); }
.ml__titre { margin: 8px 20px 4px; font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--doux); }
.ml__groupe ul { margin: 0; padding: 0; list-style: none; }
.ml__groupe a, .ml__groupe li > button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 20px; border: 0; background: none; color: var(--charbon); font: inherit; font-weight: 700; font-size: 1rem; text-align: left; text-decoration: none; cursor: pointer; }
.ml__groupe a:hover, .ml__groupe li > button:hover { background: rgba(23, 23, 21, .05); }
.ml__groupe--secondaire a, .ml__groupe--secondaire li > button { font-weight: 500; font-size: .95rem; }
.ml__zones, .ml__segments { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 20px; }
.ml__zones button, .ml__segments button { padding: 8px 13px; border: 1.5px solid rgba(23, 23, 21, .25); border-radius: 999px; background: var(--carte); color: var(--charbon); font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer; }
.ml__zones button[aria-pressed="true"], .ml__segments button[aria-pressed="true"] { background: var(--charbon); border-color: var(--charbon); color: var(--ivoire); }
.ml__aide { margin: 4px 20px 0; font-size: .8rem; color: var(--doux); }
.ml__pays { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px; margin-top: auto; padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--filet); }
.ml__pays small { grid-column: 2; color: var(--doux); }
.drapeau { width: 30px; height: 20px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
@media (max-width: 860px) {
  .entete__ligne { justify-content: flex-start; gap: 14px; }
  .entete__outils { margin-left: auto; }
}
@media (max-width: 560px) {
  .entete__outils .langues { display: none; }
  .zone__bouton { padding: 0 8px; font-size: .85rem; }
  .zone__bouton span { max-width: 96px; }
  .burger { margin-right: -8px; }
}


/* ---------------------------------------------------------------- Mise en page condensée : 3 blocs après le haut de page */
/* Les anciennes sections devenues des tuiles ne portent plus de bord de section */
#preguntas::before, #preguntas::after { content: none; }
.mosaique #como { padding-top: 26px; }
#precio { padding-bottom: 0; }
.garage .simulateur__carte { margin-bottom: 0; }

/* 1. Mosaïque : titre, cartons des services, itinéraire, garanties */
#servicios { padding-bottom: 28px; }
.mosaique { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.tuile { border-radius: 24px; padding: 26px; min-width: 0; }
.tuile__titre { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 4px; }
.tuile--titre { grid-column: span 4; padding: 10px 6px 0 0; display: flex; flex-direction: column; justify-content: center; }
.tuile--titre h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
.mosaique .services { grid-column: span 8; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; }
.mosaique .service { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; column-gap: 14px; row-gap: 4px; padding: 20px; border: 0; border-radius: 6px; background-image: repeating-linear-gradient(100deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 7px), linear-gradient(160deg, #EBC793, #D3A066); box-shadow: 0 2px 0 rgba(120, 75, 30, .25), 0 14px 26px rgba(60, 35, 10, .16); rotate: var(--penche, 0deg); transition: rotate .3s ease, transform .25s ease, box-shadow .25s ease; }
.mosaique .service:nth-child(1) { --penche: -1deg; } .mosaique .service:nth-child(2) { --penche: .8deg; }
.mosaique .service:nth-child(3) { --penche: .6deg; } .mosaique .service:nth-child(4) { --penche: -.9deg; }
.mosaique .service:hover { rotate: 0deg; }
.mosaique .service::before { content: ""; position: absolute; top: -9px; left: 50%; width: 80px; height: 22px; transform: translateX(-50%) rotate(-3deg); background: rgba(250, 238, 214, .62); box-shadow: 0 1px 2px rgba(60, 35, 10, .15); }
.mosaique .service__icone { grid-row: span 3; width: 46px; height: 46px; border-radius: 13px; }
.mosaique .service__icone svg { width: 24px; height: 24px; }
.mosaique .service h3 { font-size: 1.02rem; }
.mosaique .service p { font-size: .86rem; color: #4A3216; }
.mosaique .service small { justify-self: start; margin-top: 6px; padding: 3px 9px; border: 2px solid rgba(23, 23, 21, .55); border-radius: 6px; color: var(--charbon); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; transform: rotate(-3deg); }
/* itinéraire : tuile sombre */
.tuile--sombre { grid-column: span 8; --doux: rgba(242, 235, 221, .68); --filet: rgba(242, 235, 221, .14); background: var(--brun); color: var(--ivoire); }
.tuile--sombre .parcours { margin-top: 26px; --pastille: 46px; }
.tuile--sombre .etapes { gap: 10px; }
.tuile--sombre .etapes h3 { font-size: .95rem; }
.tuile--sombre .etapes p { font-size: .82rem; }
.tuile--sombre .parcours__camion { width: 86px; }
/* garanties : une étiquette d'expédition */
.tuile--etiquette { grid-column: span 4; position: relative; background: var(--carte); border: 2px dashed rgba(23, 23, 21, .2); rotate: .8deg; }
.tuile--etiquette .confiance { grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
.tuile--etiquette .confiance article { padding: 0; border: 0; background: none; gap: 2px; }
.tuile--etiquette .confiance article:hover { transform: none; box-shadow: none; }
.tuile--etiquette .confiance h3 { font-size: .95rem; }
.tuile--etiquette .confiance h3::before { width: 24px; height: 24px; border-radius: 7px; background-size: 13px; }
.tuile--etiquette .confiance p { padding-left: 36px; font-size: .84rem; }
.tuile--etiquette::after { content: ""; display: block; height: 20px; width: 48%; margin-top: 16px; background: repeating-linear-gradient(90deg, rgba(23, 23, 21, .55) 0 2px, transparent 2px 4px, rgba(23, 23, 21, .55) 4px 5px, transparent 5px 9px); opacity: .7; }

/* 2. Le garage : vitrine du véhicule choisi + simulateur */
.garage__tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 40px; flex-wrap: wrap; }
.garage__tete .section__sous { max-width: 44ch; margin: 0; }
.garage { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 36px; align-items: center; margin-top: 34px; }
.garage__vitrine { position: relative; min-width: 0; }
.vitrine__scene { position: relative; padding: 10px 0 30px; overflow: hidden; }
.vitrine__scene svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; animation: arrivee 1s cubic-bezier(.2, .8, .25, 1) both; }
.vitrine__scene .v-roue { animation: roue 1s cubic-bezier(.2, .8, .25, 1) both; }
@keyframes arrivee { from { transform: translateX(-70%); opacity: 0; } 30% { opacity: 1; } }
.vitrine__scene::after { content: ""; position: absolute; left: 0; right: 0; bottom: 18px; height: 22px; background: #201A14 repeating-linear-gradient(90deg, rgba(242, 235, 221, .5) 0 30px, transparent 30px 58px) center / 100% 3px no-repeat; border-block: 2px solid rgba(242, 235, 221, .08); }
.vitrine__etiquette { position: relative; z-index: 2; width: min(470px, 96%); margin: -6px 0 0 6%; padding: 18px 20px; border-radius: 10px; background: var(--carte); color: var(--charbon); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); rotate: -2deg; animation: etiquette .5s cubic-bezier(.3, 1.4, .5, 1) .45s both; }
@keyframes etiquette { from { transform: translateY(16px) scale(.94); opacity: 0; } }
.vitrine__etiquette::before { content: ""; position: absolute; top: -8px; right: 26px; width: 60px; height: 18px; rotate: 6deg; background: rgba(226, 182, 126, .75); }
.vitrine__nom { margin: 0 0 10px; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.vitrine__nom small { display: block; font-size: .8rem; font-weight: 700; color: #6B5A45; letter-spacing: 0; }
.vitrine__etiquette dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; margin: 0; font-size: .82rem; }
.vitrine__etiquette dl div { display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; padding-bottom: 5px; border-bottom: 1px dashed rgba(23, 23, 21, .18); }
.vitrine__etiquette dt { color: #6B5A45; }
.vitrine__etiquette dd { margin: 0; font-weight: 800; }
.vitrine__prix { margin: 12px 0 0; font-size: .85rem; color: #6B5A45; }
.vitrine__prix strong { font-size: 1.4rem; color: var(--charbon); }
.garage .simulateur__carte { box-shadow: 0 26px 60px rgba(0, 0, 0, .4); border: 1px solid rgba(242, 235, 221, .12); background: var(--brun-carte); }
.garage .simulateur__note { margin: 12px 0 0; padding: 0; background: none; font-size: .78rem; color: var(--doux); max-width: none; }

/* 3. Trio : chauffeurs, questions, app */
.trio { display: grid; grid-template-columns: 1fr 1.1fr .9fr; gap: 22px; align-items: start; }
.trio h2 { font-size: 1.6rem; }
.trio .chauffeurs__carte { rotate: -1deg; transition: rotate .3s ease, opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.trio .chauffeurs__carte:hover { rotate: 0deg; }
.trio .chauffeurs__carte > p { margin: 0; }
.trio .avantages { gap: 10px; margin: 6px 0 4px; }
.trio .avantages span { font-size: .86rem; }
.trio .chauffeurs__carte h3 { font-size: 1rem; margin-top: 4px; }
.trio .bouton { justify-self: start; }
.trio__faq .faq { display: block; }
.trio__faq summary { padding: 14px 0; font-size: .95rem; }
.trio__faq details p { font-size: .9rem; margin-bottom: 14px; }
.trio__app { display: grid; gap: 18px; }
.appli__carte { padding: 26px; border-radius: 24px; background: var(--brun); color: var(--ivoire); --doux: rgba(242, 235, 221, .68); }
.appli__carte h2 { font-size: 1.4rem; }
.appli__carte > p:not(.surtitre) { margin: 10px 0 0; color: var(--doux); font-size: .9rem; }
.appli__carte .stores img { height: 40px; }

@media (max-width: 1040px) {
  .tuile--titre, .mosaique .services, .tuile--sombre, .tuile--etiquette { grid-column: 1 / -1; }
  .trio { grid-template-columns: 1fr 1fr; }
  .trio__app { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .garage { grid-template-columns: 1fr; }
  .trio, .trio__app { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .mosaique .services { grid-template-columns: 1fr; }
  .vitrine__etiquette dl { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .vitrine__scene svg, .vitrine__etiquette { animation: none; }
}
/* le simulateur n'est plus dans .simulateur : on reprend ses réglages de formulaire */
.simulateur__carte fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.simulateur__carte legend { display: block; margin-bottom: 10px; padding: 0; font-weight: 800; font-size: .9rem; }

/* Services et garage fusionnés : un seul fond sable continu entre les deux parties kraft ;
   le garage n'est plus une bande pleine largeur mais un panneau sombre arrondi posé sur ce fond */
#vehiculos { background: var(--sable); padding-top: 0; }
#vehiculos::before { content: none; }
#vehiculos > .cadre { width: min(1140px, calc(100% - 40px)); padding: 44px clamp(22px, 4vw, 52px) 48px; border-radius: 34px; background: var(--brun); background-image: radial-gradient(circle at 15% 0%, rgba(226, 182, 126, .12), transparent 45%); box-shadow: 0 30px 70px rgba(60, 35, 10, .28); }
@media (max-width: 560px) { #vehiculos > .cadre { width: calc(100% - 20px); border-radius: 26px; } }

/* Haut de la section chauffeurs : même effet que sous le haut de page, en miroir. C'est le papier sable qui
   déborde, déchiré, sur le kraft, et son ombre tombe sur le kraft (forme et ombre retournées verticalement) */
#conductores::before { top: -1px; background: var(--sable); transform: scaleY(-1); }
#conductores::after { top: -1px; z-index: 0; transform: scaleY(-1); }

/* Les photos des véhicules font ~300 px de large : on ne les agrandit pas au-delà (sinon elles deviennent floues) */
.vitrine__scene svg { max-width: 360px; margin-inline: auto; }
.vitrine__scene::after { left: 6%; right: 6%; }

/* Garage en un seul bloc : à gauche titre + véhicule (taille nette) + étiquette, à droite le simulateur, alignés en haut */
#vehiculos > .cadre { width: min(1100px, calc(100% - 40px)); padding: 52px clamp(22px, 5vw, 64px) 56px; }
.garage { margin-top: 0; align-items: start; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.garage__gauche { display: grid; gap: 22px; min-width: 0; }
.garage__tete { display: block; }
.garage__tete h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.garage__tete .section__sous { margin-top: 12px; max-width: 46ch; }
.vitrine__scene { padding: 6px 0 26px; }
.vitrine__scene svg { max-width: 320px; margin-inline: auto; }
.vitrine__scene::after { left: 0; right: 0; bottom: 14px; }
.vitrine__etiquette { width: auto; margin: -4px 4px 0; rotate: -1.2deg; }
/* la mosaïque du dessus prend la même largeur que le panneau du garage : les bords tombent l'un sous l'autre */
.cadre.mosaique { width: min(1100px, calc(100% - 40px)); padding-inline: 0; }

/* ---------------------------------------------------------------- Mosaïque à plat (large) : le garage rejoint la mosaïque */
.cadre.mosaique { width: min(1500px, calc(100% - 48px)); padding-inline: 0; gap: 18px;
  grid-template-columns: 1.25fr .95fr 1fr 1fr;
  grid-template-areas: "titre services services services" "como confiance garage garage"; }
.mosaique .tuile--titre { grid-column: auto; grid-area: titre; }
.mosaique .services { grid-column: auto; grid-area: services; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.mosaique .service { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; padding: 22px 18px 18px; }
.mosaique .service__icone { grid-row: auto; margin-bottom: 6px; }
.mosaique .tuile--sombre { grid-column: auto; grid-area: como; }
.mosaique .tuile--etiquette { grid-column: auto; grid-area: confiance; }
.mosaique .tuile--garage { grid-area: garage; }
/* le garage : tuile sombre, véhicule + étiquette à gauche, simulateur à droite */
#vehiculos.tuile--garage { padding: 24px; border-radius: 24px; background: var(--brun); color: var(--ivoire); --doux: rgba(242, 235, 221, .68); --filet: rgba(242, 235, 221, .14); }
.tuile--garage .garage { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
.tuile--garage .garage__gauche { gap: 14px; }
.tuile--garage .garage__tete .section__sous { margin-top: 6px; font-size: .84rem; }
.tuile--garage .vitrine__scene svg { max-width: 260px; }
.tuile--garage .vitrine__etiquette { margin: -4px 2px 0; padding: 14px 16px; rotate: -1.5deg; }
.tuile--garage .vitrine__nom { font-size: 1.1rem; margin-bottom: 8px; }
.tuile--garage .vitrine__etiquette dl { grid-template-columns: 1fr; gap: 4px; font-size: .78rem; }
.tuile--garage .vitrine__prix { margin-top: 8px; }
.tuile--garage .vitrine__prix strong { font-size: 1.15rem; }
.tuile--garage .simulateur__carte { gap: 14px; padding: 18px; border-radius: 20px; box-shadow: none; }
.tuile--garage .choix-vehicule { gap: 6px; }
.tuile--garage .choix-vehicule label { padding: 7px 3px; font-size: .68rem; border-radius: 11px; }
.tuile--garage .champ input[type="number"], .tuile--garage .champ select { height: 42px; }
.tuile--garage .interrupteur { padding: 10px 12px; }
.tuile--garage .resultat { padding-top: 12px; }
.tuile--garage .resultat__total strong { font-size: 1.9rem; }

@media (max-width: 860px) {
  .mosaique .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tuile--garage .garage { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  #vehiculos.tuile--garage { padding: 18px; }
}

/* Échange : l'itinéraire (avec le camion) prend toute la largeur en haut ; les services passent en colonne à gauche */
.cadre.mosaique { grid-template-columns: 1.15fr .95fr 1fr 1fr; grid-template-rows: auto auto 1fr;
  grid-template-areas: "como como como como" "titre confiance garage garage" "services confiance garage garage"; }
.mosaique .tuile--sombre { padding: 28px 32px 30px; }
.mosaique .tuile--sombre .parcours { margin-top: 20px; }
.mosaique .tuile--titre { padding: 4px 0 0; justify-content: flex-start; }
.mosaique .tuile--titre h2 { font-size: clamp(1.8rem, 2.6vw, 2.4rem); }
.mosaique .services { grid-template-columns: 1fr; align-content: start; gap: 16px; }
.mosaique .service { grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; padding: 18px 18px 16px; }
.mosaique .service__icone { grid-row: span 3; margin-bottom: 0; }
.mosaique .tuile--etiquette, #vehiculos.tuile--garage { align-self: start; }

@media (max-width: 1280px) {
  .cadre.mosaique { grid-template-columns: 1fr 1fr; grid-template-rows: none;
    grid-template-areas: "como como" "titre confiance" "services confiance" "garage garage"; }
}
@media (max-width: 860px) {
  .cadre.mosaique { width: calc(100% - 40px); grid-template-columns: 1fr; grid-template-areas: "como" "titre" "services" "confiance" "garage"; }
}

/* Moins de vide : services en 2 × 2 à côté du garage (même hauteur), garanties en bande horizontale dessous */
.cadre.mosaique { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "como como como como" "titre titre garage garage" "services services garage garage" "confiance confiance confiance confiance"; }
.mosaique .services { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; align-content: stretch; gap: 16px 16px; }
.mosaique .tuile--titre h2 { font-size: clamp(1.8rem, 2.4vw, 2.3rem); }
#vehiculos.tuile--garage { align-self: stretch; }
.mosaique .tuile--etiquette { align-self: auto; rotate: -.4deg; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 3fr); column-gap: 28px; align-items: center; padding: 24px 28px; }
.tuile--etiquette .confiance { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 0; grid-row: span 2; }
.tuile--etiquette::after { grid-column: 1; margin-top: 10px; width: 70%; }
@media (max-width: 1280px) {
  .cadre.mosaique { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-template-areas: "como como" "titre titre" "services services" "garage garage" "confiance confiance"; }
  .mosaique .services { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .cadre.mosaique { grid-template-columns: 1fr; grid-template-areas: "como" "titre" "services" "garage" "confiance"; }
  .mosaique .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaique .tuile--etiquette { grid-template-columns: 1fr; }
  .tuile--etiquette .confiance { grid-template-columns: 1fr; margin-top: 14px; }
}
@media (max-width: 560px) { .mosaique .services { grid-template-columns: 1fr; } }
.mosaique .tuile--etiquette { grid-template-rows: auto auto auto; }
.mosaique .tuile--etiquette > .surtitre { grid-column: 1; grid-row: 1; }
.mosaique .tuile--etiquette > .tuile__titre { grid-column: 1; grid-row: 2; }
.mosaique .tuile--etiquette > .confiance { grid-column: 2; grid-row: 1 / span 3; }
.mosaique .tuile--etiquette::after { grid-column: 1; grid-row: 3; }
@media (max-width: 860px) { .mosaique .tuile--etiquette > .confiance { grid-column: 1; grid-row: auto; } .mosaique .tuile--etiquette::after { grid-row: auto; } }

/* ---------------------------------------------------------------- En-tête et menu sur le modèle de KV Eats */
:root { --haut-entete: 68px; }
.entete__ligne { width: 100%; max-width: none; margin: 0; gap: 14px; height: var(--haut-entete); padding: 0 20px; }
.entete__logo img { height: 48px; }
.burger { margin-right: 0; width: 40px; height: 40px; }
.zone__bouton { height: 40px; }
.raccourci { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 760px; height: 44px; margin: 0 auto; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(23, 23, 21, .12); background: var(--carte); color: #6B5A45; font: inherit; font-size: .95rem; text-align: left; cursor: pointer; transition: border-color .2s; }
.raccourci:hover { border-color: rgba(23, 23, 21, .35); }
.raccourci svg { flex: none; width: 20px; height: 20px; color: var(--charbon); }
.raccourci span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.entete__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.bouton-entete { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(23, 23, 21, .18); background: transparent; color: var(--charbon); font: inherit; font-weight: 700; font-size: .92rem; text-decoration: none; cursor: pointer; }
.bouton-entete:hover { background: rgba(255, 255, 255, .35); }
.bouton-entete svg, .bouton-entete .ico { width: 20px; height: 20px; }
.menu-langue, .compte { position: relative; }
.langues.menu-langue__liste, .compte__liste { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; display: block; min-width: 190px; margin: 0; padding: 6px; list-style: none; border: 1px solid rgba(23, 23, 21, .1); border-radius: 14px; background: var(--carte); box-shadow: 0 18px 40px rgba(23, 23, 21, .18); }
.menu-langue__liste[hidden], .compte__liste[hidden] { display: none; }
.langues.menu-langue__liste button, .compte__liste button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--charbon); font: inherit; font-weight: 600; font-size: .95rem; text-align: left; cursor: pointer; }
.langues.menu-langue__liste button:hover, .compte__liste button:hover { background: var(--sable); }
.langues.menu-langue__liste button[aria-pressed="true"] { background: none; color: var(--kraft-fonce); }
.langues.menu-langue__liste button[aria-pressed="true"]::after { content: "✓"; margin-left: auto; font-weight: 800; }
/* menu latéral : mêmes proportions que KV Eats */
.ml__compte { grid-template-columns: 1fr 1fr; gap: 12px; padding: 18px; }
.ml__bonjour { grid-column: 1 / -1; }
.ml__compte .ml__bouton { height: 44px; font-size: .95rem; white-space: nowrap; }
.ml__reserver { margin: 0 18px 8px; }
.ml__groupe a .ico--droite { margin-left: auto; color: var(--doux); }
.ml__groupe a span { flex: 1; }
.ml__segments { gap: 4px; margin: 6px 20px; padding: 4px; border-radius: 12px; background: var(--sable); }
.ml__segments button { flex: 1; padding: 9px 0; border: 0; border-radius: 9px; background: none; }
.ml__segments button[aria-pressed="true"] { background: var(--kraft); color: var(--charbon); border: 0; }
@media (max-width: 860px) {
  .raccourci { display: none; }
  .entete__actions { margin-left: auto; }
}
@media (max-width: 560px) {
  .masquer-mobile { display: none; }
  .entete__ligne { gap: 8px; padding: 0 12px; }
  .entete__logo img { height: 40px; }
}

/* Fin du menu comme KV Eats : Préférences puis le pays (Panamá, dépliable) */
.ml__pays { display: block; padding: 0; border-top: 1px solid var(--filet); }
.ml__pays-bouton { display: flex; align-items: center; gap: 12px; width: 100%; padding: 18px 20px; border: 0; background: none; color: var(--charbon); font: inherit; font-size: 1.02rem; text-align: left; cursor: pointer; }
.ml__pays-bouton strong { flex: 1; }
.ml__pays-bouton .ico { transition: transform .2s; }
.ml__pays-bouton[aria-expanded="true"] .ico { transform: rotate(180deg); }
.ml__pays-liste { padding: 0 20px calc(18px + env(safe-area-inset-bottom, 0px)); }
.ml__pays-liste p { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; padding: 10px 12px; border-radius: 10px; background: var(--sable); font-weight: 700; }
.ml__pays-liste p span { flex: 1; }
.ml__pays-liste small { grid-column: auto; color: var(--doux); }
.ml__pays-bouton > .ico { transform: none; } .ml__pays-bouton[aria-expanded="true"] > .ico { transform: rotate(180deg); }
.ml__segments { background: rgba(23, 23, 21, .07); }

/* Raccourci de l'en-tête : un vrai champ de saisie */
.raccourci { cursor: text; }
.raccourci input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: inherit; color: var(--charbon); }
.raccourci input::placeholder { color: #6B5A45; }
.raccourci:focus-within { border-color: var(--charbon); }

.heros { overflow: visible; overflow-x: clip; position: relative; }

/* Mes courses : liste des courses du client, et flèche de retour depuis le suivi */
.resa-liste { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.resa-liste button { display: grid; gap: 6px; width: 100%; padding: 16px 18px; border: 1px solid rgba(23, 23, 21, .1); border-radius: 16px; background: var(--carte); color: var(--charbon); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, transform .15s; }
.resa-liste button:hover { border-color: rgba(23, 23, 21, .35); transform: translateY(-1px); }
.resa-liste__haut { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.resa-liste__haut b { padding: 4px 10px; border-radius: 999px; background: var(--sable); font-size: .78rem; font-weight: 800; }
.resa-liste__haut span { font-size: 1.1rem; font-weight: 800; }
.resa-liste__trajet { font-weight: 600; font-size: .92rem; line-height: 1.4; }
.resa-liste small { color: var(--doux); font-size: .8rem; }
.resa-vide { margin: 20px 0; color: var(--doux); text-align: center; }
.resa__retour { display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin-right: -4px; border: 0; border-radius: 12px; background: rgba(23, 23, 21, .06); color: var(--charbon); cursor: pointer; }
.resa__retour:hover { background: rgba(23, 23, 21, .12); }
.resa__retour svg { width: 20px; }
.resa__tete h2 { flex: 1; }
/* pas de contexte d'empilement sur le haut de page : le bord déchiré de la section suivante doit passer par-dessus */
.heros { z-index: auto; }

/* Haut de page aux mêmes dimensions que KV Eats (accueil.css .heros-cloche) */
.heros { padding: calc(40px + var(--haut-entete) + env(safe-area-inset-top, 0px)) 0 56px; }
.heros > .cadre { width: min(1240px, 100% - 32px); padding-inline: 0; }
.heros__grille { grid-template-columns: 1.05fr .95fr; gap: 24px; }
.heros h1 { margin: 0 0 16px; font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: .98; }
.heros__sous { margin: 0 0 22px; font-size: 1.05rem; max-width: 42ch; }
.heros__resa { margin-top: 0; max-width: 620px; }
.resa-barre { padding: 20px; border-radius: 22px; }
.resa-champ { height: 60px; border-radius: 16px; }
.resa-voir { height: 60px; border-radius: 16px; }
@media (max-width: 860px) {
  .heros { padding: calc(12px + var(--haut-entete) + env(safe-area-inset-top, 0px)) 0 40px; }
  .heros__grille { grid-template-columns: 1fr; gap: 8px; }
  .resa-barre { padding: 14px; }
}

/* Bandeau Kveloz+ : bloc vertical sous la FAQ (dernière section) */
.kvp-zone { margin-top: 26px; }
.kvp-zone .kvp { margin-block: 0; }

/* En-tête mobile : tout reste visible (menu, logo, zone, cloche, langue, compte). Le logo garde sa taille et ses proportions ;
   les boutons rétrécissent et c'est le nom de la zone qui se raccourcit. */
.entete__logo { flex: none; }
.entete__logo img { max-width: none; object-fit: contain; }
.zone { min-width: 0; flex: 0 1 auto; }
.zone__bouton { max-width: 100%; }
.zone__bouton span { min-width: 0; }
@media (max-width: 430px) {
  .entete__ligne { gap: 6px; padding: 0 10px; }
  .entete__logo img { height: 32px; }
  .burger { width: 34px; height: 36px; }
  .zone__bouton { height: 36px; padding: 0 4px 0 8px; gap: 4px; font-size: .82rem; }
  .zone__bouton > svg:last-child { display: none; }
  .entete__actions { gap: 5px; }
  .entete__actions .bouton-entete, .entete__actions .kvn__bouton, .entete__actions .compte > button { height: 36px; min-width: 36px; padding: 0 8px; border-radius: 11px; }
  .entete__actions .kvn__bouton { width: 36px; padding: 0; }
  .menu-langue .bouton-entete svg { display: none; }
}

/* Badges des stores (js/stores.js, remplis après le chargement du script) : place réservée pour éviter le décalage de mise en page */
[data-stores] { min-height: 58px; }
@media (max-width: 560px) { [data-stores] { min-height: 54px; } }