/* ============================================================
   Site vitrine (accueil + devis). S'adapte au téléphone.
   ============================================================ */
.conteneur { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 20; background: rgba(246, 244, 239, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--trait); }
.entete .conteneur { height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.menu { display: flex; gap: 32px; }
.menu a { color: #2A3442; font-size: 15px; font-weight: 600; }
.menu a:hover { color: var(--cuivre); }
.menu .menu-mobile { display: none; }
.entete-actions { display: flex; gap: 10px; }
.bouton-menu { display: none; width: 44px; height: 44px; border: 0; background: transparent; align-items: center; justify-content: center; cursor: pointer; }

/* ---------- Bandeau principal ---------- */
.hero { background: var(--nuit); color: #fff; }
.hero .conteneur { padding-top: 88px; padding-bottom: 96px; display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 72px; align-items: center; }
.hero-textes { display: flex; flex-direction: column; gap: 28px; }
.hero-etiquette { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid #34465F; color: #D6DCE4; font-size: 13px; font-weight: 600; }
.hero-etiquette::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cuivre-vif); }
.hero h1 { font-size: clamp(38px, 5vw, 64px); line-height: 1.05; color: #fff; }
.hero p { font-size: 19px; line-height: 1.6; color: var(--nuit-texte); }
.hero-boutons { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-garanties { display: flex; gap: 28px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--nuit-3); }
.hero-garanties span { display: flex; align-items: center; gap: 8px; color: #D6DCE4; font-size: 14px; font-weight: 600; }
.hero-garanties svg { color: var(--cuivre-vif); }

.estimation { background: #fff; color: var(--encre); border-radius: 18px; padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.estimation-titre { font-size: 26px; color: var(--nuit); }
.estimation .inp { height: 48px; font-size: 15px; }
.deux-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.case { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--texte-2); font-weight: 600; cursor: pointer; }
.case input { width: 18px; height: 18px; accent-color: var(--cuivre); }
.note-centre { font-size: 12px; color: var(--muted); text-align: center; }

/* ---------- Bande logos ---------- */
.logos { background: #fff; border-bottom: 1px solid var(--trait); }
.logos .conteneur { min-height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-top: 24px; padding-bottom: 24px; }
.logos-liste { display: flex; gap: 40px; flex-wrap: wrap; }
.logo-client { width: 132px; height: 36px; border-radius: 8px; background: var(--gris-f); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #6B7280; }

/* ---------- Sections ---------- */
.section { padding: 104px 0; }
.section-blanche { background: #fff; }
.section-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: 56px; flex-wrap: wrap; }
.section-tete > div { display: flex; flex-direction: column; gap: 14px; max-width: 660px; }
.section h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.12; color: var(--nuit); }
.section-intro { max-width: 420px; font-size: 16px; line-height: 1.6; color: var(--texte-3); }

.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grille-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }

.service { background: #fff; border: 1px solid var(--trait); border-radius: 18px; padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.service h3 { font-family: var(--police-titre); font-weight: 500; font-size: 26px; color: var(--nuit); }
.service p { font-size: 15px; line-height: 1.6; color: var(--texte-3); }
.service ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: #2A3442; font-weight: 600; }
.service-icone { width: 48px; height: 48px; border-radius: 12px; background: var(--cuivre-clair); color: var(--cuivre); display: flex; align-items: center; justify-content: center; }
.service-sombre { background: var(--nuit); border-color: var(--nuit); }
.service-sombre h3 { color: #fff; }
.service-sombre p { color: var(--nuit-texte); }
.service-sombre ul { color: #E6EAF0; }
.service-sombre .service-icone { background: var(--nuit-3); color: var(--cuivre-vif); }

.etape { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; border-top: 2px solid var(--nuit); }
.etape-num { font-family: var(--police-titre); font-size: 40px; color: var(--cuivre); }
.etape h3 { font-size: 19px; font-weight: 700; color: var(--nuit); }
.etape p { font-size: 15px; line-height: 1.6; color: var(--texte-3); }

.pro { display: grid; grid-template-columns: minmax(0, 1fr) 600px; gap: 80px; align-items: center; }
.pro-textes { display: flex; flex-direction: column; gap: 24px; }
.pro-textes p { font-size: 16px; line-height: 1.65; color: var(--texte-3); }
.atouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.atouts div { display: flex; flex-direction: column; gap: 4px; }
.atouts strong { font-size: 15px; color: var(--nuit); }
.atouts span { font-size: 14px; color: var(--texte-3); line-height: 1.5; }

.apercu { background: #fff; border: 1px solid var(--trait); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.apercu-carte { height: 180px; border-radius: 14px; background: #EEF1F4; overflow: hidden; }
.apercu-carte svg { width: 100%; height: 100%; }
.frise { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.frise li { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.frise li::before { content: ""; height: 4px; border-radius: 4px; background: var(--trait); }
.frise li.fait { color: var(--nuit); }
.frise li.fait::before { background: var(--nuit); }
.frise li.actuel { color: var(--cuivre); }
.frise li.actuel::before { background: var(--cuivre); }

.chiffres { background: #fff; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.chiffres .conteneur { padding-top: 72px; padding-bottom: 72px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.chiffre { display: flex; flex-direction: column; gap: 6px; }
.chiffre strong { font-family: var(--police-titre); font-weight: 500; font-size: 48px; color: var(--nuit); }
.chiffre span { font-size: 15px; color: var(--texte-3); font-weight: 600; }

.cible { background: #fff; border: 1px solid var(--trait); border-radius: 16px; padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.cible strong { font-size: 17px; color: var(--nuit); }
.cible span { font-size: 14px; line-height: 1.55; color: var(--texte-3); }

.appel { background: var(--cuivre); border-radius: 24px; padding: 64px 72px; display: flex; justify-content: space-between; align-items: center; gap: 48px; flex-wrap: wrap; }
.appel h2 { font-size: clamp(28px, 3vw, 40px); color: #fff; }
.appel p { font-size: 17px; line-height: 1.6; color: #FBEBDD; margin-top: 12px; }
.appel-boutons { display: flex; gap: 12px; flex-wrap: wrap; }
.appel .btn-contour { color: #fff; border-color: #E7B98F; }

/* ---------- Pied de page ---------- */
.pied { background: var(--nuit); color: #A9B3C1; padding: 72px 0 40px; }
.pied-haut { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.pied-marque { display: flex; flex-direction: column; gap: 14px; max-width: 320px; font-size: 14px; line-height: 1.6; }
.pied-colonnes { display: flex; gap: 72px; flex-wrap: wrap; }
.pied-colonnes div { display: flex; flex-direction: column; gap: 12px; }
.pied a { color: #C9CFD8; font-size: 14px; }
.pied a:hover { color: #fff; }
.pied-bas { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--nuit-3); font-size: 13px; color: #7F8A9A; }
.pied-bas nav { display: flex; gap: 24px; flex-wrap: wrap; }

/* ---------- Page devis ---------- */
.devis { padding: 56px 0 96px; }
.devis .conteneur { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; }
.devis-form { display: flex; flex-direction: column; gap: 28px; }
.devis h1 { font-size: 40px; color: var(--nuit); margin-top: 10px; }
.progression { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.progression li { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.progression li::before { content: ""; height: 4px; border-radius: 4px; background: var(--trait); }
.progression li.actuel { color: var(--cuivre); font-weight: 800; }
.progression li.actuel::before, .progression li.fait::before { background: var(--cuivre); }
.bloc-trajet { background: #fff; border: 1px solid var(--trait); border-radius: 18px; padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.trajet-cols { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: 24px; }
.trajet-cols > .separateur { background: var(--trait); }
.trajet-col { display: flex; flex-direction: column; gap: 16px; }
.trajet-titre { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; color: var(--nuit); }
.point-plein { width: 12px; height: 12px; border-radius: 50%; background: var(--nuit); flex-shrink: 0; }
.point-vide { width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--cuivre); flex-shrink: 0; }
.option-restit { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border-radius: 12px; background: var(--ivoire); cursor: pointer; }
.option-restit input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--cuivre); }
.option-restit strong { display: block; font-size: 15px; color: var(--nuit); }
.option-restit span { font-size: 14px; color: var(--texte-3); line-height: 1.5; }
.devis-pied { display: flex; justify-content: space-between; align-items: center; }
.resume { background: var(--nuit); color: #fff; border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 22px; position: sticky; top: 108px; }
.resume .lbl { color: #9AA6B6; }
.resume-point { display: flex; gap: 12px; }
.resume-point strong { display: block; }
.resume-point small { font-size: 13px; color: #9AA6B6; }
.resume-ligne { display: flex; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--nuit-3); border-bottom: 1px solid var(--nuit-3); font-size: 14px; }
.resume-prix { font-family: var(--police-titre); font-size: 44px; }
.resume-prix small { font-size: 18px; color: #9AA6B6; }
.resume-inclus { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 12px; background: var(--nuit-2); font-size: 13px; color: #D6DCE4; line-height: 1.5; }

/* ---------- Téléphone et tablette ---------- */
@media (max-width: 1080px) {
  .hero .conteneur, .pro, .devis .conteneur { grid-template-columns: 1fr; gap: 40px; }
  .grille-4, .chiffres .conteneur { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resume { position: static; }
}
@media (max-width: 760px) {
  .menu, .entete-actions .btn { display: none; }
  .logo-sous { display: none; }
  .entete .conteneur { height: 68px; }
  .bouton-menu { display: inline-flex; }
  .entete-actions .btn { height: 40px; padding: 0 14px; font-size: 13px; }
  .conteneur { padding: 0 16px; }
  .hero .conteneur { padding-top: 40px; padding-bottom: 48px; }
  .estimation { padding: 22px; }
  .section { padding: 64px 0; }
  .grille-3, .grille-4, .chiffres .conteneur, .atouts { grid-template-columns: 1fr; }
  .appel { padding: 36px 24px; border-radius: 18px; }
  .trajet-cols { grid-template-columns: 1fr; }
  .trajet-cols > .separateur { height: 1px; }
  .bloc-trajet { padding: 20px; }
  .deux-col { grid-template-columns: 1fr; }
  .logos-liste { gap: 12px; }
  .menu.ouvert { display: flex; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; gap: 0; background: #fff; border-bottom: 1px solid var(--trait); }
  .menu.ouvert a { padding: 16px; border-top: 1px solid var(--trait-2); }
  .menu.ouvert .menu-mobile { display: block; font-weight: 800; color: var(--cuivre); }
}

/* Socle des écrans (24/10/2026) : carte « Commander un convoyage » de l'accueil (à la place du formulaire d'estimation) */
.hero .estimation p { color: #4A5568; font-size: 15px; line-height: 1.55; }
.hero .estimation p.estimation-titre { color: var(--nuit); font-size: 26px; line-height: 1.2; }