/* FranceHost — mise en avant du matériel reconditionné (seconde vie) + pages de contenu. Vert = reconditionné. */
:root { --green: #15803d; --green-l: #ecfdf3; --green-m: #bbf7d0; }

/* Pastille dans le hero (fond sombre) */
.refurb { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: 1.1rem; padding: .3rem .75rem; border: 1px solid rgba(134,239,172,.35); border-radius: 999px; background: rgba(21,128,61,.18); color: #86efac; font: 600 .76rem var(--sans); letter-spacing: .07em; text-transform: uppercase; }
.refurb svg { width: 14px; height: 14px; flex: none; }
.refurb-light { border-color: var(--green-m); background: var(--green-l); color: var(--green); }

/* Étiquette sur chaque offre */
.plan-refurb { align-self: flex-start; margin-bottom: .6rem; padding: .1rem .5rem; border-radius: 4px; background: var(--green-l); border: 1px solid var(--green-m); color: var(--green); font: 600 .7rem var(--sans); letter-spacing: .05em; text-transform: uppercase; }
.plan-pop .plan-refurb { margin-top: .4rem; }

/* Section seconde vie */
.life { display: grid; grid-template-columns: 1.25fr .75fr; gap: 3rem; align-items: start; }
.life h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 1rem; }
.life > div > p { color: var(--muted); max-width: 40rem; }
.life .eyebrow { color: var(--green); }
.steps-life { margin-top: 2rem !important; }
.steps-life li { border-top-color: var(--green); }
.steps-life li::before { color: var(--green); }
@media (max-width: 900px) { .life { grid-template-columns: 1fr; gap: 2rem; } }

/* Fiche matériel, façon étiquette de produit reconditionné */
.label { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.label-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1.25rem; background: var(--green); color: #fff; }
.label-head span { font: 600 .75rem var(--sans); letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.label-head b { font: 700 1.05rem var(--title); }
.label dl { margin: 0; padding: .4rem 1.25rem .6rem; }
.label dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px dashed var(--line-2); }
.label dl div:last-child { border-bottom: 0; }
.label dt { color: var(--muted); font-size: .9rem; }
.label dd { margin: 0; font-weight: 600; font-size: .93rem; text-align: right; color: var(--ink); }

/* Mention TVA */
.tva { margin-top: .5rem; font-size: .82rem; color: var(--soft); }

/* Fil d'Ariane */
.crumbs { margin-bottom: 1rem; font-size: .85rem; color: #cfcfcf; }
.crumbs a { color: #e6e6e6; }
.crumbs a:hover { color: #fff; }

/* Guides et pages de contenu */
.prose { max-width: 46rem; }
.prose h2 { font-size: clamp(1.35rem, 2.3vw, 1.7rem); margin: 2.6rem 0 .8rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.1rem; margin: 1.6rem 0 .5rem; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 1rem; }
.prose li { margin-bottom: .4rem; }
.prose pre { margin: 0 0 1.2rem; padding: 1rem 1.1rem; overflow-x: auto; background: var(--dark); color: #e5e5e5; border-radius: 8px; font: .88rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.prose pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
.note { margin: 1.2rem 0; padding: 1rem 1.2rem; background: var(--blue-l); border-left: 3px solid var(--blue); border-radius: 0 8px 8px 0; color: var(--ink-2); }
.note-green { background: var(--green-l); border-left-color: var(--green); }

/* Tableau comparatif */
.cmp-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.cmp { width: 100%; border-collapse: collapse; font-size: .95rem; }
.cmp th, .cmp td { padding: .8rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp thead th { background: var(--bg); font: 600 .78rem var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.cmp tbody th { font: 600 .95rem var(--sans); color: var(--ink); white-space: nowrap; }
.cmp td { color: var(--ink-2); }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }

/* Liens vers les guides */
.links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.links a { display: block; padding: 1.25rem; background: #fff; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); }
.links a:hover { border-color: var(--blue); color: var(--ink); }
.links b { display: block; font: 700 1.05rem var(--title); margin-bottom: .3rem; }
.links span { font-size: .9rem; color: var(--muted); }
@media (max-width: 800px) { .links { grid-template-columns: 1fr; } }

/* Pied de page à 5 colonnes */
.foot-grid { grid-template-columns: 1.4fr 1fr 1.1fr 1fr 1.2fr; }
@media (max-width: 1000px) { .foot-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 640px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .foot-grid { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .nav-menu { position: static; display: block; border: 0; box-shadow: none; padding: 0 0 .5rem .75rem; min-width: 0; } }

.carte-wrap { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.carte { display: block; width: 100%; height: auto; background: #eef3fb; }
.carte-pays { fill: #e4e1d8; stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; }
.carte-fr { fill: var(--blue); stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; }
.carte-lien path { fill: none; stroke: #fff; stroke-width: 2.5; stroke-dasharray: 2 6; stroke-linecap: round; }
.carte-pt circle { fill: #fff; stroke: var(--ink); stroke-width: 3; }
.carte-pt .halo { fill: rgba(255,255,255,.35); stroke: none; }
.carte-dc circle:not(.halo) { fill: #86efac; stroke: var(--green); }
.carte-label rect { fill: #fff; stroke: var(--line-2); }
.carte-label .t1 { font: 600 15px var(--sans); fill: var(--ink); }
.carte-label .t2 { font: 400 14px var(--sans); fill: var(--muted); }
.carte-label .lead { stroke: var(--ink); stroke-width: 1.5; fill: none; }
.carte-legende { display: flex; flex-wrap: wrap; gap: 1.25rem; padding: .9rem 1.1rem; border-top: 1px solid var(--line); font-size: .88rem; color: var(--muted); }
.carte-legende span { display: inline-flex; align-items: center; gap: .45rem; }
.carte-legende i { width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--ink); background: #fff; }
.carte-legende i.dc { background: #86efac; border-color: var(--green); }
.carte-legende i.fr { border-radius: 3px; border: 0; background: var(--blue); }
.carte-wrap { margin: 0; max-width: 860px; }
@media (max-width: 600px) { .carte-label { display: none; } }

/* Barre de navigation allégée */
.btn-icon { width: 42px; height: 42px; padding: 0; }
.btn-icon svg { width: 19px; height: 19px; }
.nav { gap: 1.75rem; }
.nav-drop.open > button, .nav-drop:has([aria-current]) > button { color: var(--blue); }

/* Logo FranceHost : hexagone + FH. Bleu dans la barre, blanc dans le pied de page ; en saison, la couleur vient du logo lui-même. */
.brand { gap: .75rem; }
.brand-mark.is-svg { background: none; width: 48px; height: 48px; border-radius: 0; color: var(--blue); }
.brand-mark.is-svg svg { width: 100%; height: 100%; overflow: visible; }
.top .brand-name { font-size: 1.45rem; }
.foot .brand-mark.is-svg { color: #fff; width: 44px; height: 44px; }
@media (max-width: 600px) { .brand-mark.is-svg { width: 42px; height: 42px; } .top .brand-name { font-size: 1.3rem; } }
/* « Host » prend la couleur de la saison */
.brand.mark-halloween .brand-name b { color: #ea580c; }
.brand.mark-noel .brand-name b { color: #dc2626; }
.brand.mark-nouvel-an .brand-name b { color: #d97706; }
.brand.mark-saint-valentin .brand-name b { color: #e11d48; }
.brand.mark-paques .brand-name b { color: #7c3aed; }