/* Site vitrine REMOVAL TRANS DEEP — couleurs du logo : bleu roi #2563EB, bleu ciel #0EA5E9, noir #0F172A. */
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/barlow-condensed-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --marque: #2563EB; --marque-fonce: #1E40AF; --marque-2: #0EA5E9; --noir: #0F172A; --gris-fonce: #1E293B;
  --texte: #0F172A; --texte-2: #475569; --fond: #FFFFFF; --fond-2: #F5F7FB; --trait: #E2E8F0;
  --vert: #0E9F5A; --rouge: #D92D20;
  --rayon: 14px; --rayon-l: 22px;
  --ombre: 0 18px 40px -18px rgba(37, 99, 235, .25), 0 2px 6px rgba(30, 26, 23, .05);
  --police: "Barlow", "Segoe UI", system-ui, sans-serif;
  --titre: "Barlow Condensed", "Barlow", "Arial Narrow", sans-serif;
  --entete-h: 76px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--entete-h) + 8px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; font-family: var(--police); font-size: 17px; line-height: 1.6; color: var(--texte); background: var(--fond); -webkit-font-smoothing: antialiased; }
body.menu-ouvert { overflow: hidden; }
img { max-width: 100%; }
a { color: var(--marque); }
h1, h2, h3 { line-height: 1.08; margin: 0 0 .5em; letter-spacing: -.01em; }
h2 { font-family: var(--titre); font-weight: 800; font-size: clamp(32px, 4.4vw, 50px); text-transform: uppercase; letter-spacing: 0; }
h3 { font-size: 21px; font-weight: 700; }
p { margin: 0 0 1em; }
.conteneur { width: min(1200px, 100% - 40px); margin-inline: auto; }
.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.i-s { width: 16px; height: 16px; }
.evitement { position: absolute; left: -999px; top: 8px; background: var(--marque); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.evitement:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--marque-2); outline-offset: 2px; }

/* Boutons */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px; border: 2px solid transparent;
  font: 600 16px/1 var(--police); text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; white-space: nowrap; }
