/* Cleaneroo — style du site, repris de l'application et des bannières (design/propositions-bannieres). */
:root {
  --canard: #1C5C61;
  --canard-profond: #0E3B40;
  --turquoise: #2A9D93;
  --menthe: #5ED6CB;
  --corail: #FA8C66;
  --or: #F5C451;
  --fond: #EEF3F3;
  --surface: #FFFFFF;
  --creux: #E3EDED;
  --texte: #16343A;
  --texte2: #4A6B6E;
  --texte3: #7E9A9C;
  --separateur: rgba(74, 107, 110, 0.18);
  --succes: #2E9E72;
  --alerte: #D9822B;
  --erreur: #D0485A;
  --rayon: 16px;
  --rayon-l: 24px;
  --ombre: 0 6px 22px rgba(14, 59, 64, 0.10);
  --degrade: linear-gradient(120deg, #128079, #1B97AE 55%, #2F5F8F);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0E1A1B; --surface: #1C2F31; --creux: #152425; --texte: #E4EEEE; --texte2: #A9BEC0; --texte3: #8AA0A2;
    --separateur: rgba(169, 190, 192, 0.22); --ombre: 0 6px 22px rgba(0, 0, 0, 0.35);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 16px/1.5 "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
}
img { max-width: 100%; display: block; }
a { color: var(--turquoise); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { line-height: 1.2; margin: 0; }
h1 { font-size: clamp(28px, 4.4vw, 46px); font-weight: 700; }
h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 700; }
h3 { font-size: 19px; font-weight: 600; }
.conteneur { width: min(1120px, 100% - 32px); margin-inline: auto; }
.etroit { width: min(760px, 100% - 32px); margin-inline: auto; }
.muet { color: var(--texte2); }
.petit { font-size: 13px; color: var(--texte3); }
.masque { display: none !important; }

/* ---------------------------------------------------------------- Fond façon bannière */
.fond-cleaneroo {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(circle at 82% 12%, rgba(255,255,255,.22), transparent 42%),
    radial-gradient(circle at 0% 0%, rgba(250,140,102,.22), transparent 30%),
    linear-gradient(120deg, var(--canard-profond), var(--canard) 45%, var(--turquoise));
}
.fond-cleaneroo > * { position: relative; z-index: 1; }
.fond-cleaneroo .vagues { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 90px; z-index: 0; }
.bulle {
  position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.03) 55%, rgba(255,255,255,.12) 80%, rgba(255,255,255,.42));
  border: 1.5px solid rgba(255,255,255,.45);
}
.bulle::after { content: ""; position: absolute; left: 22%; top: 20%; width: 18%; height: 18%; border-radius: 50%; background: rgba(255,255,255,.8); }
.etincelle { position: absolute; z-index: 0; color: var(--or); font-size: 22px; pointer-events: none; }

/* ---------------------------------------------------------------- En-tête */
.entete { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--canard-profond) 92%, transparent); backdrop-filter: blur(8px); }
.entete .conteneur { display: flex; align-items: center; gap: 12px; height: 64px; }
.marque { display: flex; align-items: center; gap: 6px; text-decoration: none; }
.marque .eponge { width: 44px; height: 40px; object-fit: contain; }
.marque .nom { height: 26px; width: auto; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a { color: #fff; text-decoration: none; padding: 10px 12px; border-radius: 10px; font-weight: 600; font-size: 15px; }
.nav a:hover, .nav a.actif { background: rgba(255,255,255,.14); }
/* Choix de la langue : drapeaux */
.langues { display: flex; gap: 2px; }
#choix-langue { margin-left: auto; }
.drapeau { width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; border-radius: 10px; cursor: pointer; opacity: .55; padding: 0; }
.drapeau svg { width: 24px; height: 16px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.drapeau.choisi, .drapeau:hover { opacity: 1; background: rgba(255,255,255,.14); }
@media (min-width: 861px) { #choix-langue { margin-left: 8px; order: 3; } }
@media (max-width: 860px) { .entete .burger { margin-left: 2px; } }
.burger { display: none; margin-left: auto; background: none; border: 0; color: #fff; font-size: 26px; min-width: 48px; min-height: 48px; cursor: pointer; }
@media (max-width: 860px) {
  .burger { display: block; }
  .nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; padding: 8px 16px 16px; background: var(--canard-profond); }
  .nav.ouvert { display: flex; }
}

/* ---------------------------------------------------------------- Bandeau de lancement (31 décembre 2026) */
.lancement { background: var(--corail); color: #fff; font-size: 14px; }
.lancement .conteneur { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; padding: 9px 0; text-align: center; }
.lancement .compte { background: rgba(255,255,255,.25); border-radius: 999px; padding: 2px 10px; font-weight: 800; }
.lancement a { color: #fff; font-weight: 700; }

/* ---------------------------------------------------------------- Héros */
.heros { padding: 56px 0 120px; }
.heros .grille { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: center; }
.heros .eponge-grande { width: min(420px, 100%); margin-inline: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.25)); }
.heros .nom-blanc { height: clamp(46px, 7vw, 86px); width: auto; }
.trait-corail { width: 64px; height: 6px; border-radius: 3px; background: var(--corail); margin: 14px 0 18px; }
.heros p.slogan { font-size: clamp(20px, 2.6vw, 28px); font-weight: 600; margin: 0 0 8px; }
.heros p.sous { opacity: .9; margin: 0 0 20px; }
@media (max-width: 860px) {
  .heros { padding-top: 28px; }
  .heros .grille { grid-template-columns: 1fr; text-align: center; gap: 12px; }
  .heros .eponge-grande { width: min(240px, 70%); }
  .heros .nom-blanc { margin-inline: auto; }
  .heros .trait-corail { margin-inline: auto; }
  .heros .etiquettes, .heros .boutons { justify-content: center; }
}

.etiquettes { display: flex; flex-wrap: wrap; gap: 8px; }
.etiquette { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.18); font-weight: 600; font-size: 14px; }
.etiquette::before { content: "✓"; font-weight: 700; }

/* ---------------------------------------------------------------- Boutons */
.boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px;
  border-radius: 999px; border: 0; cursor: pointer; font-weight: 700; font-size: 16px; text-decoration: none;
  background: var(--degrade); color: #fff; transition: transform .12s ease, opacity .12s;
}
.bouton:active { transform: scale(.97); }
.bouton:disabled { opacity: .45; cursor: not-allowed; }
.bouton.clair { background: #fff; color: var(--canard); }
.bouton.secondaire { background: color-mix(in srgb, var(--turquoise) 12%, transparent); color: var(--turquoise); border: 1px solid color-mix(in srgb, var(--turquoise) 40%, transparent); }
.bouton.danger { background: color-mix(in srgb, var(--erreur) 12%, transparent); color: var(--erreur); }
.bouton.plein { width: 100%; }
.lien-bouton { background: none; border: 0; color: var(--turquoise); font-weight: 600; cursor: pointer; min-height: 48px; padding: 0 8px; }

/* ---------------------------------------------------------------- Sections et cartes */
section.bloc { padding: 56px 0; }
.titre-section { text-align: center; margin-bottom: 32px; }
.titre-section .trait-corail { margin-inline: auto; }
.carte { background: var(--surface); border-radius: var(--rayon-l); box-shadow: var(--ombre); padding: 22px; border: 1px solid var(--separateur); }
.carte.teintee { background: color-mix(in srgb, var(--turquoise) 10%, var(--surface)); }
.grille-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .grille-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .grille-2, .grille-3 { grid-template-columns: 1fr; } }

.prestation { text-decoration: none; color: inherit; display: block; transition: transform .15s; cursor: pointer; }
.prestation:hover { transform: translateY(-3px); }
.prestation .emoji { font-size: 30px; }

.etapes { display: grid; gap: 14px; }
.etape { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start; }
.etape .pastille { width: 64px; height: 64px; border-radius: 50%; background: var(--canard); color: #fff; display: grid; place-items: center; font-size: 26px; position: relative; }
.etape:nth-child(even) .pastille { background: var(--turquoise); }
.etape .pastille b { position: absolute; right: -6px; top: -6px; width: 26px; height: 26px; border-radius: 50%; background: var(--corail); font-size: 14px; display: grid; place-items: center; }
.etape .surtitre { color: var(--corail); font-size: 13px; font-weight: 700; letter-spacing: .04em; }

.pied { padding: 32px 0 48px; }
.pied .liens { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
.pied a { color: #fff; opacity: .9; }
.stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.badge-store { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 12px; background: #0d2a2d; border: 1px solid rgba(255,255,255,.35); color: #fff; line-height: 1.15; }
.badge-store small { display: block; font-size: 11px; opacity: .85; }
.badge-store b { display: block; font-size: 18px; }

/* ---------------------------------------------------------------- Formulaires (parcours de réservation) */
.progression { display: flex; gap: 4px; margin: 10px 0 18px; }
.progression span { flex: 1; height: 6px; border-radius: 3px; background: var(--creux); }
.progression span.fait { background: var(--turquoise); }
.choix { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 560px) { .choix { grid-template-columns: 1fr; } }
.choix button, .option {
  text-align: left; min-height: 52px; padding: 12px 14px; border-radius: 14px; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--separateur);
}
.choix button.choisi, .option.choisi { border-color: var(--turquoise); background: color-mix(in srgb, var(--turquoise) 10%, var(--surface)); color: var(--turquoise); font-weight: 600; }
.option { display: block; width: 100%; margin-bottom: 8px; }
.option .detail { display: block; font-weight: 400; color: var(--texte2); font-size: 14px; }
.segments { display: flex; background: var(--creux); border-radius: 999px; padding: 4px; }
.segments button { flex: 1; min-height: 44px; border: 0; background: none; border-radius: 999px; cursor: pointer; font-weight: 600; color: var(--texte2); }
.segments button.choisi { background: var(--surface); color: var(--turquoise); box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.compteur { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--separateur); }
.compteur:last-child { border-bottom: 0; }
.compteur .regle { display: flex; align-items: center; gap: 4px; }
.compteur button { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--creux); font-size: 22px; cursor: pointer; }
.compteur output { min-width: 70px; text-align: center; font-weight: 700; }
label.champ { display: block; margin-bottom: 12px; font-weight: 600; font-size: 14px; }
label.champ input, label.champ select, label.champ textarea, input.texte {
  display: block; width: 100%; margin-top: 6px; padding: 12px 14px; min-height: 48px; border-radius: 12px;
  border: 1.5px solid var(--separateur); background: var(--surface); font-weight: 400;
}
label.case { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--separateur); cursor: pointer; }
label.case:last-child { border-bottom: 0; }
label.case input { width: 22px; height: 22px; accent-color: var(--turquoise); flex: none; }
label.case .info { margin-left: auto; color: var(--texte3); font-size: 13px; white-space: nowrap; }
.note { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, #8DB4D8 16%, transparent); color: var(--texte2); font-size: 14px; }
.note::before { content: "i"; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--canard); color: #fff; font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.note.alerte { background: color-mix(in srgb, var(--alerte) 14%, transparent); }
.ligne-montant { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.ligne-montant .note-ligne { display: block; font-size: 12px; color: var(--texte3); }
.ligne-montant.total { border-top: 1px solid var(--separateur); margin-top: 6px; padding-top: 12px; font-weight: 700; font-size: 18px; }
.tampon { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: color-mix(in srgb, var(--corail) 18%, transparent); color: #C7613E; }
.barre-actions { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--fond) 30%); padding: 18px 0 16px; margin-top: 18px; }
.creneaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.creneaux button { min-height: 48px; border-radius: 12px; border: 1.5px solid var(--separateur); background: var(--surface); cursor: pointer; font-weight: 600; }
.creneaux button.choisi { border-color: var(--turquoise); background: var(--turquoise); color: #fff; }
.creneaux button.malin { border-color: var(--succes); }
.creneaux button:disabled { opacity: .35; cursor: not-allowed; }
.jours { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.jours button { flex: none; width: 74px; min-height: 64px; border-radius: 14px; border: 1.5px solid var(--separateur); background: var(--surface); cursor: pointer; }
.jours button.choisi { border-color: var(--turquoise); background: color-mix(in srgb, var(--turquoise) 12%, var(--surface)); color: var(--turquoise); font-weight: 700; }
.vignettes { display: flex; flex-wrap: wrap; gap: 8px; }
.vignettes img { width: 84px; height: 84px; object-fit: cover; border-radius: 12px; }
.erreur { color: var(--erreur); font-size: 14px; }

/* Bandeau d'accueil façon bannière (comme BandeauCleaneroo dans l'app) */
.bandeau { border-radius: var(--rayon-l); padding: 22px; box-shadow: 0 10px 28px rgba(14,59,64,.28); }
.bandeau .tete { display: flex; align-items: center; gap: 10px; }
.bandeau .tete img.eponge { width: 64px; height: 58px; object-fit: contain; }
.bandeau .tete img.nom { height: 28px; width: auto; }

/* ================================================================ Nouvelle génération (4 novembre 2026)
   Fond vivant, réservation express, notifications façon application, comparaison, apparitions au défilement. */

/* En-tête : une seule ligne, langues dans un menu compact */
.nav a { white-space: nowrap; }
@media (min-width: 861px) and (max-width: 1180px) { .nav a { padding: 10px 8px; font-size: 14px; } }
.langues { position: relative; }
.langues > summary { list-style: none; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: 10px; cursor: pointer; color: #fff; font-weight: 700; font-size: 13px; }
.langues > summary::-webkit-details-marker { display: none; }
.langues > summary:hover, .langues[open] > summary { background: rgba(255,255,255,.14); }
.langues .drapeau { width: auto; height: auto; display: inline-grid; opacity: 1; background: none; }
.menu-langues { position: absolute; right: 0; top: calc(100% + 6px); min-width: 170px; padding: 6px; border-radius: 14px; background: var(--surface); box-shadow: 0 14px 40px rgba(0,0,0,.25); display: grid; gap: 2px; z-index: 40; animation: deplie .18s ease-out; }
.menu-langues button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: none; cursor: pointer; color: var(--texte); font-weight: 600; text-align: left; }
.menu-langues button:hover, .menu-langues button.choisi { background: color-mix(in srgb, var(--turquoise) 12%, transparent); color: var(--turquoise); }
@keyframes deplie { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* Fond vivant : bulles qui flottent, étincelles qui scintillent, vagues qui ondulent, bulles qui montent */
.bulle { animation: flotte 9s ease-in-out infinite; }
.bulle:nth-of-type(2) { animation-duration: 12s; animation-delay: -3s; }
.bulle:nth-of-type(3) { animation-duration: 7s; animation-delay: -5s; }
.bulle:nth-of-type(4) { animation-duration: 10s; animation-delay: -1s; }
@keyframes flotte { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(10px, -18px); } 66% { transform: translate(-8px, -8px); } }
.etincelle { animation: scintille 3.2s ease-in-out infinite; }
.etincelle + .etincelle { animation-delay: -1.6s; }
@keyframes scintille { 0%, 100% { opacity: 1; transform: scale(1) rotate(0); } 50% { opacity: .35; transform: scale(.7) rotate(25deg); } }
.fond-cleaneroo .vagues { width: 200%; animation: ondule 18s linear infinite; }
@keyframes ondule { to { transform: translateX(-50%); } }
.monte { position: absolute; bottom: -30px; z-index: 0; border-radius: 50%; pointer-events: none; border: 1.5px solid rgba(255,255,255,.5);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.7) 0 12%, rgba(255,255,255,.06) 40%, rgba(255,255,255,.18)); animation: monte 15s linear infinite; }
@keyframes monte { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .9; } 50% { transform: translate(18px, -45vh); } 90% { opacity: .7; } 100% { transform: translate(-6px, -95vh); opacity: 0; } }

/* Héros */
.titre-heros { font-size: clamp(36px, 6vw, 66px); font-weight: 800; letter-spacing: -.02em; line-height: 1.03; margin: 14px 0 14px; }
.titre-heros .brille { background: linear-gradient(90deg, #fff, var(--menthe), var(--or), #fff); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: reflet 7s ease-in-out infinite; }
@keyframes reflet { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 0; } }
.etiquette.lancee { background: var(--corail); box-shadow: 0 0 0 0 rgba(250,140,102,.6); animation: pulse 2.6s infinite; }
.etiquette.lancee::before { content: "●"; font-size: 10px; }
@keyframes pulse { 70% { box-shadow: 0 0 0 12px rgba(250,140,102,0); } 100% { box-shadow: 0 0 0 0 rgba(250,140,102,0); } }
.heros .grille { grid-template-columns: 1.15fr 1fr; }

/* Réservation express (verre dépoli) */
.express { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 8px; align-items: end; margin: 22px 0 14px; padding: 10px; border-radius: 22px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.express label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; opacity: .95; }
.express label span { padding-left: 10px; }
.express select, .express input { min-height: 52px; border-radius: 14px; border: 0; padding: 0 14px; background: #fff; color: #16343A; font-weight: 600; text-transform: none; letter-spacing: 0; }
.express .bouton { background: linear-gradient(120deg, var(--corail), #F36E5B); box-shadow: 0 10px 24px rgba(243,110,91,.4); }
@media (max-width: 560px) { .express { grid-template-columns: 1fr; } }

/* « Comme la dernière fois » */
.recommander { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 14px; border-radius: 18px; text-decoration: none; color: #fff;
  background: rgba(255,255,255,.12); border: 1px dashed rgba(255,255,255,.45); transition: background .2s, transform .2s; text-align: left; }
.recommander:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); }
.recommander .emoji { font-size: 28px; }
.recommander small { display: block; font-size: 12px; opacity: .8; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.recommander b, .recommander .lieu { display: block; }
.recommander .lieu { font-size: 14px; opacity: .85; }
.recommander .fleche { font-weight: 800; white-space: nowrap; }
.prestation.rapide { border: 1.5px solid color-mix(in srgb, var(--turquoise) 45%, transparent); }
.tampon.vert { background: color-mix(in srgb, var(--succes) 16%, transparent); color: var(--succes); margin-top: 10px; }

/* Scène : éponge qui flotte et notifications de l'application */
.scene { position: relative; min-height: 420px; display: grid; place-items: center; }
.scene .eponge-grande { width: min(380px, 80%); animation: leve 6s ease-in-out infinite; }
@keyframes leve { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-16px) rotate(2deg); } }
.notif { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 16px; color: #16343A; text-align: left;
  background: rgba(255,255,255,.93); backdrop-filter: blur(10px); box-shadow: 0 16px 36px rgba(0,0,0,.22); animation: notif 7s ease-in-out infinite; }
.notif b { display: block; font-size: 14px; }
.notif small { display: block; font-size: 12px; color: #4A6B6E; }
.pastille-notif { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: #E0F2F0; font-size: 18px; }
.notif.n1 { top: 6%; left: -2%; }
.notif.n2 { top: 44%; right: -4%; animation-delay: -2.3s; }
.notif.n3 { bottom: 4%; left: 6%; animation-delay: -4.6s; }
@keyframes notif { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 860px) {
  .heros .grille { grid-template-columns: 1fr; }
  .scene { min-height: 340px; }
  .scene .eponge-grande { width: min(230px, 62%); }
  .notif.n1 { left: 0; } .notif.n2 { right: 0; } .notif.n3 { left: 4%; }
}

/* Chiffres clés */
.chiffres { background: var(--surface); border-bottom: 1px solid var(--separateur); }
.chiffres .conteneur { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 22px 0; text-align: center; }
.chiffres b { display: block; font-size: clamp(24px, 3.4vw, 36px); font-weight: 800; background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chiffres span { color: var(--texte2); font-size: 14px; font-weight: 600; }
@media (max-width: 560px) { .chiffres .conteneur { grid-template-columns: 1fr 1fr; } }

/* Comparaison : à l'ancienne / avec Cleaneroo */
.comparaison { border-radius: var(--rayon-l); overflow: hidden; box-shadow: var(--ombre); border: 1px solid var(--separateur); background: var(--surface); }
.comparaison .ligne { display: grid; grid-template-columns: .8fr 1fr 1.3fr; border-top: 1px solid var(--separateur); }
.comparaison .ligne > * { padding: 14px 18px; }
.comparaison .entete-comp { border-top: 0; font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }
.comparaison .entete-comp span:nth-child(2) { color: var(--texte3); }
.comparaison .entete-comp span:nth-child(3) { color: #fff; background: var(--degrade); }
.comparaison .ancien { color: var(--texte3); }
.comparaison .ancien::before { content: "✕"; color: var(--erreur); font-weight: 800; margin-right: 8px; }
.comparaison .nouveau { font-weight: 600; background: color-mix(in srgb, var(--turquoise) 8%, var(--surface)); }
.comparaison .nouveau::before { content: "✓"; color: var(--succes); font-weight: 800; margin-right: 8px; }
@media (max-width: 700px) {
  .comparaison .entete-comp { display: none; }
  .comparaison .ligne { grid-template-columns: 1fr; }
  .comparaison .ligne > * { padding: 4px 16px; }
  .comparaison .ligne b { padding-top: 14px; }
  .comparaison .nouveau { padding-bottom: 14px; background: none; }
}

/* Cartes plus vivantes */
.prestation { transition: transform .2s ease, box-shadow .2s ease; }
.prestation:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(14,59,64,.16); }

/* Apparitions au défilement */
.revele, .etape { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.revele.visible, .etape.visible { opacity: 1; transform: none; }

/* Respect du réglage « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .revele, .etape { opacity: 1; transform: none; }
  .monte { display: none; }
}

/* ================================================================ Refonte (5 novembre 2026)
   Police Plus Jakarta Sans hébergée sur le site, dégradés propres, héros vivant (aurore, étoiles, notifications),
   cartes plus travaillées. Les règles ci-dessous complètent et remplacent les précédentes. */
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("polices/plus-jakarta-sans.woff2") format("woff2");
}
:root {
  --encre: #08262A;
  --degrade: linear-gradient(135deg, #0F7F78 0%, #1FA39C 48%, #3BB8C4 100%);
  --degrade-corail: linear-gradient(135deg, #FFA273 0%, #F4705C 100%);
  --degrade-texte: linear-gradient(100deg, #9BF5EA 0%, #5ED6CB 35%, #F5D27A 75%, #FFE7A8 100%);
  --degrade-fond: radial-gradient(1200px 500px at 50% -10%, rgba(42,157,147,.10), transparent 70%), var(--fond);
  --ombre: 0 1px 2px rgba(8,38,42,.04), 0 8px 24px rgba(8,38,42,.07);
  --ombre-forte: 0 2px 6px rgba(8,38,42,.06), 0 24px 48px rgba(8,38,42,.14);
  --rayon: 14px; --rayon-l: 22px;
  --fond: #F3F7F7;
}
@media (prefers-color-scheme: dark) {
  :root { --fond: #0B1718; --ombre: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.3); --ombre-forte: 0 24px 48px rgba(0,0,0,.45); }
}
body {
  font-family: "Plus Jakarta Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  font-size: 16px; line-height: 1.6; background: var(--degrade-fond); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3 { letter-spacing: -.02em; }
h1 { font-weight: 800; }
h2 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; line-height: 1.12; }
h3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.centre { text-align: center; }

/* ---------------------------------------------------------------- En-tête */
.entete { background: rgba(8,38,42,.82); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid rgba(255,255,255,.08); }
.entete .conteneur { height: 68px; }
.nav a { font-weight: 600; font-size: 14.5px; color: rgba(255,255,255,.86); transition: color .2s, background .2s; }
.nav a:hover, .nav a.actif { color: #fff; background: rgba(255,255,255,.10); }
.nav a.bouton { background: var(--degrade-corail); color: #fff; box-shadow: 0 6px 18px rgba(244,112,92,.35); margin-left: 6px; }
.nav a.bouton:hover { background: var(--degrade-corail); filter: brightness(1.06); }

/* ---------------------------------------------------------------- Bandeau de lancement */
.lancement { background: linear-gradient(90deg, #F4705C, #FF9A6B 50%, #F4705C); background-size: 200% 100%; animation: glisse 12s linear infinite; font-size: 13.5px; }
.lancement .conteneur { padding: 7px 0; }
.lancement .compte { background: rgba(255,255,255,.95); color: #E2604C; padding: 1px 10px; }
@keyframes glisse { to { background-position: -200% 0; } }

/* ---------------------------------------------------------------- Fond des bannières : dégradé maillé et aurore */
.fond-cleaneroo {
  background:
    radial-gradient(60% 70% at 88% 18%, rgba(94,214,203,.28), transparent 62%),
    radial-gradient(45% 55% at 8% 100%, rgba(250,140,102,.20), transparent 65%),
    radial-gradient(40% 45% at 45% -5%, rgba(59,184,196,.22), transparent 70%),
    linear-gradient(160deg, #06211F 0%, #0B3438 38%, #10504F 72%, #146462 100%);
}
.fond-cleaneroo::after {  /* fin quadrillage de points, estompé vers les bords */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.2px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent); mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent);
}
.aurore { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.aurore i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: aurore 22s ease-in-out infinite alternate; }
.aurore i:nth-child(1) { width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; right: -8%; top: -18%; background: #2FB7AC; }
.aurore i:nth-child(2) { width: 34vw; height: 34vw; max-width: 460px; max-height: 460px; left: -10%; bottom: -24%; background: #F08A6C; opacity: .32; animation-duration: 26s; }
.aurore i:nth-child(3) { width: 28vw; height: 28vw; max-width: 380px; max-height: 380px; left: 38%; top: -20%; background: #3BA4D8; opacity: .28; animation-duration: 30s; }
@keyframes aurore { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-4%, 6%) scale(1.08); } 100% { transform: translate(5%, -3%) scale(.96); } }
.courbe { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 70px; z-index: 1; }
.courbe path { fill: var(--fond); }

/* ---------------------------------------------------------------- Héros */
.heros { padding: 64px 0 150px; }
.heros .grille { grid-template-columns: 1.08fr 1fr; gap: 40px; }
.surtitre-heros { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .01em;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.92); }
.surtitre-heros i { width: 8px; height: 8px; border-radius: 50%; background: #5ED6CB; box-shadow: 0 0 0 4px rgba(94,214,203,.22); animation: pulse-menthe 2.4s infinite; }
@keyframes pulse-menthe { 50% { box-shadow: 0 0 0 8px rgba(94,214,203,0); } }
.titre-heros { font-size: clamp(40px, 6.2vw, 74px); font-weight: 800; letter-spacing: -.035em; line-height: 1.0; margin: 20px 0 18px; }
.titre-heros .brille { background: var(--degrade-texte); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: reflet 9s ease-in-out infinite; }
.heros p.sous { font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.65; color: rgba(255,255,255,.82); max-width: 560px; opacity: 1; }
.express { margin: 28px 0 18px; padding: 10px; border-radius: 22px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 30px 60px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.18); }
.express label { font-size: 11px; letter-spacing: .08em; color: rgba(255,255,255,.8); }
.express select, .express input { border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(8,38,42,.06); }
.express .bouton { background: var(--degrade-corail); min-height: 52px; padding: 0 24px; white-space: nowrap; }
.express .bouton:hover { filter: brightness(1.06); }
.confiance { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 6px 0 0; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.85); }
.confiance li { display: inline-flex; align-items: center; gap: 8px; }
.confiance span { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: 14px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.14); }

/* Scène : halo, orbites, éponge, étoiles animées et notifications qui changent */
.scene { min-height: 470px; }
.scene .halo { position: absolute; width: 74%; aspect-ratio: 1; border-radius: 50%; left: 13%; top: 8%;
  background: radial-gradient(circle, rgba(94,214,203,.45) 0%, rgba(94,214,203,.12) 45%, transparent 70%); filter: blur(8px); animation: respire 6s ease-in-out infinite; }
@keyframes respire { 50% { transform: scale(1.06); opacity: .8; } }
.scene .orbite { position: absolute; width: 88%; aspect-ratio: 1; left: 6%; top: 2%; border-radius: 50%; border: 1px dashed rgba(255,255,255,.18); animation: tourne 60s linear infinite; }
.scene .orbite.o2 { width: 66%; left: 17%; top: 13%; border-style: solid; border-color: rgba(255,255,255,.07); animation-duration: 90s; animation-direction: reverse; }
.scene .orbite::before { content: ""; position: absolute; top: 12%; left: 12%; width: 8px; height: 8px; border-radius: 50%; background: #F5D27A; box-shadow: 0 0 12px #F5D27A; }
@keyframes tourne { to { transform: rotate(360deg); } }
.scene .eponge-grande { position: relative; z-index: 1; width: min(400px, 80%); height: auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,.35)); }
.etoile { position: absolute; z-index: 2; pointer-events: none; transform-origin: center; animation: etoile 3.4s ease-in-out infinite; }
.etoile svg { width: 100%; height: 100%; display: block; overflow: visible; }
.etoile path { fill: #F7D58B; filter: drop-shadow(0 0 6px rgba(247,213,139,.75)); }
.etoile.e2 { animation-duration: 4.2s; animation-delay: -1.4s; }
.etoile.e3 { animation-duration: 2.8s; animation-delay: -.6s; }
.etoile.e4, .etoile.e5, .etoile.e6, .etoile.e7 { animation-name: eclat; animation-duration: 3.6s; }
.etoile.e4 path, .etoile.e6 path { fill: #fff; filter: drop-shadow(0 0 5px rgba(255,255,255,.9)); }
.etoile.e5 { animation-delay: -1.2s; } .etoile.e6 { animation-delay: -2.1s; } .etoile.e7 { animation-delay: -2.9s; }
@keyframes etoile { 0%, 100% { transform: scale(.82) rotate(0deg); opacity: .8; } 50% { transform: scale(1.12) rotate(22deg); opacity: 1; } }
@keyframes eclat { 0%, 100% { transform: scale(0) rotate(0deg); opacity: 0; } 40% { transform: scale(1) rotate(45deg); opacity: 1; } 70% { transform: scale(.4) rotate(90deg); opacity: .5; } }
.notif { z-index: 3; background: rgba(255,255,255,.96); border: 1px solid rgba(255,255,255,.7); border-radius: 18px; padding: 10px 16px 10px 10px; min-width: 228px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 20px 44px rgba(4,30,32,.30); transition: opacity .38s ease, transform .38s ease, filter .38s ease; }
.notif b { font-size: 14px; font-weight: 700; color: #0B2A2E; letter-spacing: -.01em; }
.notif small { font-size: 12.5px; color: #557377; }
.notif.change { opacity: 0; transform: translateY(8px) scale(.97); filter: blur(2px); }
.pastille-notif { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, #E3F7F4, #CBEFEA); box-shadow: inset 0 0 0 1px rgba(42,157,147,.15); }
.notif.n1 { top: 6%; left: -4%; } .notif.n2 { top: 46%; right: -6%; } .notif.n3 { bottom: 2%; left: 4%; }
@media (max-width: 860px) {
  .heros { padding: 36px 0 120px; }
  .heros .grille { gap: 8px; }
  .scene { min-height: 380px; }
  .scene .eponge-grande { width: min(250px, 64%); }
  .notif { min-width: 0; } .notif.n1 { left: 0; } .notif.n2 { right: 0; } .notif.n3 { left: 2%; }
  .confiance { justify-content: center; }
}

/* ---------------------------------------------------------------- Chiffres clés : carte posée sur la courbe */
.chiffres { background: none; border: 0; position: relative; z-index: 2; margin-top: -78px; }
.chiffres .conteneur { display: block; padding: 0; }
.carte-chiffres { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border-radius: var(--rayon-l); box-shadow: var(--ombre-forte); border: 1px solid var(--separateur); }
.carte-chiffres > div { padding: 24px 12px; text-align: center; }
.carte-chiffres > div + div { border-left: 1px solid var(--separateur); }
.carte-chiffres b { display: block; font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
  background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.carte-chiffres span { color: var(--texte2); font-size: 14px; font-weight: 600; }
@media (max-width: 560px) {
  .carte-chiffres { grid-template-columns: 1fr 1fr; }
  .carte-chiffres > div:nth-child(3) { border-left: 0; }
  .carte-chiffres > div:nth-child(n+3) { border-top: 1px solid var(--separateur); }
}

/* ---------------------------------------------------------------- Sections */
section.bloc { padding: 88px 0; }
section.bloc-doux { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--turquoise) 6%, transparent) 30%, transparent); }
.titre-section { margin: 0 auto 44px; max-width: 720px; }
.titre-section .surtitre, .surtitre { display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 12px; }
.titre-section p.muet { font-size: 17px; margin: 12px 0 0; }
.carte { border-radius: var(--rayon-l); box-shadow: var(--ombre); border: 1px solid var(--separateur); }

/* Cartes des prestations */
.prestation { position: relative; padding: 26px; overflow: hidden; }
.prestation::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: var(--degrade); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.prestation:hover { transform: translateY(-6px); box-shadow: var(--ombre-forte); }
.prestation:hover::before { opacity: 1; }
.prestation .icone { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 27px; margin-bottom: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--menthe) 30%, var(--surface)), color-mix(in srgb, var(--turquoise) 12%, var(--surface)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--turquoise) 20%, transparent); }
.prestation p.muet { margin: 6px 0 0; font-size: 15px; }
.prestation .aller { display: inline-block; margin-top: 14px; font-weight: 700; font-size: 14px; color: var(--turquoise); transition: transform .2s; }
.prestation:hover .aller { transform: translateX(4px); }
.prestation .tampon { margin-top: 12px; }

/* Bandeau crédit d'impôt */
.credit { display: flex; gap: 20px; align-items: center; margin-top: 36px; padding: 24px 28px; border-radius: var(--rayon-l); color: #fff;
  background: radial-gradient(80% 140% at 100% 0%, rgba(255,231,168,.35), transparent 60%), var(--degrade-corail); box-shadow: 0 20px 44px rgba(244,112,92,.28); }
.credit h3 { font-size: 21px; }
.credit p { margin: 4px 0 0; opacity: .92; }
.pastille-credit { flex: none; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 19px;
  background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.5); }
@media (max-width: 560px) { .credit { flex-direction: column; text-align: center; } }

/* Boutons */
.bouton { font-weight: 700; letter-spacing: -.005em; box-shadow: 0 8px 20px rgba(15,127,120,.25); transition: transform .15s ease, filter .2s, box-shadow .2s; }
.bouton:hover { filter: brightness(1.05); box-shadow: 0 12px 28px rgba(15,127,120,.32); }
.bouton.clair { box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.bouton.secondaire { box-shadow: none; background: var(--surface); border: 1px solid var(--separateur); color: var(--texte); }
.bouton.secondaire:hover { border-color: color-mix(in srgb, var(--turquoise) 50%, transparent); color: var(--turquoise); }
.bouton.corail { background: var(--degrade-corail); box-shadow: 0 10px 24px rgba(244,112,92,.35); }
.bouton.danger { box-shadow: none; }

/* Comparaison */
.comparaison { box-shadow: var(--ombre-forte); }
.comparaison .entete-comp span:nth-child(3) { background: var(--degrade); }
.comparaison .ligne > * { padding: 16px 22px; }

/* Étapes : frise avec ligne en dégradé */
.etapes { position: relative; gap: 18px; }
.etapes::before { content: ""; position: absolute; left: 31px; top: 32px; bottom: 32px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--turquoise), var(--menthe), var(--corail)); opacity: .5; }
.etape .pastille { background: var(--degrade); box-shadow: 0 10px 22px rgba(15,127,120,.3), 0 0 0 6px var(--fond); }
.etape:nth-child(even) .pastille { background: linear-gradient(135deg, #1B97AE, #2F6FA0); }
.etape .pastille b { background: var(--degrade-corail); box-shadow: 0 0 0 3px var(--fond); }
.etape .surtitre { letter-spacing: .12em; }

/* Appel final avant le lancement */
.appel { padding: 88px 0; }
.appel-grille { display: grid; grid-template-columns: .9fr 1.1fr; gap: 36px; align-items: center; }
.appel h2 { color: #fff; font-size: clamp(30px, 4vw, 48px); }
.appel p { color: rgba(255,255,255,.85); font-size: 17.5px; }
.appel .carte { color: var(--texte); box-shadow: 0 30px 60px rgba(0,0,0,.3); }
@media (max-width: 860px) { .appel-grille { grid-template-columns: 1fr; text-align: center; } .appel .boutons { justify-content: center; } }

/* Pied de page */
.pied { padding: 56px 0 56px; }
.pied .liens a { opacity: .78; text-decoration: none; transition: opacity .2s; }
.pied .liens a:hover { opacity: 1; }

/* Pages intérieures : titres plus soignés */
.fond-cleaneroo h1 { font-size: clamp(32px, 4.8vw, 54px); letter-spacing: -.03em; }
.trait-corail { height: 5px; background: var(--degrade-corail); }

/* Formulaires : champs plus nets */
label.champ input, label.champ select, label.champ textarea, input.texte { border-radius: 12px; transition: border-color .2s, box-shadow .2s; }
label.champ input:focus, label.champ select:focus, label.champ textarea:focus, input.texte:focus, .express select:focus, .express input:focus {
  outline: none; border-color: var(--turquoise); box-shadow: 0 0 0 4px color-mix(in srgb, var(--turquoise) 18%, transparent); }
.choix button, .option { transition: border-color .2s, background .2s; }
.choix button:hover, .option:hover { border-color: color-mix(in srgb, var(--turquoise) 50%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .aurore i, .etoile, .scene .halo, .scene .orbite, .lancement { animation: none !important; }
}

.titre-heros > span { display: block; }
.appel .carte p { color: var(--texte2); font-size: 15px; }
.appel .carte .erreur { color: var(--erreur); }
.appel .carte a { color: var(--turquoise); }
@media (max-width: 860px) {
  .heros .grille { grid-template-columns: 1fr; }
  .scene { margin-top: 18px; }
  .surtitre-heros { font-size: 12px; }
  .notif b { font-size: 13px; } .notif small { font-size: 11.5px; }
  .notif.n2 { top: 52%; }
}

/* Parcours de réservation : « ‹ Retour » en haut de chaque étape */
.tete-etape { display: flex; align-items: center; gap: 12px; }
.tete-etape > span { flex: 1; }
.retour-haut { min-height: 40px; padding: 0 14px 0 10px; border-radius: 999px; border: 1px solid var(--separateur); background: var(--surface);
  color: var(--turquoise); font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: var(--ombre); transition: border-color .2s; }
.retour-haut:hover { border-color: color-mix(in srgb, var(--turquoise) 50%, transparent); }
.barre-actions .bouton.secondaire { white-space: nowrap; flex: none; padding: 0 18px; }

/* Offre de lancement des Cleaneurs */
.offre-lancement { position: relative; overflow: hidden; margin-bottom: 26px; padding: 30px 28px; border-radius: var(--rayon-l); color: #fff;
  background: radial-gradient(70% 90% at 100% 0%, rgba(245,210,122,.28), transparent 60%), linear-gradient(150deg, #0B3438, #10504F 60%, #1A7470);
  box-shadow: var(--ombre-forte); }
.offre-lancement > * { position: relative; z-index: 1; }
.offre-lancement .aurore { z-index: 0; }
.offre-lancement h2 { color: #fff; margin: 14px 0 10px; font-size: clamp(24px, 3vw, 32px); }
.offre-lancement h2, .offre-lancement p { max-width: 620px; }
.offre-lancement p { color: rgba(255,255,255,.85); margin: 0 0 14px; }
.offre-lancement ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.offre-lancement li { position: relative; padding-left: 28px; color: rgba(255,255,255,.92); font-size: 15px; }
.offre-lancement li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: #0B3438; background: linear-gradient(135deg, #9BF5EA, #F5D27A); }

/* En-tête sur écran moyen : seule l'éponge du logo, pour laisser la place au menu */
@media (min-width: 861px) and (max-width: 1080px) { .marque .nom { display: none; } }