/* ════════════════════════════════════════════════════════════════
   ACCUEIL — section « Comparatif Orly » (#comparatif)
   Règle visuelle : Direct Voiturier = bleu royal lumineux (+ pastille or
   « Gagnant »), les autres solutions = gris. Couleurs : variables de
   home.css uniquement (royal, studio, sky-400, amber-500, gris).
   Mobile d'abord (360 px), puis min-width.
═══════════════════════════════════════════════════════════════ */
.h-cmp .h-head { margin-bottom:26px; }
.h-cmp .h-head h2 { margin-top:14px; }
.h-cmp .h-head p { font-weight:800; color:var(--ink); }
.cmp-hl { color:var(--royal); background:linear-gradient(transparent 62%, var(--royal-100) 62%); padding:0 .08em; }
.cmp-board, .cmp-table-wrap, .cmp-path, .cmp-why { max-width:1000px; margin-left:auto; margin-right:auto; }
.cmp-board + .cmp-table-wrap, .cmp-table-wrap + .cmp-path, .cmp-path + .cmp-why { margin-top:22px; }

/* ── A. Le tableau d'affichage (sombre) : 2 manches, 1 gagnant ── */
.cmp-board { position:relative; overflow:hidden; padding:12px; border-radius:28px; color:#fff;
  background:radial-gradient(110% 70% at 0% 0%, rgba(37,99,235,.42), transparent 60%),
             radial-gradient(80% 60% at 100% 100%, rgba(56,189,248,.20), transparent 65%), var(--studio);
  border:1px solid var(--studio-line); box-shadow:0 34px 70px -34px rgba(9,16,36,.75); }
.cmp-rounds { display:grid; gap:12px; }
.cmp-round { padding:16px 14px 14px; border-radius:22px; background:rgba(255,255,255,.035); border:1px solid var(--studio-line); }
.cmp-round-h { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin-bottom:14px; }
.cmp-round-h span { width:100%; font-size:.62rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:var(--sky-400); }
.cmp-round-h b { font-size:1.35rem; font-weight:900; letter-spacing:-.02em; color:#fff; }
.cmp-round-h em { font-style:normal; font-size:.78rem; font-weight:600; color:#64748B; }

.cmp-win { position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px 10px;
  padding:16px; border-radius:18px; background:linear-gradient(135deg, #3B82F6 0%, var(--royal) 40%, var(--royal-800) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), 0 0 0 1px rgba(37,99,235,.5), 0 22px 50px -14px rgba(37,99,235,.9); }
.cmp-win::after { content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%); transform:translateX(-120%); }
.reveal.visible .cmp-win::after { animation:cmp-shine 1.4s cubic-bezier(.16,1,.3,1) .5s 1 both; }
.cmp-win-l { display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; }
.cmp-win-l b { font-size:1.1rem; font-weight:900; letter-spacing:-.01em; }
.cmp-crown { display:inline-flex; align-items:center; gap:5px; padding:4px 10px 4px 7px; border-radius:999px; background:var(--amber-500); color:#1E293B;
  font-size:.62rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; box-shadow:0 6px 16px -6px rgba(245,165,36,.8); }
.cmp-crown svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.cmp-win-n { display:flex; align-items:baseline; gap:3px; font-size:3.4rem; font-weight:900; line-height:.9; letter-spacing:-.05em; white-space:nowrap;
  text-shadow:0 0 28px rgba(191,219,254,.7); font-variant-numeric:tabular-nums; }
.cmp-win-n small { font-size:.32em; font-weight:800; letter-spacing:0; text-shadow:none; }
.cmp-win-track { grid-column:1 / -1; position:relative; height:10px; border-radius:999px; background:rgba(255,255,255,.2); }
.cmp-win-track > span:not(.cmp-dot) { display:block; height:100%; width:var(--w); border-radius:999px; background:#fff; box-shadow:0 0 16px rgba(255,255,255,.9); }
.cmp-dot { position:absolute; left:0; top:50%; width:16px; height:16px; margin-top:-8px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.7), 0 0 14px #fff; animation:cmp-pulse 1.8s ease-out infinite; }
.cmp-save { grid-column:1 / -1; display:flex; align-items:center; gap:8px; margin:0; padding:9px 12px; border-radius:12px;
  background:rgba(255,255,255,.14); font-size:.82rem; font-weight:600; line-height:1.3; }
.cmp-save b { font-weight:900; }
.cmp-save svg { width:18px; height:18px; flex-shrink:0; padding:3px; border-radius:50%; background:#fff; fill:none; stroke:var(--royal); stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round; }

.cmp-bars { list-style:none; margin:0; padding:16px 4px 2px; display:grid; gap:14px; }
.cmp-bar-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.cmp-bar-top b { font-size:.82rem; font-weight:700; color:#94A3B8; }
.cmp-bar-top strong { font-size:.9rem; font-weight:900; color:#CBD5E1; white-space:nowrap; }
.cmp-track { margin-top:7px; height:8px; border-radius:999px; background:var(--studio-line); overflow:hidden; }
.cmp-track span { display:block; height:100%; width:var(--w); border-radius:999px; background:linear-gradient(90deg, #334155, #64748B); }
.reveal .cmp-track span, .reveal .cmp-win-track > span:not(.cmp-dot) { transform-origin:left; transform:scaleX(0); transition:transform 1.3s cubic-bezier(.16,1,.3,1) .35s; }
.reveal.visible .cmp-track span, .reveal.visible .cmp-win-track > span:not(.cmp-dot) { transform:scaleX(1); }
.cmp-pct { display:flex; align-items:baseline; justify-content:center; gap:10px; margin:18px 0 0; padding-top:14px; border-top:1px dashed var(--studio-line); }
.cmp-pct strong { font-size:2.6rem; font-weight:900; letter-spacing:-.04em; line-height:1; color:var(--sky-400); text-shadow:0 0 26px rgba(56,189,248,.55); }
.cmp-pct span { font-size:.82rem; font-weight:700; color:#94A3B8; }
.cmp-board-note { margin:12px 6px 2px; font-size:.62rem; font-weight:400; line-height:1.45; color:#64748B; text-align:center; }
@keyframes cmp-shine { to { transform:translateX(120%); } }
@keyframes cmp-pulse { 0% { box-shadow:0 0 0 0 rgba(255,255,255,.7), 0 0 14px #fff; } 100% { box-shadow:0 0 0 14px rgba(255,255,255,0), 0 0 14px #fff; } }

/* ── B. Le tableau ── (mobile : 3 colonnes de valeurs sous chaque critère) */
.cmp-table-wrap { background:#fff; border:1px solid var(--line); border-radius:26px; padding:16px 12px; box-shadow:0 1px 2px rgba(2,6,23,.04); }
.cmp-table { width:100%; border-collapse:separate; border-spacing:0; display:block; }
.cmp-table caption { display:block; }
.cmp-table thead, .cmp-table tbody { display:block; }
.cmp-table tr { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
.cmp-table tbody tr { padding:12px 0; border-top:1px solid #EEF2F6; }
.cmp-table thead th:first-child { display:none; }
.cmp-table thead th { font-size:.72rem; font-weight:800; color:#94A3B8; text-align:center; line-height:1.25; padding:0 2px 10px; align-self:end; }
.cmp-table thead th.is-us { color:var(--royal); font-weight:900; font-size:.8rem; }
.cmp-rec { display:block; width:max-content; max-width:100%; margin:0 auto 5px; padding:3px 8px; border-radius:999px;
  background:var(--royal); color:#fff; font-size:.56rem; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
.cmp-table th[scope="row"] { grid-column:1 / -1; display:flex; align-items:center; gap:8px; font-size:.86rem; font-weight:800; color:var(--ink); text-align:left; }
.cmp-table th[scope="row"] i { width:26px; height:26px; border-radius:8px; background:#F1F5F9; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cmp-table th[scope="row"] svg { width:15px; height:15px; fill:none; stroke:#64748B; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cmp-table td { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:48px; padding:8px 4px; border-radius:12px;
  background:#F8FAFC; color:#94A3B8; font-size:.76rem; font-weight:600; line-height:1.25; text-align:center; }
.cmp-table td.is-us { background:linear-gradient(135deg, var(--royal) 0%, var(--royal-700) 100%); color:#fff; font-weight:800; box-shadow:0 8px 18px -8px rgba(37,99,235,.6); }
.cmp-table td strong { font-weight:900; }
.cmp-table td small { font-size:.68rem; font-weight:700; opacity:.9; }
.cmp-yes, .cmp-no { display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; }
.cmp-yes { background:rgba(255,255,255,.22); }
.cmp-no { background:#F1F5F9; width:24px; height:24px; }
.cmp-yes svg, .cmp-no svg { width:16px; height:16px; fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.cmp-yes svg { stroke:#fff; }
.cmp-no svg { stroke:#94A3B8; width:12px; height:12px; }

/* ── C. Le parcours : 8 étapes vs 2 ── */
.cmp-path { display:grid; gap:12px; }
.cmp-path-col { border-radius:26px; padding:18px 16px; display:flex; flex-direction:column; }
.cmp-path-col.is-them { background:#fff; border:1px solid var(--line); }
.cmp-path-col.is-us { position:relative; overflow:hidden; color:#fff;
  background:radial-gradient(90% 70% at 100% 0%, rgba(56,189,248,.35), transparent 60%), linear-gradient(135deg, var(--royal) 0%, var(--royal-700) 60%, var(--royal-800) 100%);
  box-shadow:0 22px 46px -14px rgba(37,99,235,.65); }
.cmp-path-h { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:16px; }
.cmp-path-h b { font-size:1rem; font-weight:900; }
.cmp-path-h strong { font-size:1.9rem; font-weight:900; letter-spacing:-.04em; white-space:nowrap; line-height:1; }
.is-them .cmp-path-h b { color:#64748B; }
.is-them .cmp-path-h strong { color:#94A3B8; }
.is-us .cmp-path-h strong { text-shadow:0 0 22px rgba(191,219,254,.8); }
.cmp-path-row { display:grid; gap:8px; }
.cmp-path-row + .cmp-path-row { margin-top:14px; }
.cmp-path-row > em { font-style:normal; font-size:.62rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:#94A3B8; }
.cmp-path-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; }
.cmp-path-steps li { position:relative; display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; font-size:.66rem; font-weight:600; line-height:1.25; color:#94A3B8; }
.cmp-path-steps i { position:relative; z-index:1; width:38px; height:38px; border-radius:50%; background:#F1F5F9; border:1px solid #E2E8F0; display:flex; align-items:center; justify-content:center; }
.cmp-path-steps svg { width:17px; height:17px; fill:none; stroke:#94A3B8; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.is-them .cmp-path-steps li:not(:last-child)::after { content:''; position:absolute; top:19px; left:calc(50% + 22px); right:calc(-50% + 19px); border-top:2px dashed #CBD5E1; }
.cmp-path-r { display:flex; align-items:center; justify-content:center; gap:8px; margin:auto 0 0; padding-top:14px; border-top:1px solid #EEF2F6; font-size:.95rem; font-weight:900; color:#64748B; }
.cmp-path-row + .cmp-path-r { margin-top:16px; }
.cmp-path-r svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.is-us .cmp-path-steps { grid-template-columns:1fr; gap:22px; margin:2px 0 18px; }
.is-us .cmp-path-steps li { flex-direction:row; text-align:left; gap:14px; font-size:.95rem; font-weight:800; color:#fff; }
.is-us .cmp-path-steps li em { display:block; font-style:normal; font-size:.6rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.7); margin-bottom:2px; }
.is-us .cmp-path-steps i { width:46px; height:46px; flex-shrink:0; background:#fff; border:0; box-shadow:0 0 0 6px rgba(255,255,255,.16), 0 0 22px rgba(255,255,255,.55); }
.is-us .cmp-path-steps svg { width:21px; height:21px; stroke:var(--royal); stroke-width:2.4; }
.is-us .cmp-path-steps li:first-child::after { content:''; position:absolute; left:22px; top:46px; height:22px; width:2px; background:#fff; box-shadow:0 0 8px #fff; }
.is-us .cmp-path-r { border-top-color:rgba(255,255,255,.25); color:#fff; font-size:1.05rem; }

/* ── D. Pourquoi nous : 6 cartes ── */
.cmp-why-t { text-align:center; font-size:clamp(1.3rem,4.6vw,1.7rem); font-weight:900; letter-spacing:-.02em; color:var(--ink); margin:16px 0 16px; }
.cmp-why-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.cmp-why-i { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:16px 14px; border-radius:20px; background:#fff; border:1px solid var(--line); min-width:0;
  box-shadow:0 1px 2px rgba(2,6,23,.04); transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, border-color .25s; }
.cmp-why-i:hover { transform:translateY(-3px); border-color:var(--blue-light); box-shadow:0 18px 34px -16px rgba(37,99,235,.45); }
.cmp-why-i i { width:40px; height:40px; border-radius:13px; margin-bottom:10px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, #3B82F6 0%, var(--royal-700) 100%); box-shadow:0 8px 18px -6px rgba(37,99,235,.7); }
.cmp-why-i i svg { width:20px; height:20px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cmp-why-i b { display:block; font-size:1.2rem; font-weight:900; line-height:1.1; letter-spacing:-.02em; color:var(--ink); }
.cmp-why-i span { display:block; font-size:.74rem; line-height:1.3; color:#94A3B8; font-weight:600; }
.cmp-cta { margin-top:24px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.cmp-cta .h-btn { width:100%; max-width:420px; }
.cmp-more { display:inline-flex; align-items:center; gap:6px; font-size:.86rem; font-weight:800; color:var(--royal); text-align:center; }
.cmp-more svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.cmp-more:hover { text-decoration:underline; }

@media (min-width:640px) {
  .cmp-board { padding:16px; }
  .cmp-round { padding:22px 20px 18px; }
  .cmp-win { padding:20px 22px; }
  .cmp-win-l b { font-size:1.3rem; }
  .cmp-win-n { font-size:4.2rem; }
  .cmp-bar-top b, .cmp-bar-top strong { font-size:.92rem; }
  .cmp-table-wrap { padding:22px 22px 16px; }
  .cmp-table td { font-size:.85rem; }
  .cmp-path { grid-template-columns:1.6fr 1fr; }
  .cmp-path-col { padding:24px; }
  .cmp-path-steps li { font-size:.74rem; }
  .cmp-path-steps i { width:44px; height:44px; }
  .is-them .cmp-path-steps li:not(:last-child)::after { top:22px; left:calc(50% + 25px); right:calc(-50% + 22px); }
  .is-us .cmp-path-steps { margin:auto 0 20px; }
  .cmp-why-i { padding:20px 18px; }
  .cmp-why-i b { font-size:1.4rem; }
  .cmp-why-i span { font-size:.8rem; }
}
@media (min-width:900px) {
  .cmp-board.has-2 .cmp-rounds { grid-template-columns:1fr 1fr; }
  .cmp-why-grid { grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
}
/* Ordinateur : vrai tableau, colonne Direct Voiturier en bleu continu */
@media (min-width:768px) {
  .cmp-table { display:table; }
  .cmp-table thead { display:table-header-group; }
  .cmp-table tbody { display:table-row-group; }
  .cmp-table tr { display:table-row; }
  .cmp-table tbody tr { padding:0; border:0; }
  .cmp-table th, .cmp-table td { display:table-cell; vertical-align:middle; }
  .cmp-table thead th:first-child { display:table-cell; }
  .cmp-table thead th { padding:16px 12px 14px; font-size:.86rem; width:30%; }
  .cmp-table thead th.is-us { font-size:1rem; color:#fff; border-radius:18px 18px 0 0;
    background:linear-gradient(180deg, var(--royal) 0%, var(--royal-700) 100%); }
  .cmp-rec { background:#fff; color:var(--royal-800); margin-bottom:6px; font-size:.6rem; }
  .cmp-table th[scope="row"] { display:table-cell; padding:14px 12px; border-top:1px solid #EEF2F6; font-size:.92rem; width:40%; }
  .cmp-table th[scope="row"] i { display:inline-flex; vertical-align:middle; margin-right:10px; }
  .cmp-table td { padding:14px 12px; border-radius:0; background:none; border-top:1px solid #EEF2F6; font-size:.9rem; min-height:0; }
  .cmp-table td > * { margin:0 auto; }
  .cmp-table td small { display:block; margin-top:2px; }
  .cmp-table td.is-us { background:var(--royal-700); box-shadow:none; border-top-color:rgba(255,255,255,.18); font-size:.95rem; }
  .cmp-table tbody tr:last-child td.is-us { border-radius:0 0 18px 18px; box-shadow:0 18px 30px -14px rgba(37,99,235,.6); }
}
@media (prefers-reduced-motion:reduce) {
  .reveal .cmp-track span, .reveal .cmp-win-track > span:not(.cmp-dot) { transition:none; transform:none; }
  .cmp-dot, .reveal.visible .cmp-win::after { animation:none; }
  .cmp-why-i { transition:none; }
}

/* Héros : chiffres de confiance cliquables vers le comparatif + note « * » */
.h-trust-i b small { display:block; font-size:.5em; font-weight:800; letter-spacing:0; color:#475569; line-height:1.2; }
.h-trust-i b sup { font-size:.55em; font-weight:700; margin-left:1px; color:#64748B; }
a.h-trust-i { transition:box-shadow .2s, border-color .2s; }
a.h-trust-i:hover { border-color:var(--blue-light); box-shadow:0 8px 20px rgba(7,74,134,.10); }
.h-trust-note { margin-top:10px; font-size:.62rem; font-weight:400; line-height:1.4; color:rgba(255,255,255,.78); text-align:center; letter-spacing:.01em; }

/* Héros : le H1 SEO est plus long (« Voiturier à l'aéroport Paris-Orly : »).
   Même style, taille ajustée pour que la 1re ligne tienne sur une ligne dès 600 px. */
@media (min-width:600px) { .h-hero h1 { font-size:min(6vw, 4.15rem); } }