.bouton:hover { transform: translateY(-1px); }
.bouton:disabled { opacity: .6; cursor: progress; }
.bouton-principal { background: var(--marque); color: #fff; box-shadow: 0 10px 24px -10px var(--marque); }
.bouton-principal:hover { background: var(--marque-fonce); }
.bouton-clair { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .45); backdrop-filter: blur(6px); }
.bouton-clair:hover { background: rgba(255, 255, 255, .22); }
.bouton-blanc { background: #fff; color: var(--marque); }
.bouton-grand { min-height: 56px; padding: 0 28px; font-size: 17px; }

/* En-tête */
.entete { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .2s, box-shadow .2s, height .2s; }
.entete-ligne { height: var(--entete-h); display: flex; align-items: center; gap: 20px; }
.entete.compact, body.menu-ouvert .entete { background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--trait), 0 10px 30px -20px rgba(0, 0, 0, .3); }
.logo { display: inline-flex; align-items: center; background: #fff; border-radius: 12px; padding: 6px 12px; height: 54px; box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .4); }
.logo img { height: 100%; width: auto; display: block; }
.menu { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.menu > a, .menu-deroulant > button { color: #fff; text-decoration: none; font: 600 15px var(--police); padding: 10px 12px; border-radius: 10px; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.entete.compact .menu > a, .entete.compact .menu-deroulant > button { color: var(--texte); }
.menu > a:hover, .menu-deroulant > button:hover { background: rgba(255, 255, 255, .14); }
.entete.compact .menu > a:hover, .entete.compact .menu-deroulant > button:hover { background: var(--fond-2); color: var(--marque); }
.menu-suivi { border: 1.5px solid currentColor !important; margin-left: 6px; }
.menu-deroulant { position: relative; }
.sous-menu { position: absolute; top: calc(100% + 8px); left: -10px; min-width: 290px; background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre), 0 0 0 1px var(--trait);
  padding: 8px; display: none; }
.menu-deroulant.ouvert .sous-menu { display: block; }
@media (hover: hover) { .menu-deroulant:hover .sous-menu { display: block; } .menu-deroulant::after { content: ""; position: absolute; inset: 100% 0 -10px; } }
.sous-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--texte); text-decoration: none; font-weight: 600; font-size: 15px; }
.sous-menu a .i { color: var(--marque); }
.sous-menu a:hover { background: var(--fond-2); color: var(--marque); }
.entete-actions { display: flex; align-items: center; gap: 10px; }
.burger { display: none; width: 46px; height: 46px; border-radius: 12px; border: 0; background: rgba(255, 255, 255, .15); cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.burger span { width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform .2s, opacity .2s; }
.entete.compact .burger, body.menu-ouvert .burger { background: var(--fond-2); }
.entete.compact .burger span, body.menu-ouvert .burger span { background: var(--texte); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Héros */
.heros { position: relative; color: #fff; padding: calc(var(--entete-h) + 60px) 0 90px; overflow: hidden; isolation: isolate; }
.heros-fond { position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(900px 500px at 85% 20%, rgba(0, 148, 221, .55), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(37, 99, 235, .7), transparent 60%),
    linear-gradient(135deg, #0B1E4F 0%, var(--marque-fonce) 45%, var(--marque) 100%); }
.heros-fond::after { content: ""; position: absolute; inset: auto 0 0; height: 120px; background: linear-gradient(transparent, rgba(0, 0, 0, .15));
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 60px, transparent 60px 100px); mask: repeating-linear-gradient(90deg, #000 0 60px, transparent 60px 100px); opacity: .25; }
.heros-grille { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.pastille { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); font-weight: 600; font-size: 14px; }
.heros h1 { font-family: var(--titre); font-weight: 800; text-transform: uppercase; font-size: clamp(44px, 6.6vw, 84px); line-height: .95; margin: 22px 0 18px; }
.heros h1 em { font-style: normal; color: #9EE3FF; display: block; }
.accroche { font-size: clamp(18px, 2vw, 21px); max-width: 560px; color: rgba(255, 255, 255, .88); }
.heros-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 36px; }
.chiffres { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, auto); gap: 10px 32px; justify-content: start; }
.chiffres b { display: block; font-family: var(--titre); font-weight: 800; font-size: 40px; line-height: 1; }
.chiffres span { font-size: 14px; color: rgba(255, 255, 255, .75); }
.heros-visuel { position: relative; }
.camion-illu { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .35)); animation: rouler 5s ease-in-out infinite alternate; }
@keyframes rouler { from { transform: translateX(-8px); } to { transform: translateX(8px); } }
.carte-flottante { position: absolute; display: flex; align-items: center; gap: 10px; background: #fff; color: var(--texte); padding: 12px 16px; border-radius: 16px; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .45); z-index: 1; }
.carte-flottante .i { color: #fff; background: var(--marque); border-radius: 10px; padding: 6px; width: 34px; height: 34px; }
.carte-flottante.carte-2 .i { background: var(--vert); }
.carte-flottante b { display: block; font-size: 15px; } .carte-flottante small { color: var(--texte-2); font-size: 13px; }
.carte-1 { top: -6px; left: 0; } .carte-2 { bottom: -12px; right: 0; }

/* Sections */
.section { padding: 96px 0; }
.section-douce { background: var(--fond-2); }
.section-sombre { background: var(--noir); color: #fff; }
.section-degrade { background: linear-gradient(135deg, var(--marque-fonce), var(--marque) 55%, var(--marque-2)); color: #fff; }
.surtitre { display: inline-block; font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--marque); margin-bottom: 10px; }
.section-sombre .surtitre, .surtitre-clair { color: #9EE3FF; }
.titre-section { max-width: 720px; margin-bottom: 44px; }
.titre-section p { color: var(--texte-2); font-size: 18px; }
.apparition { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.apparition.visible { opacity: 1; transform: none; }

.grille-services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.service { position: relative; background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon-l); padding: 28px 24px; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s, border-color .2s; }
.service:hover { transform: translateY(-4px); box-shadow: var(--ombre); border-color: transparent; }
.service-icone { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, var(--marque), var(--marque-2)); color: #fff; margin-bottom: 18px; }
.service-icone .i { width: 28px; height: 28px; }
.service p { color: var(--texte-2); font-size: 16px; }
.service ul { list-style: none; padding: 0; margin: 0 0 20px; font-size: 15px; }
.service li { padding: 5px 0 5px 22px; position: relative; }
.service li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 9px; height: 9px; border-radius: 50%; background: var(--marque-2); }
.lien-fleche { margin-top: auto; font-weight: 700; text-decoration: none; }
.service-vedette { background: var(--noir); color: #fff; border-color: var(--noir); }
.service-vedette p { color: rgba(255, 255, 255, .78); }
.service-vedette .lien-fleche { color: #9EE3FF; }

.flotte-grille { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.flotte-grille p { color: rgba(255, 255, 255, .78); }
.flotte-cartes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.flotte-carte { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--rayon-l); padding: 28px 22px; display: flex; flex-direction: column; gap: 4px; }
.flotte-carte .i { width: 34px; height: 34px; color: #9EE3FF; margin-bottom: 8px; }
.flotte-carte.electrique { background: linear-gradient(160deg, rgba(14, 159, 90, .3), rgba(14, 159, 90, .05)); border-color: rgba(74, 222, 128, .35); }
.flotte-carte.electrique .i { color: #4ADE80; }
.flotte-carte b { font-family: var(--titre); font-size: 56px; line-height: 1; }
.flotte-carte small { color: rgba(255, 255, 255, .6); }

.apropos-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.apropos-grille p { font-size: 18px; color: var(--texte-2); }
.valeurs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.valeurs li { background: var(--fond-2); border-radius: var(--rayon-l); padding: 22px; display: flex; flex-direction: column; gap: 4px; }
.valeurs .i { color: var(--marque); width: 28px; height: 28px; margin-bottom: 6px; }
.valeurs span { color: var(--texte-2); font-size: 15px; }

/* Galerie */
.filtres-galerie { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.filtres-galerie button { border: 1.5px solid var(--trait); background: #fff; color: var(--texte); font: 600 15px var(--police); padding: 9px 18px; border-radius: 999px; cursor: pointer; }
.filtres-galerie button.actif { background: var(--marque); border-color: var(--marque); color: #fff; }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.photo { position: relative; border: 0; padding: 0; border-radius: var(--rayon-l); overflow: hidden; cursor: zoom-in; background: var(--trait); aspect-ratio: 4 / 3; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.photo:hover img { transform: scale(1.05); }
.photo-legende { position: absolute; inset: auto 0 0; padding: 30px 16px 14px; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); color: #fff; text-align: left; display: flex; flex-direction: column; }
.photo-legende small { color: #9EE3FF; font-weight: 600; }
.vide-galerie { grid-column: 1 / -1; color: var(--texte-2); text-align: center; padding: 50px 20px; border: 2px dashed var(--trait); border-radius: var(--rayon-l); background: #fff; }
.visionneuse { position: fixed; inset: 0; z-index: 90; background: rgba(10, 12, 30, .92); display: grid; place-items: center; padding: 24px; }
.visionneuse[hidden] { display: none; }
.visionneuse figure { margin: 0; max-width: 1100px; text-align: center; color: #fff; }
.visionneuse img { max-height: 80vh; border-radius: var(--rayon); }
.visionneuse .fermer { position: absolute; top: 16px; right: 20px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .15); color: #fff; font-size: 30px; cursor: pointer; }

/* Formulaires */
.devis-grille { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.devis-intro p { color: var(--texte-2); font-size: 18px; }
.etapes-devis { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.etapes-devis li { display: flex; align-items: center; gap: 14px; font-weight: 600; }
.etapes-devis b { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--fond-2); color: var(--marque); font-family: var(--titre); font-size: 20px; flex: none; }
.liste-coches { list-style: none; padding: 0; } .liste-coches li { padding: 6px 0 6px 30px; position: relative; font-weight: 600; }
.liste-coches li::before { content: "✓"; position: absolute; left: 0; top: 5px; width: 22px; height: 22px; border-radius: 50%; background: var(--marque); color: #fff; display: grid; place-items: center; font-size: 13px; }
.carte-form { background: #fff; border-radius: var(--rayon-l); padding: 30px; box-shadow: var(--ombre); border: 1px solid var(--trait); }
.formulaire { display: grid; gap: 16px; }
.formulaire label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14.5px; }
.formulaire input:not([type=radio]):not([type=checkbox]), .formulaire textarea { font: 400 16px var(--police); color: var(--texte); padding: 13px 14px; border: 1.5px solid var(--trait); border-radius: 12px; background: #fff; width: 100%; transition: border-color .15s, box-shadow .15s; }
.formulaire input:focus, .formulaire textarea:focus { outline: none; border-color: var(--marque); box-shadow: 0 0 0 4px rgba(37, 99, 235, .14); }
.formulaire textarea { resize: vertical; }
.ligne-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.formulaire .case { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 500; color: var(--texte-2); }
.formulaire .case input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--marque); flex: none; }
.pot { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.choix-services { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.choix-services legend { font-weight: 600; font-size: 14.5px; margin-bottom: 8px; padding: 0; }
.choix-services label { position: relative; }
.choix-services input { position: absolute; opacity: 0; }
.choix-services span { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 14px 6px; border: 1.5px solid var(--trait); border-radius: 14px; cursor: pointer; font-size: 14px; transition: all .15s; }
.choix-services .i { width: 26px; height: 26px; color: var(--marque); }
.choix-services input:checked + span { border-color: var(--marque); background: #EEF3FF; color: var(--marque-fonce); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.choix-services input:focus-visible + span { outline: 3px solid var(--marque-2); }
.invalide input, .invalide textarea, .invalide span { border-color: var(--rouge) !important; }
.retour { margin: 0; font-weight: 600; min-height: 1em; }
.retour.erreur { color: var(--rouge); }
.retour.succes { color: var(--vert); background: #E7F7EE; padding: 14px 16px; border-radius: 12px; font-weight: 500; }
.retour-clair { color: #FFE39A; }
.reference { font-family: ui-monospace, Consolas, monospace; font-weight: 700; background: #EEF3FF; color: var(--marque-fonce); padding: 2px 8px; border-radius: 6px; }

/* Suivi */
.suivi-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.suivi-grille > div > p { color: rgba(255, 255, 255, .85); font-size: 18px; }
.suivi-form { grid-template-columns: 1fr 1fr auto; align-items: end; }
.suivi-form label { color: #fff; }
.suivi-form input { border-color: transparent !important; }
.suivi-carte { background: #fff; color: var(--texte); border-radius: var(--rayon-l); padding: 26px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5); }
.suivi-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.etat { padding: 5px 12px; border-radius: 999px; font-weight: 700; font-size: 14px; background: #EEF3FF; color: var(--marque-fonce); }
.etat-acceptee { background: #E7F7EE; color: var(--vert); } .etat-refusee { background: #FEF0F0; color: var(--rouge); } .etat-cloturee { background: var(--fond-2); color: var(--texte-2); }
.suivi-meta { color: var(--texte-2); font-size: 15px; margin: 0 0 4px; }
.suivi-trajet { font-weight: 700; }
.frise { list-style: none; padding: 0; margin: 20px 0; display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: e; }
.frise li { position: relative; text-align: center; font-size: 13px; color: var(--texte-2); padding-top: 34px; }
.frise li::before { content: ""; position: absolute; top: 12px; left: -50%; right: 50%; height: 3px; background: var(--trait); }
.frise li:first-child::before { display: none; }
.frise li i { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--trait); z-index: 1; }
.frise li.fait { color: var(--texte); font-weight: 600; }
.frise li.fait i { background: var(--marque); border-color: var(--marque); }
.frise li.fait::before { background: var(--marque); }
.frise li.actuelle i { box-shadow: 0 0 0 6px rgba(37, 99, 235, .18); }
.suivi-devis { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 16px; border-radius: 14px; background: var(--fond-2); margin-top: 10px; }
.suivi-devis .montant { font-size: 20px; color: var(--marque); }
.suivi-devis small { grid-column: 1 / -1; color: var(--texte-2); }
.suivi-reponse { margin: 14px 0 0; padding: 12px 16px; border-left: 4px solid var(--marque-2); background: #EAF7FD; border-radius: 0 12px 12px 0; white-space: pre-line; }
.suivi-reponse b { display: block; font-size: 14px; color: var(--marque-2); }

.coordonnees { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; font-size: 18px; }
.coordonnees li { display: flex; align-items: center; gap: 14px; }
.coordonnees .i { width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: #fff; color: var(--marque); box-shadow: var(--ombre); }
.coordonnees a { color: var(--texte); text-decoration: none; font-weight: 600; }

/* Pied de page */
.pied { background: var(--noir); color: rgba(255, 255, 255, .75); padding: 60px 0 24px; }
.pied-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.pied .tuile { display: inline-flex; background: #fff; border-radius: 12px; padding: 8px 14px; height: 64px; margin-bottom: 14px; }
.pied .tuile img { height: 100%; width: auto; }
.pied nav { display: flex; flex-direction: column; gap: 8px; }
.pied nav b { color: #fff; margin-bottom: 4px; }
.pied a { color: rgba(255, 255, 255, .75); text-decoration: none; }
.pied a:hover { color: #fff; }
.pied-bas { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 40px; padding-top: 20px; font-size: 14px; }

/* Responsive */
@media (max-width: 1100px) {
  .grille-services { grid-template-columns: 1fr 1fr; }
  .menu > a, .menu-deroulant > button { padding: 10px 8px; font-size: 14.5px; }
}
@media (max-width: 960px) {
  :root { --entete-h: 68px; }
  .burger { display: flex; }
  .menu { position: fixed; inset: var(--entete-h) 0 0; background: #fff; flex-direction: column; align-items: stretch; gap: 2px; padding: 16px 20px 40px; overflow-y: auto;
    transform: translateX(100%); transition: transform .25s ease; margin: 0; }
  .menu.ouvert { transform: none; }
  .menu > a, .menu-deroulant > button { color: var(--texte) !important; font-size: 18px; padding: 14px 12px; width: 100%; justify-content: space-between; }
  .sous-menu { position: static; box-shadow: none; display: block; padding: 0 0 0 10px; min-width: 0; }
  .menu-suivi { margin: 10px 0 0; justify-content: center !important; color: var(--marque) !important; }
  .heros-grille, .flotte-grille, .apropos-grille, .devis-grille, .suivi-grille { grid-template-columns: 1fr; }
  .heros-visuel { max-width: 520px; }
  .chiffres { grid-template-columns: repeat(2, auto); }
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .section { padding: 72px 0; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .conteneur { width: calc(100% - 32px); }
  .entete-actions .bouton-principal { display: none; }
  .logo { height: 46px; }
  .grille-services, .valeurs, .flotte-cartes, .ligne-2, .pied-grille { grid-template-columns: 1fr; }
  .choix-services { grid-template-columns: 1fr 1fr; }
  .suivi-form { grid-template-columns: 1fr; }
  .carte-form { padding: 22px 18px; }
  .heros { padding-bottom: 70px; }
  .carte-flottante { display: none; }
  .frise li { font-size: 11.5px; }
}


/* ===== Solutions : professionnels / particuliers ===== */
.section-nuit { background: #14161B; color: #fff; }
.solutions-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 36px; }
.solutions-tete h2 { margin: 0; }
.bascule-profil { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); }
.bascule-profil button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: rgba(255, 255, 255, .75); font: 600 15px var(--police);
  padding: 10px 18px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s; }
.bascule-profil button[aria-selected="true"], .bascule-profil button[aria-pressed="true"] { background: var(--marque); color: #fff; box-shadow: 0 8px 20px -8px var(--marque); }
.grille-solutions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.grille-solutions[hidden] { display: none; }
.solution { background: #0E1014; border: 1px solid rgba(255, 255, 255, .08); border-radius: 6px; padding: 26px 22px; display: flex; flex-direction: column;
  transition: border-color .25s, transform .25s; }
.solution:hover { border-color: var(--marque-2); transform: translateY(-3px); }
.solution-large { grid-column: span 4; display: grid; grid-template-columns: auto 1fr 1.4fr auto; align-items: center; gap: 8px 26px; }
.solution-large .sous-titre { border: 0; padding: 0; margin: 0; }
.solution-large ul { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; }
.solution-icone { width: 44px; height: 44px; color: var(--marque-2); stroke-width: 1.4; margin-bottom: 16px; }
.solution-large .solution-icone { margin: 0; }
.solution h3 { font-size: 17px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 8px; }
.sous-titre { text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px; color: rgba(255, 255, 255, .6); line-height: 1.7; padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .14); margin: 0 0 16px; }
.solution ul { list-style: none; padding: 0; margin: 0 0 20px; font-size: 14.5px; color: rgba(255, 255, 255, .78); }
.solution li { padding: 3px 0; }
.solution .lien-fleche { color: #8FD8FF; font-size: 14.5px; }
.choix-profil-heros { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; max-width: 560px; }
.profil-carte { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; color: #fff; text-decoration: none;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(6px); transition: background .2s, transform .2s; }
.profil-carte:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }
.profil-carte .i { width: 30px; height: 30px; }
.profil-carte b { display: block; font-size: 15.5px; } .profil-carte small { color: rgba(255, 255, 255, .75); font-size: 13px; }
.heros-actions { margin-top: 20px; }
.sous-menu a span { display: flex; flex-direction: column; } .sous-menu a small { color: var(--texte-2); font-weight: 500; font-size: 13px; }
.choix-profil { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choix-profil legend { font-weight: 600; font-size: 14.5px; margin-bottom: 8px; padding: 0; }
.choix-profil label { position: relative; }
.choix-profil input { position: absolute; opacity: 0; }
.choix-profil span { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1.5px solid var(--trait); border-radius: 12px; cursor: pointer; font-weight: 600; }
.choix-profil input:checked + span { border-color: var(--marque); background: #EEF3FF; color: var(--marque-fonce); }
.choix-services { grid-template-columns: repeat(3, 1fr); }
[hidden] { display: none !important; }

/* ===== Chiffres clés ===== */
.section-chiffres { background: #F2F4FA; }
.titre-chiffres { text-align: center; font-size: clamp(40px, 6vw, 72px); margin-bottom: 56px; }
.titre-chiffres .tiret { display: inline-block; width: 42px; height: 9px; background: var(--marque); margin-left: 12px; vertical-align: baseline; }
.grille-chiffres { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 40px; }
.grille-chiffres li { display: flex; flex-direction: column; align-items: flex-start; }
.grille-chiffres .prefixe { font-weight: 700; font-size: 14px; min-height: 20px; }
.grille-chiffres .nombre { font-family: var(--titre); font-weight: 800; font-size: clamp(64px, 8.5vw, 112px); line-height: .82; color: var(--noir);
  letter-spacing: -.01em; position: relative; z-index: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.grille-chiffres .legende { display: flex; flex-direction: column; background: #CDEFFF; padding: 22px 16px 10px; margin-top: -14px; min-width: 62%;
  font-size: 14.5px; transform-origin: left; transform: scaleX(0); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.grille-chiffres .legende > * { opacity: 0; transition: opacity .4s .45s; }
.section-chiffres.visible .legende { transform: none; }
.section-chiffres.visible .legende > * { opacity: 1; }
.grille-chiffres li:nth-child(2) .legende { transition-delay: .12s; } .grille-chiffres li:nth-child(3) .legende { transition-delay: .24s; }
.grille-chiffres li:nth-child(4) .legende { transition-delay: .36s; } .grille-chiffres li:nth-child(5) .legende { transition-delay: .48s; }
.grille-chiffres li:nth-child(6) .legende { transition-delay: .6s; }
@media (max-width: 900px) { .grille-chiffres { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .grille-chiffres { grid-template-columns: 1fr; gap: 40px; } }

/* ===== Actualités ===== */
.grille-actus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.actu { position: relative; display: block; min-height: 380px; border: 0; padding: 0; border-radius: 22px; overflow: hidden; cursor: pointer; text-align: left;
  color: #fff; background: #0B1240; font: inherit; isolation: isolate; }
.actu img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s; }
.actu:hover img { transform: scale(1.06); }
.actu-voile { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 8, 30, .05) 20%, rgba(5, 8, 30, .88) 100%); }
.actu-sans-image.teinte-0 { background: radial-gradient(circle at 80% 10%, rgba(0, 148, 221, .5), transparent 55%), linear-gradient(140deg, #1E40AF, #0A0F3A); }
.actu-sans-image.teinte-1 { background: radial-gradient(circle at 20% 0%, rgba(37, 99, 235, .55), transparent 55%), linear-gradient(140deg, #0A3A5C, #07122A); }
.actu-sans-image.teinte-2 { background: radial-gradient(circle at 90% 90%, rgba(14, 159, 90, .45), transparent 55%), linear-gradient(140deg, #0F2E2A, #0A0F1E); }
.actu-sans-image.teinte-3 { background: radial-gradient(circle at 10% 90%, rgba(0, 148, 221, .45), transparent 55%), linear-gradient(140deg, #0F172A, #0B1240); }
.actu-sans-image::before { content: ""; position: absolute; inset: -20%; z-index: -1; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .12);
  box-shadow: 0 0 0 60px rgba(255, 255, 255, .02), 0 0 0 120px rgba(255, 255, 255, .02); }
.actu-texte { position: absolute; inset: auto 0 0; padding: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.actu-badge { display: inline-block; background: var(--marque); color: #fff; font-weight: 800; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase;
  padding: 7px 16px; border-radius: 999px; }
.actu-titre { font-family: var(--titre); font-weight: 800; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.04; text-transform: uppercase;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.actu-meta { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.actu-meta .i:nth-of-type(2) { margin-left: 14px; }
.vide-actus { grid-column: 1 / -1; text-align: center; color: rgba(255, 255, 255, .6); padding: 40px; border: 1px dashed rgba(255, 255, 255, .2); border-radius: 22px; }
.lecteur { position: fixed; inset: 0; z-index: 95; background: rgba(5, 8, 30, .78); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 20px; overflow-y: auto; }
.lecteur-carte { position: relative; width: min(820px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; background: #fff; border-radius: 22px; box-shadow: 0 40px 80px -30px #000; }
.lecteur-carte .fermer { position: sticky; float: right; top: 12px; margin: 12px 12px 0 0; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 28px; cursor: pointer; }
.lecteur-image { display: block; width: 100%; max-height: 420px; object-fit: cover; }
.lecteur-texte { padding: 30px 36px 36px; }
.lecteur-texte h2 { font-size: clamp(30px, 4vw, 44px); margin: 14px 0 6px; }
.lecteur-meta { color: var(--texte-2); font-size: 14px; }
.lecteur-resume { font-size: 19px; font-weight: 600; }
body.bloque { overflow: hidden; }
@media (max-width: 960px) { .grille-actus { grid-template-columns: 1fr 1fr; } .grille-solutions { grid-template-columns: 1fr 1fr; }
  .solution-large { grid-column: span 2; grid-template-columns: 1fr; } }
@media (max-width: 600px) { .grille-actus, .grille-solutions, .choix-profil-heros { grid-template-columns: 1fr; } .solution-large { grid-column: auto; }
  .choix-services { grid-template-columns: 1fr 1fr; } .actu { min-height: 320px; } .lecteur-texte { padding: 22px; } }

/* ===== Assistant (chatbot) ===== */
.chat-bouton { position: fixed; right: 22px; bottom: 22px; z-index: 80; width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer; color: #fff;
  background: var(--marque); box-shadow: 0 16px 34px -10px var(--marque); display: grid; place-items: center; transition: transform .2s; }
.chat-bouton:hover { transform: scale(1.06); }
.chat-bouton .i { width: 30px; height: 30px; }
.chat-bouton.ouvert { background: var(--noir); }
.chat-pastille { position: absolute; top: 2px; right: 2px; min-width: 20px; height: 20px; border-radius: 10px; background: #E5484D; font-size: 12px; font-weight: 800;
  display: grid; place-items: center; border: 2px solid #fff; animation: pulse 2s infinite; }
@keyframes pulse { 50% { transform: scale(1.15); } }
.chat { position: fixed; right: 22px; bottom: 100px; z-index: 80; width: min(390px, calc(100vw - 24px)); height: min(600px, calc(100vh - 130px));
  background: #fff; border-radius: 22px; box-shadow: 0 30px 70px -20px rgba(5, 8, 30, .5), 0 0 0 1px var(--trait); display: flex; flex-direction: column; overflow: hidden;
  animation: monte .25s ease-out; }
@keyframes monte { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.chat-tete { display: flex; align-items: center; gap: 12px; padding: 16px 18px; color: #fff; background: linear-gradient(135deg, var(--marque-fonce), var(--marque) 60%, var(--marque-2)); }
.chat-tete b { display: block; } .chat-tete small { opacity: .85; font-size: 13px; }
.chat-avatar { width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .18); display: grid; place-items: center; flex: none; }
.chat-fermer { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .16); color: #fff; font-size: 24px; cursor: pointer; }
.chat-fil { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: #F6F8FB; }
.chat-bulle { max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; }
.chat-bulle.bot { background: #fff; border: 1px solid var(--trait); border-bottom-left-radius: 4px; align-self: flex-start; }
.chat-bulle.bot ul { margin: 6px 0; padding-left: 18px; }
.chat-bulle.moi { background: var(--marque); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.chat-bulle.arrive { animation: monte .25s ease-out; }
.chat-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-choix button { border: 1.5px solid var(--marque); background: #fff; color: var(--marque); font: 600 14px var(--police); padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.chat-choix button:hover { background: var(--marque); color: #fff; }
.chat-saisie { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--trait); background: #fff; }
.chat-saisie input { flex: 1; border: 1.5px solid var(--trait); border-radius: 999px; padding: 11px 16px; font: 15px var(--police); }
.chat-saisie input:focus { outline: none; border-color: var(--marque); }
.chat-saisie button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--marque); color: #fff; display: grid; place-items: center; cursor: pointer; }
@media (max-width: 600px) { .chat { right: 12px; bottom: 90px; } .chat-bouton { right: 14px; bottom: 14px; } }

/* ===== Précisions par prestation (formulaire de devis) ===== */
.details-service:empty { display: none; }
.details-service { border: 1.5px solid #D7DEFF; background: #F7F9FF; border-radius: 16px; padding: 18px; animation: monte .3s ease-out; }
.details-titre { font-weight: 800; font-size: 16px; color: var(--marque-fonce); margin-bottom: 14px; }
.details-titre small { font-weight: 500; color: var(--texte-2); font-size: 13.5px; }
.details-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.details-grille .det-large { grid-column: 1 / -1; }
.details-grille select { font: 400 16px var(--police); padding: 12px; border: 1.5px solid var(--trait); border-radius: 12px; background: #fff; }
.det-boutons, .det-cases { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.det-boutons legend, .det-cases legend { font-weight: 600; font-size: 14.5px; margin-bottom: 8px; padding: 0; width: 100%; }
.det-boutons label, .det-cases label { position: relative; flex-direction: row !important; }
.det-boutons input, .det-cases input { position: absolute; opacity: 0; }
.det-boutons span, .det-cases span { display: inline-block; padding: 8px 14px; border: 1.5px solid var(--trait); border-radius: 999px; background: #fff;
  font-weight: 500; font-size: 14px; cursor: pointer; transition: all .15s; }
.det-cases span::before { content: "+ "; color: var(--marque); font-weight: 700; }
.det-boutons input:checked + span, .det-cases input:checked + span { border-color: var(--marque); background: var(--marque); color: #fff; }
.det-cases input:checked + span::before { content: "✓ "; color: #fff; }
.det-boutons input:focus-visible + span, .det-cases input:focus-visible + span { outline: 3px solid var(--marque-2); }
@media (max-width: 600px) { .details-grille { grid-template-columns: 1fr; } }

/* ===== Réseaux sociaux (pied de page) ===== */
.reseaux { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.reseau { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .14); transition: transform .2s, background .2s; }
.reseau .i { width: 21px; height: 21px; }
.reseau:hover { transform: translateY(-3px); }
.reseau-facebook:hover { background: #1877F2; } .reseau-linkedin:hover { background: #0A66C2; } .reseau-youtube:hover { background: #FF0000; }
.reseau-tiktok:hover { background: #000; box-shadow: -2px -2px 0 #25F4EE, 2px 2px 0 #FE2C55; } .reseau-whatsapp:hover { background: #25D366; }
.reseau-teams:hover { background: #5B5FC7; }

/* ===== Contact fusionné : message / partenaire ===== */
.onglets-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; background: var(--fond-2); border-radius: 14px; margin-bottom: 20px; }
.onglets-contact button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; background: none; padding: 11px; border-radius: 10px;
  font: 600 15px var(--police); color: var(--texte-2); cursor: pointer; }
.onglets-contact button[aria-selected="true"] { background: #fff; color: var(--marque); box-shadow: 0 4px 12px -6px rgba(37, 99, 235, .35); }
.encart-partenaire { margin-top: 26px; padding: 16px 18px; border-radius: 14px; background: #fff; border-left: 4px solid var(--marque-2); display: flex; flex-direction: column; gap: 4px; }
.encart-partenaire span { color: var(--texte-2); font-size: 15px; }

/* Devis placé juste après les solutions : transition visuelle et accès direct */
#solutions + #devis { position: relative; }
#solutions + #devis::before { content: ""; position: absolute; left: 50%; top: -14px; width: 28px; height: 28px; background: #14161B; transform: translateX(-50%) rotate(45deg); }
.solutions-tete .bouton { margin-left: auto; }
.menu > a.menu-devis { color: #9EE3FF; }
.entete.compact .menu > a.menu-devis { color: var(--marque); }
@media (min-width: 961px) { .entete-actions .bouton-principal { display: none; } }
/* 5 solutions : une rangée de 5 sur grand écran, carte « large » ramenée au format standard */
@media (min-width: 1181px) { .grille-solutions { grid-template-columns: repeat(5, 1fr); gap: 14px; } }
.solution-large { grid-column: auto; display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.solution-large .solution-icone { margin-bottom: 16px; }
.solution-large .sous-titre { padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .14); margin: 0 0 16px; }
.solution-large ul { display: block; margin: 0 0 20px; }
@media (min-width: 961px) and (max-width: 1180px) { .grille-solutions { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 960px) { .solution-large { grid-column: auto; } }

/* Informations légales et RGPD */
.pied-legal { display: flex; flex-wrap: wrap; gap: 6px 22px; border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 30px; padding-top: 18px; font-size: 14px; }
.pied-legal a { color: rgba(255, 255, 255, .75); text-decoration: none; }
.pied-legal a:hover { color: #fff; text-decoration: underline; }
.pied-legal + .pied-bas { margin-top: 10px; border-top: 0; padding-top: 0; }
.info-rgpd { margin: 0; font-size: 13px; color: var(--texte-2); line-height: 1.5; }
.info-rgpd a { font-weight: 600; }
.legal p { font-size: 15.5px; line-height: 1.65; }
.legal table { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 14.5px; }
.legal th, .legal td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--trait); }
.legal th { background: var(--fond-2); }
.onglets-legal { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 4px; }
.onglets-legal button { border: 1.5px solid var(--trait); background: #fff; border-radius: 999px; padding: 6px 14px; font: 600 14px var(--police); cursor: pointer; color: var(--texte); }
.onglets-legal button.actif { background: var(--marque); border-color: var(--marque); color: #fff; }

/* Sélecteur de langue dans l'en-tête : blanc sur le bandeau, couleur du texte une fois l'en-tête compacté. */
.entete .selecteur-langue { color: #fff; }
.entete.compact .selecteur-langue, body.menu-ouvert .entete .selecteur-langue { color: var(--texte); }

/* ===== Téléphones et tablettes : confort tactile et lisibilité ===== */
@media (max-width: 960px) {
  /* le flou de l'en-tête rendrait le menu « fixed » prisonnier de la barre : on le coupe quand le menu est ouvert */
  body.menu-ouvert .entete, .entete:has(.menu.ouvert) { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
  .menu { height: calc(100dvh - var(--entete-h)); bottom: auto; }
  /* logo à gauche, langue + menu bien calés à droite */
  .entete-actions { margin-left: auto; }
  .menu { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
  .menu .sous-menu a { padding: 12px; }
  /* liens « → » plus faciles à toucher */
  .lien-fleche { display: inline-flex; align-items: center; min-height: 44px; }
  .solutions-tete .bouton { margin-left: 0; }
}
@media (max-width: 600px) {
  :root { --entete-h: 64px; }
  .heros { padding-top: calc(var(--entete-h) + 32px); }
  .heros h1 { font-size: clamp(36px, 10.5vw, 48px); margin: 16px 0 14px; }
  .heros-actions { margin: 22px 0 28px; }
  .heros-actions .bouton { flex: 1 1 100%; }
  .chiffres { gap: 14px 20px; }
  .chiffres b { font-size: 34px; }
  .section { padding: 56px 0; }
  /* boutons d'action pleine largeur, à l'écart de la bulle de discussion */
  .solutions-tete { margin-bottom: 24px; }
  .solutions-tete .bouton, .flotte-grille .bouton, .formulaire .bouton-grand { width: 100%; justify-content: center; }
  .bascule-profil { width: 100%; }
  .bascule-profil button { flex: 1; justify-content: center; padding: 10px 8px; }
  .solution { padding: 22px 18px; }
  /* chiffres clés : deux colonnes compactes au lieu d'une longue liste */
  .grille-chiffres { grid-template-columns: 1fr 1fr; gap: 28px 14px; }
  .grille-chiffres .nombre { font-size: clamp(48px, 15vw, 64px); }
  .grille-chiffres .legende { min-width: 100%; padding: 18px 10px 8px; font-size: 13.5px; }
  /* tuiles du formulaire : texte sur deux lignes si besoin, jamais coupé */
  .choix-services span { padding: 12px 6px; font-size: 13.5px; line-height: 1.25; min-height: 76px; justify-content: center; }
  .choix-profil span { padding: 12px 8px; font-size: 15px; }
  /* iPhone : 16 px minimum dans les champs pour éviter le zoom automatique */
  .chat-saisie input, .formulaire select, .suivi-form input { font-size: 16px; }
  /* discussion : panneau presque plein écran, bouton plus discret */
  .chat { left: 8px; right: 8px; width: auto; bottom: calc(80px + env(safe-area-inset-bottom)); height: calc(100dvh - 100px - env(safe-area-inset-bottom)); max-height: 640px; border-radius: 18px; }
  .chat-bouton { width: 56px; height: 56px; bottom: calc(14px + env(safe-area-inset-bottom)); }
  .pied { padding-bottom: 80px; }
  .pied-legal { gap: 4px 16px; }
  .pied-legal a { display: inline-block; padding: 6px 0; }
  .onglets-contact button { padding: 11px 6px; font-size: 14px; }
}
@media (max-width: 380px) {
  .logo { height: 42px; padding: 5px 9px; }
  .grille-chiffres .nombre { font-size: 46px; }
}


/* ===== Chiffres clés 2026 : grille « bento » sombre, verre dépoli, chiffres en dégradé, jauges animées ===== */
.section-chiffres { position: relative; overflow: hidden; isolation: isolate; background: #060A18; color: #fff; }
.chiffres-aurore { position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 35% at 15% 20%, rgba(37, 99, 235, .45), transparent 70%), radial-gradient(35% 35% at 85% 30%, rgba(14, 165, 233, .35), transparent 70%),
    radial-gradient(40% 40% at 60% 95%, rgba(124, 58, 237, .30), transparent 70%);
  filter: blur(20px); animation: aurore 18s ease-in-out infinite alternate; }
.section-chiffres::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 48px 48px; -webkit-mask: radial-gradient(70% 60% at 50% 40%, #000, transparent); mask: radial-gradient(70% 60% at 50% 40%, #000, transparent); }
@keyframes aurore { 0% { transform: translate3d(0, 0, 0) rotate(0); } 100% { transform: translate3d(4%, -3%, 0) rotate(8deg); } }
.titre-chiffres { color: #fff; margin-bottom: 48px; }
.titre-chiffres .tiret { background: linear-gradient(90deg, var(--marque), var(--marque-2)); border-radius: 9px; }

.grille-chiffres { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.grille-chiffres li { position: relative; overflow: hidden; isolation: isolate; padding: 26px 24px 24px; border-radius: 26px; min-height: 230px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .025)); border: 1px solid rgba(255, 255, 255, .11);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 60px -30px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(26px) scale(.98); transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1), border-color .3s; }
.section-chiffres.visible .grille-chiffres li { opacity: 1; transform: none; }
.grille-chiffres li:nth-child(2) { transition-delay: .08s; } .grille-chiffres li:nth-child(3) { transition-delay: .16s; }
.grille-chiffres li:nth-child(4) { transition-delay: .24s; } .grille-chiffres li:nth-child(5) { transition-delay: .32s; } .grille-chiffres li:nth-child(6) { transition-delay: .4s; }
/* halo qui suit la souris */
.grille-chiffres li::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(96, 165, 250, .22), transparent 60%); }
.grille-chiffres li:hover { border-color: rgba(125, 211, 252, .4); }
.grille-chiffres li:hover::before { opacity: 1; }
.ch-large { grid-column: span 2; }
.chiffre-icone { width: 44px; height: 44px; padding: 10px; border-radius: 14px; color: #BAE6FD; margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(37, 99, 235, .45), rgba(14, 165, 233, .25)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.grille-chiffres .prefixe { color: rgba(255, 255, 255, .6); font-size: 13px; letter-spacing: .04em; }
.grille-chiffres .nombre { font-size: clamp(54px, 6vw, 88px); line-height: .9; color: transparent; letter-spacing: -.02em;
  background: linear-gradient(100deg, #FFFFFF 10%, #BAE6FD 45%, #60A5FA 90%); -webkit-background-clip: text; background-clip: text; }
.ch-vedette .nombre { font-size: clamp(72px, 9vw, 132px); }
.grille-chiffres .legende { background: none; padding: 0; margin-top: 12px; min-width: 0; transform: none; font-size: 14.5px; }
.grille-chiffres .legende > * { opacity: 1; transition: none; }
.grille-chiffres .legende b { color: #fff; font-size: 16px; }
.grille-chiffres .legende span { color: rgba(255, 255, 255, .62); }
/* carte vedette : histogramme qui pousse */
.ch-vedette { background: linear-gradient(150deg, rgba(37, 99, 235, .55), rgba(30, 64, 175, .25) 55%, rgba(14, 165, 233, .18)); }
.ch-barres { position: absolute; right: 22px; bottom: 22px; display: flex; align-items: flex-end; gap: 6px; height: 46%; width: 42%; z-index: -1; opacity: .9; }
.ch-barres i { flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, rgba(186, 230, 253, .85), rgba(96, 165, 250, .15)); height: 8%;
  transition: height 1.1s cubic-bezier(.2, .8, .2, 1); }
.section-chiffres.visible .ch-barres i:nth-child(1) { height: 22%; } .section-chiffres.visible .ch-barres i:nth-child(2) { height: 30%; transition-delay: .05s; }
.section-chiffres.visible .ch-barres i:nth-child(3) { height: 26%; transition-delay: .1s; } .section-chiffres.visible .ch-barres i:nth-child(4) { height: 40%; transition-delay: .15s; }
.section-chiffres.visible .ch-barres i:nth-child(5) { height: 36%; transition-delay: .2s; } .section-chiffres.visible .ch-barres i:nth-child(6) { height: 52%; transition-delay: .25s; }
.section-chiffres.visible .ch-barres i:nth-child(7) { height: 48%; transition-delay: .3s; } .section-chiffres.visible .ch-barres i:nth-child(8) { height: 64%; transition-delay: .35s; }
.section-chiffres.visible .ch-barres i:nth-child(9) { height: 60%; transition-delay: .4s; } .section-chiffres.visible .ch-barres i:nth-child(10) { height: 76%; transition-delay: .45s; }
.section-chiffres.visible .ch-barres i:nth-child(11) { height: 84%; transition-delay: .5s; } .section-chiffres.visible .ch-barres i:nth-child(12) { height: 100%; transition-delay: .55s; }
/* carte kilomètres : itinéraire qui se dessine, avec un point qui roule */
.ch-trace { position: absolute; left: 42%; right: 0; top: 34px; width: 54%; height: 38%; z-index: -1; overflow: visible; }
.ch-trace path { fill: none; stroke: #38BDF8; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 8 10; opacity: .75;
  animation: trace 2.4s linear infinite; }
@keyframes trace { to { stroke-dashoffset: -36; } }
/* jauges circulaires des pourcentages */
.ch-anneau::after { content: ""; position: absolute; top: 22px; right: 22px; width: 78px; height: 78px; border-radius: 50%;
  background: conic-gradient(var(--jauge, #60A5FA) calc(var(--p, 0) * 1%), rgba(255, 255, 255, .09) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px)); mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
  filter: drop-shadow(0 0 10px rgba(96, 165, 250, .45)); }
.ch-vert { --jauge: #34D399; }
.ch-vert::after { filter: drop-shadow(0 0 10px rgba(52, 211, 153, .45)); }
.ch-vert .chiffre-icone { color: #A7F3D0; background: linear-gradient(135deg, rgba(16, 185, 129, .45), rgba(52, 211, 153, .2)); }
.ch-vert .nombre { background-image: linear-gradient(100deg, #FFFFFF 10%, #A7F3D0 50%, #34D399 95%); }

@media (max-width: 1000px) { .grille-chiffres { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .titre-chiffres { margin-bottom: 30px; }
  .grille-chiffres { grid-template-columns: 1fr 1fr; gap: 12px; }
  .grille-chiffres li { padding: 18px 16px; border-radius: 20px; min-height: 0; }
  .chiffre-icone { width: 38px; height: 38px; padding: 9px; margin-bottom: 12px; border-radius: 12px; }
  .grille-chiffres .nombre { font-size: clamp(40px, 12vw, 54px); }
  .ch-vedette .nombre { font-size: clamp(58px, 18vw, 80px); }
  .grille-chiffres .legende { padding: 0; font-size: 13px; }
  .grille-chiffres .legende b { font-size: 14.5px; }
  .ch-anneau::after { width: 48px; height: 48px; top: 16px; right: 14px; }
  .ch-barres { width: 40%; height: 46%; right: 14px; top: 18px; bottom: auto; gap: 3px; opacity: .55; }
  .ch-trace { left: 50%; width: 46%; top: 18px; height: 30%; }
}
@media (max-width: 380px) { .grille-chiffres .nombre { font-size: 38px; } }

/* ===== Bouton de connexion à l'espace (administration) ===== */
.bouton-connexion { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 12px; text-decoration: none;
  font: 600 15px var(--police); color: #fff; border: 1.5px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .1); transition: background .2s, border-color .2s, color .2s; }
.bouton-connexion:hover { background: rgba(255, 255, 255, .22); }
.bouton-connexion .i { width: 18px; height: 18px; }
.entete.compact .bouton-connexion, body.menu-ouvert .bouton-connexion { color: var(--texte); border-color: var(--trait); background: #fff; }
.entete.compact .bouton-connexion:hover { color: var(--marque); border-color: var(--marque); }
@media (max-width: 600px) {
  .bouton-connexion { width: 44px; padding: 0; justify-content: center; }
  .bouton-connexion span { display: none; }
  .entete-actions { gap: 8px; }
}


/* ===== Flotte : cartes électrique / thermique illustrées ===== */
.flotte-cartes { grid-template-columns: 1fr; gap: 16px; --part-elec: 50%; }
.flotte-carte { position: relative; overflow: hidden; isolation: isolate; flex-direction: row; align-items: center; justify-content: space-between; gap: 18px;
  padding: 26px 26px; border-radius: 26px; transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, border-color .3s; }
.flotte-carte:hover { transform: translateY(-4px); }
.fc-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fc-texte > span { font-weight: 600; font-size: 17px; }
.flotte-carte .fc-texte .i { width: 44px; height: 44px; padding: 10px; border-radius: 14px; margin-bottom: 12px; }
.flotte-carte b { font-size: clamp(56px, 6vw, 76px); line-height: .95; color: transparent; -webkit-background-clip: text; background-clip: text; }
.flotte-carte::before { content: ""; position: absolute; z-index: -1; width: 260px; height: 260px; border-radius: 50%; right: -60px; top: -80px; filter: blur(40px); opacity: .55; }

/* électrique : vert, batterie qui se charge */
.flotte-carte.electrique { background: linear-gradient(140deg, rgba(16, 185, 129, .28), rgba(6, 78, 59, .25) 55%, rgba(15, 23, 42, .4)); border-color: rgba(52, 211, 153, .4); }
.flotte-carte.electrique::before { background: #10B981; }
.flotte-carte.electrique:hover { box-shadow: 0 24px 60px -24px rgba(16, 185, 129, .7); border-color: rgba(110, 231, 183, .7); }
.flotte-carte.electrique .fc-texte .i { color: #ECFDF5; background: linear-gradient(135deg, #10B981, #059669); box-shadow: 0 8px 22px -8px #10B981; }
.flotte-carte.electrique b { background-image: linear-gradient(100deg, #fff 15%, #A7F3D0 55%, #34D399); }
.fc-batterie { position: relative; flex: none; width: 112px; height: 54px; border: 3px solid rgba(167, 243, 208, .85); border-radius: 12px; padding: 4px; }
.fc-batterie::after { content: ""; position: absolute; right: -10px; top: 50%; width: 7px; height: 20px; transform: translateY(-50%); border-radius: 0 4px 4px 0; background: rgba(167, 243, 208, .85); }
.fc-batterie i { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, #059669, #34D399 60%, #A7F3D0); box-shadow: 0 0 18px rgba(52, 211, 153, .7);
  animation: charge 3.2s cubic-bezier(.4, 0, .2, 1) infinite; }
.fc-batterie .i { position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; color: #fff; filter: drop-shadow(0 0 6px rgba(0, 0, 0, .35)); }
@keyframes charge { 0% { width: 12%; } 70%, 100% { width: 100%; } }

/* thermique : ambre, route qui défile */
.flotte-carte.thermique { background: linear-gradient(140deg, rgba(245, 158, 11, .26), rgba(120, 53, 15, .25) 55%, rgba(15, 23, 42, .4)); border-color: rgba(251, 191, 36, .38); }
.flotte-carte.thermique::before { background: #F59E0B; }
.flotte-carte.thermique:hover { box-shadow: 0 24px 60px -24px rgba(245, 158, 11, .7); border-color: rgba(252, 211, 77, .7); }
.flotte-carte.thermique .fc-texte .i { color: #FFFBEB; background: linear-gradient(135deg, #F59E0B, #D97706); box-shadow: 0 8px 22px -8px #F59E0B; }
.flotte-carte.thermique b { background-image: linear-gradient(100deg, #fff 15%, #FDE68A 55%, #FBBF24); }
.fc-route { position: relative; flex: none; width: 120px; height: 84px; overflow: hidden; border-radius: 12px;
  background: linear-gradient(180deg, rgba(15, 23, 42, .1), rgba(15, 23, 42, .65)); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); }
.fc-route i { position: absolute; left: 50%; top: -100%; width: 6px; height: 200%; transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, #FBBF24 0 14px, transparent 14px 28px); animation: route 1s linear infinite; }
.fc-route::before, .fc-route::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; background: rgba(253, 230, 138, .55); }
.fc-route::before { left: 38%; transform-origin: top; transform: skewX(-21deg); left: 20%; }
.fc-route::after { right: 20%; transform: skewX(21deg); }
@keyframes route { to { transform: translate(-50%, 28px); } }

/* barre de répartition électrique / thermique */
.flotte-repartition { display: flex; height: 10px; border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, .08); gap: 3px; }
.flotte-repartition .fr-elec { width: var(--part-elec); background: linear-gradient(90deg, #059669, #34D399); border-radius: 10px; transition: width 1.2s cubic-bezier(.2, .8, .2, 1); }
.flotte-repartition .fr-therm { flex: 1; background: linear-gradient(90deg, #F59E0B, #FBBF24); border-radius: 10px; }

@media (max-width: 600px) {
  .flotte-carte { padding: 20px 18px; border-radius: 22px; }
  .fc-batterie { width: 84px; height: 44px; }
  .fc-route { width: 86px; height: 70px; }
}


/* ===== Site découpé en pages ===== */
body.page-interne #contenu { padding-top: var(--entete-h); }
.avec-pages #solutions + #devis::before { display: none; }
.page-entree > section:not([hidden]), .page-entree > .page-suite { animation: page-entree .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes page-entree { from { opacity: 0; transform: translateY(14px); } }
/* page en cours dans le menu */
.menu > a[aria-current="page"], .menu-deroulant > button[aria-current="page"] { color: var(--marque) !important; background: #EEF3FF; }
.entete:not(.compact) .menu > a[aria-current="page"] { color: #fff !important; background: rgba(255, 255, 255, .18); }

/* Accès rapide (accueil) */
.section-raccourcis { padding: 64px 0; background: var(--fond); }
.section-raccourcis h2 { margin-bottom: 26px; }
.raccourcis { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.raccourcis a { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 16px 18px; border-radius: 18px; text-decoration: none; color: var(--texte);
  background: var(--fond-2); border: 1.5px solid transparent; transition: transform .2s, border-color .2s, background .2s, box-shadow .2s; }
.raccourcis a:hover, .raccourcis a:focus-visible { transform: translateY(-3px); border-color: var(--marque); background: #fff; box-shadow: var(--ombre); }
.raccourcis .i { flex: none; width: 42px; height: 42px; padding: 10px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--marque), var(--marque-2)); }
.raccourcis b { flex: 1; font-size: 16px; line-height: 1.25; }
.raccourcis .i-fleche { width: 18px; height: 18px; padding: 0; background: none; color: var(--texte-2); transition: transform .2s, color .2s; }
.raccourcis a:hover .i-fleche { transform: translateX(3px); color: var(--marque); }
.raccourcis li:first-child a { background: linear-gradient(135deg, var(--marque), var(--marque-fonce)); color: #fff; }
.raccourcis li:first-child .i { background: rgba(255, 255, 255, .2); }
.raccourcis li:first-child .i-fleche { color: #fff; background: none; }

/* À découvrir ensuite */
.page-suite { padding: 0 0 56px; background: transparent; }
.page-suite a { display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; padding: 26px 28px; border-radius: 22px; text-decoration: none; color: #fff;
  background: linear-gradient(120deg, var(--marque-fonce), var(--marque) 60%, var(--marque-2)); box-shadow: var(--ombre); transition: transform .2s; }
.page-suite a:hover { transform: translateY(-3px); }
.page-suite small { width: 100%; text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px; opacity: .8; }
.page-suite b { font-family: var(--titre); font-weight: 800; text-transform: uppercase; font-size: clamp(26px, 3.4vw, 38px); line-height: 1; }
.page-suite .i { width: 30px; height: 30px; margin-left: auto; }
body.page-interne main > section:not([hidden]) + .page-suite { padding-top: 40px; }

@media (max-width: 960px) { .raccourcis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .section-raccourcis { padding: 44px 0; }
  .raccourcis { gap: 10px; }
  .raccourcis a { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 0; padding: 14px; }
  .raccourcis b { font-size: 14.5px; }
  .raccourcis .i-fleche { display: none; }
  .page-suite a { padding: 20px; }
}