/* Gabarit « Kai » (2026-10-29) : style relevé sur le site de Frank Enterprises (Kai Stone) : titres Playfair Display, texte DM Sans,
   rouge foncé, ardoise, bandeau rose, cartes blanches arrondies. Couleurs et polices seulement : le code est le nôtre. */
:root {
  --rouge: #C01818; --rouge-fonce: #9E1414; --rouge-pale: #FEF2F2;
  --ardoise: #484A66; --ardoise-fonce: #3B3D57;
  --encre: #303030; --gris: #5F6070; --filet: #E6E4E0; --fond: #FFFFFF; --fond-gris: #F7F7F8; --fond-gris2: #F3F3F5;
  --titres: "Playfair Display", Georgia, serif; --texte: "DM Sans", Inter, system-ui, sans-serif;
  --rayon: 14px; --ombre: 0 18px 40px -24px rgba(30, 30, 50, .35);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
#devis { scroll-margin-top: 100px; } /* sous l'en-tête collant (84 px), pour que le lien #devis du SMS montre le haut du formulaire */
body { margin: 0; background: var(--fond); color: var(--encre); font: 16px/1.65 var(--texte); }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--titres); font-weight: 700; line-height: 1.15; margin: 0; color: var(--encre); }
h2 em, h1 em { color: var(--rouge); font-style: italic; }
p { margin: 0 0 14px; }
.cadre { max-width: 1160px; margin: 0 auto; padding-inline: 24px; }
:focus-visible { outline: 3px solid var(--rouge); outline-offset: 2px; }
.ico { width: 18px; height: 18px; flex: none; }
.ico-s { width: 15px; height: 15px; }
.ico-g { transform: rotate(180deg); }
.bandeau-demo { background: #B7832B; color: #fff; text-align: center; font-size: 13px; font-weight: 600; padding: 6px 12px; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 8px; font: 600 15px/1.2 var(--texte); text-decoration: none; cursor: pointer; border: 1.5px solid transparent; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.btn-plein { background: var(--rouge); color: #fff; }
.btn-plein:hover { background: var(--rouge-fonce); }
.btn-contour { border-color: var(--rouge); color: var(--rouge); background: transparent; }
.btn-contour:hover { background: var(--rouge-pale); }
.btn-contour-clair { border-color: rgba(255,255,255,.7); color: #fff; }
.btn-blanc { background: #fff; color: var(--rouge); border-color: var(--rouge); }
.lien-fleche { display: inline-flex; align-items: center; gap: 6px; color: var(--rouge); font-weight: 600; font-size: 14px; text-decoration: none; }
.lien-fleche:hover { text-decoration: underline; }

/* En-tête : transparent sur la photo, blanc dès qu'on descend */
.entete { position: sticky; top: 0; z-index: 50; background: rgba(32, 32, 36, .0); transition: background .25s, box-shadow .25s; margin-bottom: -84px; }
.entete-in { display: flex; align-items: center; gap: 28px; min-height: 84px; }
.marque { display: grid; text-decoration: none; color: #fff; line-height: 1.15; min-width: 0; max-width: 320px; }
.marque b { font: 700 21px/1.1 var(--titres); }
.marque span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; margin-top: 4px; }
.marque img { max-height: 52px; width: auto; }
.marque-avec-symbole { display: flex; align-items: center; gap: 12px; max-width: 400px; }
.marque-avec-symbole .marque-symbole { width: 46px; height: 46px; max-height: none; flex: none; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.marque .marque-texte { display: grid; min-width: 0; font-size: inherit; letter-spacing: normal; text-transform: none; opacity: 1; margin-top: 0; }
.menu { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.menu > a, .deroule > button { color: #fff; text-decoration: none; font: 500 15px var(--texte); background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 8px 0; white-space: nowrap; }
.deroule { position: relative; }
.sous { position: absolute; top: 100%; left: -16px; min-width: 240px; background: #fff; border-radius: 12px; box-shadow: var(--ombre); padding: 10px; display: none; }
.sous a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--encre); text-decoration: none; font-size: 14px; }
.sous a:hover { background: var(--rouge-pale); color: var(--rouge); }
.deroule:hover .sous, .deroule.ouvert .sous { display: block; }
.entete-cta { display: flex; align-items: center; gap: 10px; }
.entete .btn-contour { border-color: rgba(255,255,255,.75); color: #fff; }
.entete .btn-contour:hover { background: rgba(255,255,255,.12); }
.menu-bouton { display: none; background: none; border: 1.5px solid rgba(255,255,255,.7); color: #fff; border-radius: 8px; width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; }
.entete.solide { background: #fff; box-shadow: 0 4px 20px -10px rgba(0,0,0,.25); }
.entete.solide .marque, .entete.solide .menu > a, .entete.solide .deroule > button { color: var(--encre); }
.entete.solide .btn-contour { border-color: var(--filet); color: var(--encre); }
.entete.solide .menu-bouton { color: var(--encre); border-color: var(--filet); }

/* Haut de page : photo assombrie, texte à gauche, formulaire à droite */
.haut { position: relative; background-color: #2B2B2E; background-position: center; background-size: cover; background-repeat: no-repeat; color: #fff; padding: 150px 0 90px; isolation: isolate; }
.haut::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20,20,24,.86) 0%, rgba(20,20,24,.62) 55%, rgba(20,20,24,.45) 100%); }
.haut-grille { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
.haut h1 { color: #fff; font-size: clamp(36px, 5vw, 58px); line-height: 1.07; max-width: 13ch; margin-bottom: 18px; }
.haut-texte > p { font-size: 17px; color: rgba(255,255,255,.88); max-width: 46ch; }
.pastille { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; padding: 9px 16px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); color: #fff; text-decoration: none; font-size: 14px; backdrop-filter: blur(6px); }
.pastille .g { width: 18px; height: 18px; }
.pastille b { font-size: 15px; }
.pastille span { opacity: .8; border-left: 1px solid rgba(255,255,255,.3); padding-left: 10px; }
.etoiles { color: #F5B301; letter-spacing: 1px; font-size: 15px; }
.haut-form { background: #fff; color: var(--encre); border-radius: 18px; padding: 28px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); }
.haut-court { padding: 140px 0 70px; }
.haut-court h1 { max-width: 20ch; }
.haut-sous { font-size: 17px; color: rgba(255,255,255,.88); max-width: 56ch; }
.haut-boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.surtitre { font: 600 11px/1 var(--texte); letter-spacing: .14em; text-transform: uppercase; color: var(--rouge); margin: 0 0 14px; }
.surtitre.clair { color: #FFB4B4; }
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; font-size: 13px; color: rgba(255,255,255,.75); }
.ariane li + li::before { content: "›"; margin-right: 6px; }
.ariane a { color: rgba(255,255,255,.85); }

/* Formulaire */
.kform { display: grid; gap: 12px; }
.kform-titre { font-size: 24px; text-align: center; margin-bottom: 4px; }
.champ { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.champ i { color: var(--rouge); font-style: normal; }
.champ input, .champ textarea { font: 400 15px var(--texte); color: var(--encre); padding: 12px 14px; border: 1.5px solid var(--filet); border-radius: 10px; background: #FAFAFA; width: 100%; }
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--rouge); background: #fff; }
.champ textarea { resize: vertical; min-height: 84px; }
.civ { display: grid; grid-template-columns: 1fr 1fr; border: 1.5px solid var(--filet); border-radius: 10px; overflow: hidden; }
.civ label { display: flex; cursor: pointer; }
.civ input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.civ span { flex: 1; display: grid; place-items: center; min-height: 42px; font-size: 14px; font-weight: 600; color: var(--gris); }
.civ label + label span { border-left: 1.5px solid var(--filet); }
.civ input:checked + span { background: var(--ardoise); color: #fff; }
.accord { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; line-height: 1.45; color: var(--gris); }
.accord input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--rouge); flex: none; }
.kform .btn { width: 100%; padding: 14px; font-size: 16px; }
.kform-msg { margin: 0; font-size: 14px; font-weight: 600; }
.kform-msg:empty { display: none; }
.kform-msg.ok { color: #1E7A42; } .kform-msg.err { color: var(--rouge); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Bandeau de réassurance */
.reassurance { background: var(--rouge-pale); border-bottom: 1px solid #F6DADA; }
.reassurance ul { list-style: none; margin: 0 auto; padding-block: 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.reassurance li { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: var(--rouge-fonce); }
.reassurance li + li { border-left: 1px solid #F1CACA; padding-left: 20px; }
.reassurance .ico { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: #fff; color: var(--rouge); }

/* Blocs */
.bloc { padding: 96px 0; }
.bloc-gris { background: var(--fond-gris); }
.bloc-blanc { background: #fff; }
.tete { max-width: 680px; margin-bottom: 44px; }
.tete h2, .bloc h2 { font-size: clamp(30px, 3.6vw, 44px); }
.intro { color: var(--gris); font-size: 17px; margin-top: 14px; }

/* Services : photo à gauche, texte à droite, deux cartes par ligne */
.grille-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.carte-service { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); background: #fff; border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); transition: transform .25s; }
.carte-service:hover { transform: translateY(-3px); }
.cs-photo img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.cs-corps { padding: 24px 22px; display: flex; flex-direction: column; }
.cs-corps h3 { font-size: 21px; margin-bottom: 8px; }
.cs-corps h3 a { text-decoration: none; }
.cs-corps > p { color: var(--gris); font-size: 14px; line-height: 1.55; padding-bottom: 14px; border-bottom: 1px solid var(--filet); }
.cs-corps ul { list-style: none; padding: 0; margin: 4px 0 18px; display: grid; gap: 9px; font-size: 14px; }
.cs-corps li { display: flex; gap: 10px; align-items: baseline; }
.cs-corps li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--rouge); flex: none; transform: translateY(-2px); }
.cs-corps .lien-fleche { margin-top: auto; }
.encart { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 28px; border: 1.5px solid var(--filet); border-radius: 16px; background: var(--fond-gris2); }
.encart p { margin: 0; font-weight: 600; }
.encart div { display: flex; flex-wrap: wrap; gap: 12px; }

/* Notre histoire */
.histoire { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.histoire-photo { position: relative; margin: 0; }
.histoire-photo img { border-radius: 18px; aspect-ratio: 4 / 3.4; object-fit: cover; width: 100%; box-shadow: var(--ombre); }
.histoire-photo figcaption { position: absolute; right: -24px; bottom: -28px; background: var(--ardoise); color: #fff; padding: 20px 26px; border-radius: 14px; box-shadow: var(--ombre); }
.histoire-photo b { display: block; font: 700 32px/1.1 var(--titres); }
.histoire-photo span { font-size: 12px; opacity: .75; }
.trait { display: block; width: 56px; height: 3px; background: var(--rouge); margin: 18px 0 22px; }
.histoire p { color: var(--gris); }

/* Comment ça se passe : 4 cartes numérotées reliées */
.etapes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: e; }
.etape { position: relative; background: #fff; border: 1.5px solid #D8D6DE; border-radius: 16px; padding: 26px 22px; }
.etape + .etape::before { content: ""; position: absolute; left: -19px; top: 52px; width: 18px; height: 1.5px; background: #D8D6DE; }
.num { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--rouge); color: #fff; font: 700 20px var(--titres); margin-bottom: 18px; }
.etape:nth-child(even) .num { background: var(--ardoise); }
.etape h3 { font-size: 18px; margin-bottom: 8px; }
.etape p { color: var(--gris); font-size: 14px; margin: 0; }

/* Communes */
.grille-communes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.carte-commune { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--filet); border-radius: 12px; background: #fff; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.carte-commune:hover, .carte-commune.actuelle { border-color: var(--rouge); box-shadow: var(--ombre); }
.carte-commune > .ico:first-child { color: var(--gris); }
.carte-commune span { display: grid; flex: 1; min-width: 0; }
.carte-commune b { font: 700 15px var(--titres); }
.carte-commune small { font-size: 12px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte-commune > .ico:last-child { color: var(--rouge); }
.pastilles { display: flex; flex-wrap: wrap; gap: 10px; }
.pastilles a { padding: 8px 16px; border: 1px solid var(--filet); border-radius: 999px; text-decoration: none; font-size: 14px; }
.pastilles a:hover { border-color: var(--rouge); color: var(--rouge); }

/* Avis : carrousel de cartes */
.avis-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 36px; }
.score { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; }
.score b { font: 700 34px var(--titres); }
.score span { color: var(--gris); font-size: 14px; }
.avis-cta { display: grid; justify-items: end; gap: 8px; }
.avis-cta small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); font-weight: 600; }
.piste { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 10px; }
.piste::-webkit-scrollbar { display: none; }
.carte-avis { scroll-snap-align: start; position: relative; background: #fff; border-radius: 14px; padding: 24px; box-shadow: 0 10px 30px -20px rgba(0,0,0,.3); display: flex; flex-direction: column; }
.carte-avis::after { content: "\201D"; position: absolute; right: 18px; bottom: 54px; font: 700 64px/1 var(--titres); color: #EDEDF0; }
.ca-texte { font-style: italic; font-size: 15px; line-height: 1.6; margin: 12px 0 6px; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.carte-avis.ouvert .ca-texte { -webkit-line-clamp: unset; display: block; }
.ca-plus { align-self: flex-start; background: none; border: 0; color: var(--rouge); font: 600 13px var(--texte); cursor: pointer; padding: 0; margin-bottom: 8px; }
.carte-avis footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--filet); display: flex; gap: 12px; align-items: center; }
.ca-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; font-weight: 700; flex: none; }
.ca-avatar.rouge { background: var(--rouge); } .ca-avatar.ardoise { background: var(--ardoise); }
.carte-avis footer span:last-child { display: grid; font-size: 14px; line-height: 1.3; }
.carte-avis small { color: var(--gris); font-size: 12px; }
.carrousel-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; }
.carrousel-nav button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--filet); background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--encre); }
.carrousel-nav button:disabled { opacity: .35; cursor: default; }
.points { display: flex; gap: 6px; }
.points i { width: 7px; height: 7px; border-radius: 4px; background: #D5D5DB; transition: width .2s, background .2s; }
.points i.on { width: 22px; background: var(--rouge); }

/* FAQ */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
@media (min-width: 901px) { .faq-tete { position: sticky; top: 110px; } }
.faq-liste details { border-bottom: 1px solid var(--filet); padding: 18px 0; }
.faq-liste summary { list-style: none; display: flex; justify-content: space-between; gap: 18px; font-weight: 600; font-size: 16px; cursor: pointer; }
.faq-liste summary::-webkit-details-marker { display: none; }
.faq-liste summary span { color: var(--rouge); font-size: 22px; line-height: 1; transition: transform .2s; }
.faq-liste details[open] summary span { transform: rotate(45deg); }
.faq-liste details p { color: var(--gris); margin: 12px 0 0; }
.faq-appel { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; padding: 18px 20px; border-radius: 14px; background: var(--fond-gris); }
.faq-appel > .ico { width: 38px; height: 38px; padding: 9px; border-radius: 50%; background: #fff; color: var(--rouge); }
.faq-appel div { display: grid; flex: 1; font-size: 14px; color: var(--gris); }
.faq-appel b { color: var(--encre); font-size: 15px; }

/* Nous trouver */
.base { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.base-infos { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.base-infos > li { display: flex; gap: 14px; }
.base-infos > li > .ico { width: 40px; height: 40px; padding: 10px; border-radius: 10px; background: #fff; color: var(--rouge); box-shadow: var(--ombre); }
.base-infos small { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); font-weight: 600; }
.base-infos a { font-weight: 600; text-decoration: none; }
.base-horaires, .pied-horaires { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 4px; font-size: 14px; }
.base-horaires li, .pied-horaires li { display: flex; justify-content: space-between; gap: 18px; }
.base-carte { width: 100%; height: 380px; border: 0; border-radius: 18px; box-shadow: var(--ombre); }

/* Appel final */
.appel-final { background: var(--fond-gris2); position: relative; overflow: hidden; }
.appel-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 56px; align-items: center; }
.carte-form { background: #fff; border-radius: 18px; padding: 28px; box-shadow: 0 30px 60px -28px rgba(0,0,0,.35); }

/* Page d'un service */
.page-service { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.ps-photo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 18px; margin-bottom: 30px; box-shadow: var(--ombre); }
.ps-principal h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 18px; }
.ps-principal h3 { font-size: 20px; margin: 28px 0 14px; }
.ps-principal p { color: var(--gris); }
.inclus { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.inclus li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.inclus .ico { color: var(--rouge); margin-top: 3px; }
.ps-liens { display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px; margin-top: 16px; padding: 22px; border: 1px solid var(--filet); border-radius: 14px; }
.ps-liens h3 { margin-top: 0 !important; font-size: 16px !important; }
.ps-liens ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 14px; }
.ps-liens ul.colonnes { grid-template-columns: 1fr 1fr; }
.ps-liens a { text-decoration: none; color: var(--gris); } .ps-liens a:hover { color: var(--rouge); }
@media (min-width: 901px) { .ps-cote { position: sticky; top: 110px; } }
.texte-legal { max-width: 760px; } .texte-legal h1 { font-size: 40px; margin-bottom: 24px; } .texte-legal h2 { font-size: 22px; margin: 26px 0 10px; } .texte-legal p { color: var(--gris); }

/* Pied de page ardoise */
.pied { background: var(--ardoise); color: rgba(255,255,255,.75); font-size: 14px; }
.pied-grille { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 40px; padding-block: 64px 48px; }
.pied h4 { font: 600 11px var(--texte); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); margin: 0 0 14px; }
.pied h4 + ul + h4, .pied ul + h4 { margin-top: 22px; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pied a { color: rgba(255,255,255,.85); text-decoration: none; } .pied a:hover { color: #fff; }
.marque-pied { color: #fff; margin-bottom: 14px; }
.pied-contact li { display: flex; gap: 8px; align-items: flex-start; } .pied-contact .ico { margin-top: 3px; }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; }
.pied-bas span:last-child { display: flex; flex-wrap: wrap; gap: 18px; }

/* Message flottant, comme chez Frank */
.msg { position: fixed; right: 22px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: grid; justify-items: end; gap: 14px; pointer-events: none; }
.msg > * { pointer-events: auto; }
.msg-bouton { width: 60px; height: 60px; border-radius: 50%; border: 0; background: var(--rouge); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 0 6px rgba(192,24,24,.15), 0 14px 30px -10px rgba(0,0,0,.5); }
.msg-bouton .ico { width: 26px; height: 26px; }
.msg-panneau { width: min(380px, calc(100vw - 24px)); max-height: calc(100vh - 120px); overflow-y: auto; background: #fff; border-radius: 18px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.45); }
.msg-panneau[hidden] { display: none; }
.msg-tete { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--rouge); color: #fff; }
.msg-avatar { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.2); border: 2px solid rgba(255,255,255,.6); display: grid; place-items: center; font-weight: 700; flex: none; }
.msg-tete b { display: block; font-size: 15px; }
.msg-statut { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: .92; }
.msg-statut::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; }
.msg-fermer { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); color: #fff; display: grid; place-items: center; cursor: pointer; }
.msg-bulle { margin: 16px 16px 0; padding: 12px 14px; background: var(--rouge-pale); color: var(--rouge-fonce); border-radius: 4px 14px 14px 14px; font-size: 14px; }
.msg .kform { padding: 16px; }
.barre-mobile { display: none; }

/* Tablette et téléphone */
@media (max-width: 1080px) {
  .menu { display: none; }
  .menu-bouton { display: inline-flex; }
  .entete-cta .btn-plein { display: none; }
  .menu.ouvert { display: grid; position: absolute; top: 100%; left: 16px; right: 16px; background: #fff; border-radius: 14px; box-shadow: var(--ombre); padding: 12px; gap: 0; }
  .menu.ouvert > a, .menu.ouvert .deroule > button { color: var(--encre); width: 100%; padding: 12px; }
  .menu.ouvert .sous { position: static; display: block; box-shadow: none; padding: 0 0 6px 12px; }
  .grille-services { grid-template-columns: minmax(0, 1fr); }
  .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etape + .etape::before { display: none; }
  .grille-communes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .piste { grid-auto-columns: calc((100% - 24px) / 2); }
  .pied-grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .haut { padding: 120px 0 56px; }
  .haut-grille, .histoire, .faq, .base, .appel-grille, .page-service { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .reassurance ul { grid-template-columns: 1fr 1fr; }
  .reassurance li + li { border-left: 0; padding-left: 0; }
  .histoire-photo figcaption { right: 12px; bottom: -22px; }
  .bloc { padding: 72px 0; }
}
@media (max-width: 640px) {
  .cadre { padding-inline: 16px; }
  .entete-in { gap: 12px; min-height: 72px; }
  .entete { margin-bottom: -72px; }
  .btn-tel span { display: none; }
  .btn-tel { padding: 10px 12px; }
  .marque b { font-size: 18px; }
  .haut { padding: 104px 0 44px; }
  .haut-form, .carte-form { padding: 20px; }
  .carte-service { grid-template-columns: minmax(0, 1fr); }
  .cs-photo img { min-height: 0; aspect-ratio: 16 / 10; }
  .etapes, .grille-communes, .reassurance ul, .inclus, .ps-liens { grid-template-columns: minmax(0, 1fr); }
  .piste { grid-auto-columns: 86%; }
  .pied-grille { grid-template-columns: minmax(0, 1fr); padding-block: 48px 32px; }
  .avis-cta { justify-items: start; }
  .msg-bouton { display: none; }
  .msg { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .msg-panneau { width: 100%; max-height: calc(100vh - 40px); }
  .barre-mobile { display: flex; gap: 10px; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 55; }
  .barre-mobile .btn { flex: 1; padding: 14px; box-shadow: 0 10px 30px -10px rgba(0,0,0,.4); }
  body { padding-bottom: 84px; }
  body.msg-ouvert .barre-mobile { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }