/* ============================================================ theme-vols.css : l'habillage de la page vols, pose sur les autres pages. Demo du 21/09/2026 (dossier demo-theme-vols/, rien en ligne). Reprend a l'identique le bloc « maquette du 09/09/2026 » de vols-france-thailande.html : bandeau photo sous un voile clair (bleu nuit en sombre), marque et titre centres, grande carte blanche a cheval sur la photo avec la barre de navigation dedans, sections en cartes, pied de page sobre. Se charge en dernier, apres tailwind.min.css et theme-dark.css. Les pages sont recomposees par applique-theme-vols.py (racine du projet). ============================================================ */ :root { --police-titre: 'Fraunces', Georgia, serif; --police-texte: 'Source Sans 3', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif; --e-fond: #eef4fa; --e-carte: #ffffff; --e-bord: #e2ebf4; --e-texte: #12263f; --e-doux: #5b6f86; --e-bleu: #1a6fb5; --e-or: #d9a441; --e-vert: #12855a; --e-violet: #6d4bd0; --e-ombre: 0 1px 2px rgba(16,40,70,.05), 0 10px 30px rgba(16,40,70,.08); --e-ombre-forte: 0 6px 16px rgba(16,40,70,.10), 0 24px 60px rgba(16,40,70,.14); /* Fenetres translucides (demande de Sebastien du 21/09/2026) : la photo et le fond transparaissent derriere les cartes, le texte reste sur un verre depoli. */ --e-verre: rgba(255,255,255,.62); --e-verre-bord: rgba(255,255,255,.75); --e-flou: blur(18px) saturate(1.2); /* La photo du bandeau est le fond de toute la page (demande de Sebastien du 21/09/2026) : fixee derriere, elle glisse jusqu'en bas ; cette teinte la calme sous les fenetres. */ --e-teinte: 238,244,250; --e-teinte-a: .60; } /* Le site pose data-theme="dark" des l'ouverture (script d'en-tete) : la feuille ne lit que cet attribut, comme theme-dark.css. */ html[data-theme="dark"] { --e-fond: #0c1a2b; --e-carte: #14263c; --e-bord: #2a4462; --e-texte: #e4edf8; --e-doux: #a4b7cd; --e-bleu: #6ab8f5; --e-or: #e8b45c; --e-vert: #4ade80; --e-violet: #a48bf0; --e-ombre: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35); --e-ombre-forte: 0 6px 16px rgba(0,0,0,.45), 0 24px 60px rgba(0,0,0,.5); --e-verre: rgba(20,38,60,.58); --e-verre-bord: rgba(120,150,190,.28); --e-teinte: 12,26,43; --e-teinte-a: .66; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--e-fond); } body { margin: 0; border-top: 3px solid var(--e-or); background: transparent !important; color: var(--e-texte); min-height: 100vh; } html[data-theme="dark"] body { background: transparent !important; } /* Tout ce qui suit le bandeau repose sur la photo teintee. flow-root : sans lui, la marge negative de .scene (-196px) fusionnait avec celle de ce bloc et remontait la teinte de 196 px sur le bas du bandeau, d'ou une bande plus foncee de part et d'autre de la carte, a partir de son bord haut (remarque de Sebastien du 22/09/2026). La teinte commence maintenant au pied du bandeau, ou .hero::after l'a deja rejointe. */ .page-teinte { background: rgba(var(--e-teinte), var(--e-teinte-a)); display: flow-root; } /* La marge basse laisse la derniere fenetre au-dessus des boutons flottants. */ .enveloppe { max-width: 1240px; margin: 0 auto; padding: 0 max(24px, 3vw) 110px; } /* ---- Bandeau photo ---- */ /* Le bandeau grandit avec son texte (un titre de trois lignes ne passe pas sous la carte) ; la photo est posee derriere, en fond, et garde le cadrage de la page vols. */ .hero { position: relative; min-height: 560px; display: flex; flex-direction: column; } /* Le cadre fixe de la photo couvre l'ecran et rogne ce qui depasse (la photo est plus haute que l'ecran et legerement agrandie par la parallaxe) : rien ne deborde jamais. */ .hero picture { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; overflow: hidden; z-index: -1; display: block; } .hero-photo { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 160vh; object-fit: cover; object-position: 50% 45%; will-change: transform; transform-origin: 50% 50%; } /* Le voile est celui de la page vols, aux memes valeurs : blanc en clair, bleu nuit en sombre, fort en haut et a gauche, fondu vers la photo. Ses paliers verticaux sont ancres sur le bas du bloc de texte (identiques a la page vols sur le bureau, ils suivent le titre sur un telephone). Il s'efface vers le bas du bandeau (masque), et seul le bas du bandeau se fond dans la teinte de la page (.hero::after) : pas de bande a la jonction, et rien d'autre sur la photo que le voile de la page vols (remarque de Sebastien du 21/09/2026). */ .hero-voile { position: absolute; inset: 0; --voile-bas: 236px; background: linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.72) calc((100% - var(--voile-bas)) * .64), rgba(255,255,255,.30) calc(100% - var(--voile-bas)), rgba(255,255,255,0) calc(100% - var(--voile-bas) + 100px)), linear-gradient(90deg, rgba(255,255,255,.80) 0%, rgba(255,255,255,.25) 42%, rgba(255,255,255,0) 70%); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,0) 100%); } html[data-theme="dark"] .hero-voile { background: linear-gradient(180deg, rgba(12,26,43,.90) 0%, rgba(12,26,43,.74) calc((100% - var(--voile-bas)) * .64), rgba(12,26,43,.34) calc(100% - var(--voile-bas)), rgba(12,26,43,0) calc(100% - var(--voile-bas) + 100px)), linear-gradient(90deg, rgba(12,26,43,.80) 0%, rgba(12,26,43,.28) 42%, rgba(12,26,43,0) 70%); } /* Le bas du bandeau rejoint la teinte de la page, comme la page vols rejoint son fond uni (son troisieme degrade, sur 26 % de la hauteur). */ .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; z-index: 0; pointer-events: none; background: linear-gradient(0deg, rgba(var(--e-teinte), var(--e-teinte-a)) 0%, rgba(var(--e-teinte), var(--e-teinte-a)) 12%, rgba(var(--e-teinte), 0) 100%); } .hero-dedans { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 34px 20px 236px; text-align: center; } .hero-marque { margin: 0; text-align: center; } .hero-marque > a { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--police-titre); font-size: 30px; font-weight: 600; color: var(--e-texte); letter-spacing: -.01em; text-decoration: none; } .hero-marque > a:hover { color: var(--e-bleu); } .hero-marque > a:focus-visible { outline: 2px solid var(--e-bleu); outline-offset: 4px; border-radius: 6px; } .logo-site { width: 30px; height: 30px; border-radius: 50%; flex: none; align-self: center; box-shadow: 0 0 0 2px var(--e-or); } .hero-tagline { margin: 5px 0 0; font-size: 11.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--e-doux); } .hero h1 { font-family: var(--police-titre); font-size: clamp(34px, 4.6vw, 62px); line-height: 1.06; font-weight: 600; letter-spacing: -.02em; margin: 26px 0 0; max-width: 26ch; color: var(--e-texte); } .hero h1 span { color: inherit; } .hero-accroche { margin: 12px 0 0; font-size: clamp(15px, 1.5vw, 21px); color: var(--e-doux); letter-spacing: .01em; max-width: 62ch; line-height: 1.4; } html[data-theme="dark"] .hero-tagline, html[data-theme="dark"] .hero-accroche { color: var(--e-doux); } html[data-theme="dark"] .hero h1 { color: var(--e-texte); } /* Les cinq mots de gauche : decor, effaces des que la largeur ne les porte plus. */ .hero-mots { position: absolute; left: max(12px, calc(50% - 614px)); top: 190px; margin: 0; padding: 0; list-style: none; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; text-align: left; } .hero-mots li + li { margin-top: 12px; } .hero-mots a { color: var(--e-doux); text-decoration: none; opacity: .85; } .hero-mots a[aria-current="page"] { color: var(--e-texte); opacity: 1; font-weight: 600; } .hero-mots a:hover { opacity: 1; text-decoration: underline; } @media (max-width: 1100px) { .hero-mots { display: none; } } /* ---- La grande carte, a cheval sur la photo ---- */ .scene { position: relative; z-index: 2; margin-top: -196px; display: flex; justify-content: center; } .carte-outil { position: relative; width: 100%; max-width: 1080px; background: var(--e-verre); border: 1px solid var(--e-verre-bord); border-radius: 20px; box-shadow: var(--e-ombre-forte); padding: 0 0 20px; -webkit-backdrop-filter: var(--e-flou); backdrop-filter: var(--e-flou); } .mini-nav { position: relative; display: flex; align-items: center; gap: 22px; padding: 15px 26px; border-bottom: 1px solid var(--e-bord); } /* Les feuilles des pages habillent #header en bandeau sombre (degrade, ombre portee, fond au defilement) : ici la barre vit dans la carte blanche. */ .carte-outil #header { background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; border-bottom: 1px solid var(--e-bord); } .carte-outil #header * { text-shadow: none !important; } .mini-nav .marque { display: flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--police-titre); font-size: 19px; font-weight: 600; color: var(--e-texte); } .mini-nav .marque .logo-site { width: 22px; height: 22px; } .mini-nav-liens { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 20px; flex-wrap: nowrap; } .mini-nav-fin { margin-left: auto; display: flex; align-items: center; gap: 10px; } .mini-nav-liens a { white-space: nowrap; color: var(--e-doux); text-decoration: none; font-size: 14.5px; } .mini-nav-liens a:hover, .mini-nav-liens a[aria-current="page"] { color: var(--e-texte); } .mini-nav-liens a[aria-current="page"] { font-weight: 600; } #theme { font-size: 12.5px; padding: 5px 10px; color: var(--e-doux); cursor: pointer; background: transparent; border: 1px solid var(--e-bord); border-radius: 999px; font-family: inherit; } #theme:hover { color: var(--e-texte); border-color: var(--e-bleu); } /* La loupe du site est dessinee pour l'entete sombre : sur la carte blanche, son or et son ombre portee font une tache. Son repli absolu se remet dans le flux. */ .mini-nav .ct-s-bouton { color: var(--e-texte); } .mini-nav .ct-s-bouton svg { filter: none; } .mini-nav .ct-s-bouton.ct-s-repli { position: static; } @media (max-width: 820px) { /* Les liens de la barre passent a la ligne : d'un seul tenant, ils debordaient. */ .mini-nav { flex-wrap: wrap; gap: 10px 12px; } .mini-nav-liens { position: static; transform: none; order: 3; flex-basis: 100%; flex-wrap: wrap; gap: 14px; } } .zone-carte { padding: 20px 26px 0; } /* Accueil : la grille des thematiques vit dans la carte, sans les marges de section. */ .zone-carte .zone-accueil > div[class*="max-w-"] { padding-left: 0; padding-right: 0; } .zone-carte .zone-accueil .text-center { margin-bottom: 22px; } /* Article : fil d'Ariane et date, chapeau, sommaire. */ .zone-article { max-width: 680px; margin: 0 auto; } .zone-meta, .zone-extras { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 16px; font-size: 13px; color: var(--e-doux); } .zone-extras > * { margin: 0; } .zone-extras a:not([class*="bg-"]) { color: var(--e-bleu); } .zone-extras .flex { display: flex; } .zone-meta .zone-fil { display: inline-flex; align-items: center; gap: 6px; } .zone-meta .zone-fil a { color: var(--e-bleu); text-decoration: none; } .zone-meta .zone-fil a:hover { text-decoration: underline; } .zone-chapeau p { font-size: 17px; line-height: 1.65; color: var(--e-texte); margin: 0 0 14px; } .zone-sommaire { margin-top: 6px; } .zone-sommaire > p { font-size: 13px; font-weight: 600; color: var(--e-doux); margin: 0 0 10px; } .zone-sommaire .flex { gap: 8px; } /* ---- Les sections deviennent des cartes posees sur le fond ---- */ main { display: block; } main > section, .bloc-section { max-width: 1080px; margin: 18px auto 0; } .bloc-section--carte, .bloc-section--nu { background: var(--e-verre); border: 1px solid var(--e-verre-bord); border-radius: 20px; box-shadow: var(--e-ombre); padding: 32px 40px 28px; -webkit-backdrop-filter: var(--e-flou); backdrop-filter: var(--e-flou); } /* Les sections qui portent deja des cartes : meme verre, marges plus courtes. */ .bloc-section--nu { padding: 26px 40px 30px; } /* Une section minuscule (compteur, filet) reste posee a nu sur le fond. */ .bloc-section--libre { padding: 6px 0 0; } /* Les blocs bleu nuit restent bleu nuit : leur texte est blanc. */ /* Les blocs bleu nuit gardent leurs marges verticales d'origine (classes py-*) : sans elles, le bouton touchait le bas du bloc (remarque de Sebastien sur l'accueil). */ .bloc-section--nuit { border-radius: 20px; overflow: hidden; box-shadow: var(--e-ombre-forte); border: 0; } /* Seuls les conteneurs de mise en page (max-w-*) perdent leur marge laterale : un encadre pose directement dans la section garde la sienne (texte au bord de la boite sur songkran). */ .bloc-section > div[class*="max-w-"] { padding-left: 0; padding-right: 0; } .bloc-section--nuit > div[class*="max-w-"] { padding-left: 40px; padding-right: 40px; } .bloc-section--nuit > .absolute { padding: 0; } .partenaires { padding: 22px 24px 18px; } /* ---- Article : une carte par section, colonne de lecture centree ---- */ .guide { margin-top: 18px; } .bloc-guide { background: var(--e-verre); border: 1px solid var(--e-verre-bord); border-radius: 20px; box-shadow: var(--e-ombre); padding: 32px 40px 28px; margin-bottom: 18px; -webkit-backdrop-filter: var(--e-flou); backdrop-filter: var(--e-flou); } .bloc-guide.bloc-or { border-color: var(--e-or); } /* La colonne de lecture est definie une fois, sur la carte : tous ses enfants (titres, texte, images, encadres) partagent le meme bord gauche. Centres un par un avec une largeur en « ch », ils se decalaient les uns des autres (remarque de Sebastien sur la page visa). */ .bloc-guide { padding-left: max(40px, calc(50% - 340px)); padding-right: max(40px, calc(50% - 340px)); } .bloc-guide h2 { font-family: var(--police-titre); font-size: 25px; font-weight: 600; letter-spacing: -.01em; margin: 0 auto 18px; justify-content: center; text-align: center; } .bloc-guide h3 { font-size: 17px; font-weight: 650; margin: 24px auto 6px; } .bloc-guide h3 + p { margin-bottom: 20px; } .bloc-guide p { margin: 0 auto 14px; line-height: 1.68; } .bloc-guide ul, .bloc-guide ol { margin: 0 0 18px; padding-left: 22px; line-height: 1.62; } .bloc-guide li { margin-bottom: 8px; } /* Tailwind retire les numeros des listes : une liste ordonnee sans classe les retrouve (quatre points scooter de la page assurance). */ :where(.bloc-guide, .bloc-section, .zone-carte) ol:not([class]) { list-style: decimal; } .bloc-guide a { color: var(--e-bleu); } .bloc-guide > :last-child, .bloc-guide .prose-article > :last-child { margin-bottom: 0; } .prose-article .bloc-guide > h3:first-child { margin-top: 0; } /* Un decor qui deborde de sa carte (halo anime, ombre) y reste rogne : `clip` ne fait pas de la carte une zone de defilement, les elements collants continuent de fonctionner. */ .bloc-guide, .bloc-section--carte, .bloc-section--nu, .partenaires { overflow: clip; } /* Un tableau pose a nu dans une carte defile de lui-meme au lieu d'elargir la page. */ /* Sur un telephone seulement : un tableau plus large que l'ecran defile, il ne deborde pas. Sur un ecran large, « display:block » reduisait le tableau a sa largeur naturelle (quartiers-bangkok : 60 % de la fenetre, cale a gauche sous un titre centre, « le tableau est croche », retour de Sebastien du 22/09/2026) : il redevient un tableau et prend toute la largeur. */ @media (max-width: 760px) { .bloc-guide .prose-article > table, .bloc-guide > table, .bloc-section > table { display: block; max-width: 100%; overflow-x: auto; } } @media (min-width: 761px) { .bloc-guide .prose-article > table, .bloc-guide > table, .bloc-section > table { display: table; width: 100%; max-width: 100%; } } /* Meme chose dans la carte flottante (tableau de choix des visas). */ @media (max-width: 760px) { .zone-carte table { display: block; max-width: 100%; overflow-x: auto; } } @media (min-width: 761px) { .zone-carte table { display: table; width: 100%; max-width: 100%; } } /* Tableaux de fiches sur un ecran large : la meme mise en forme que les tableaux de prix du site (en-tete bleu, filets entre les lignes, lignes paires voilees). Sans elle, les tableaux de la page visa sortaient en texte nu (« c'est le bordel », retour de Sebastien du 22/09/2026). */ .tableau-fiches { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 1rem 0; } .tableau-fiches thead th { background: #064c85; color: #fff; text-align: left; padding: .7rem .8rem; font-weight: 600; } .tableau-fiches thead th:first-child { border-radius: 8px 0 0 0; } .tableau-fiches thead th:last-child { border-radius: 0 8px 0 0; } .tableau-fiches tbody td { padding: .7rem .8rem; border-top: 1px solid var(--e-bord); color: var(--e-texte); } .tableau-fiches tbody td:first-child { font-weight: 650; } .tableau-fiches tbody tr:nth-child(even) { background: rgba(255,255,255,.38); } html[data-theme="dark"] .tableau-fiches thead th { background: #1e3550; } html[data-theme="dark"] .tableau-fiches tbody tr:nth-child(even) { background: rgba(255,255,255,.06); } /* Tableau de fiches (choix d'un visa, niveaux Privilege, visas retraite) : sur un telephone, chaque ligne devient un petit encadre, l'en-tete de colonne repris devant chaque valeur (attribut data-l), au lieu de colonnes de quatre mots de large. */ .tableau-fiches th, .tableau-fiches td { vertical-align: top; } @media (max-width: 760px) { .tableau-fiches, .tableau-fiches tbody, .tableau-fiches tr, .tableau-fiches td { display: block; } .tableau-fiches thead { display: none; } .tableau-fiches tr { border: 1px solid var(--e-bord); border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; background: transparent !important; } .tableau-fiches td { padding: 2px 0 !important; border: 0 !important; background: transparent !important; } .tableau-fiches td:first-child { font-weight: 650; padding-bottom: 4px !important; } .tableau-fiches td[data-l]::before { content: attr(data-l) " : "; font-weight: 600; color: var(--e-doux); } } /* Une carte qui porte une grille, un tableau, un comparateur ou des cartes prend toute la largeur : dans la colonne de lecture, les 16 fiches du comparateur se tassaient. */ .bloc-guide--large { padding-left: 40px; padding-right: 40px; } /* Une fiche decoupee en plusieurs cartes (les plats de plats-sains : photo et titre, calories et texte, conseil, prix) reste reunie dans une fenetre a elle ; ses cartes deviennent des sous-boites posees dans la fenetre, sans flou (demande de Sebastien du 21/09/2026). */ .fiche-groupe { display: block; background: var(--e-verre); border: 1px solid var(--e-verre-bord); border-radius: 24px; box-shadow: var(--e-ombre); padding: 14px; margin-bottom: 18px; overflow: clip; -webkit-backdrop-filter: var(--e-flou); backdrop-filter: var(--e-flou); } .fiche-groupe > .bloc-guide { background: rgba(255,255,255,.55); border-color: rgba(255,255,255,.9); border-radius: 16px; box-shadow: 0 1px 2px rgba(16,40,70,.05); margin-bottom: 12px; -webkit-backdrop-filter: none; backdrop-filter: none; } .fiche-groupe > .bloc-guide:last-child { margin-bottom: 0; } html[data-theme="dark"] .fiche-groupe > .bloc-guide { background: rgba(255,255,255,.06); border-color: rgba(120,150,190,.22); } @media (max-width: 760px) { .fiche-groupe { padding: 8px; border-radius: 18px; } .fiche-groupe > .bloc-guide { border-radius: 12px; margin-bottom: 8px; } } /* Un conteneur garde pour son identifiant (grille du comparateur, cible d'ancre) ne dessine pas une boite dans la carte. */ .bloc-guide > [id], .bloc-guide > .prose-article > [id] { border: 0 !important; background: transparent !important; box-shadow: none !important; } /* Etats choisis ou survoles, en sombre : le voile blanc des sous-boites effacait le bleu du filtre presse et du choix du quiz (remarque de Sebastien). */ html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) :is([aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .actif, .selected, .cmp-opt[aria-pressed="true"]) { background-color: #0070c7 !important; border-color: #5ab0f0 !important; color: #fff !important; } html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) :is(.quiz-option:hover, .quiz-option:focus, .cmp-opt:hover, button.pays-pastille:hover) { background-color: rgba(0,112,199,.38) !important; border-color: #5ab0f0 !important; color: #fff !important; } /* ---- Le texte ---- */ main h2, main h3 { color: var(--e-texte); } .bloc-section--nuit h2, .bloc-section--nuit h3 { color: #fff; } .text-ocean-900, .text-ocean-800 { color: var(--e-texte) !important; } .text-ocean-600, .text-ocean-700, .text-ocean-500 { color: var(--e-doux) !important; } .bloc-section--nuit .text-ocean-200, .bloc-section--nuit .text-white\/90 { color: #dbe7f5 !important; } .bloc-section--nuit .text-ocean-500 { color: #b9c9dc !important; } /* ---- Le pied de page : logo, colonnes de liens, mentions, dans une fenetre en verre ---- */ .pied { max-width: 1080px; margin: 44px auto 0; padding: 30px 36px 24px; background: var(--e-verre); border: 1px solid var(--e-verre-bord); border-radius: 20px; -webkit-backdrop-filter: var(--e-flou); backdrop-filter: var(--e-flou); font-size: 13.5px; color: var(--e-doux); } .pied-haut { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 22px 28px; margin-bottom: 22px; } .pied-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--police-titre); font-size: 21px; font-weight: 600; color: var(--e-texte); } .pied-logo img { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 2px var(--e-or); } .pied-logo b { font-weight: 600; color: var(--e-or); } .pied-marque p { margin: 10px 0 0; max-width: 28ch; line-height: 1.5; } .pied-titre { margin: 4px 0 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--e-doux); } .pied-colonne a { display: block; margin: 0 0 7px; } .pied a { color: var(--e-bleu); text-decoration: none; } .pied a:hover, .pied a:focus-visible { text-decoration: underline; } .pied-mention { font-size: 12.5px; line-height: 1.6; margin: 0 0 10px; max-width: 92ch; } .pied-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; padding-top: 12px; border-top: 1px solid var(--e-verre-bord); }/* Les vignettes a image de fond en ligne (.related-card-img des cartes « A lire aussi », .itin-thumb, .popup-image-fallback) sont retirees de cette liste : « background-image: none » effacait leur photo en sombre sur 60 pages (retour de Sebastien du 22/09/2026). */ /* ---- Sous-boites dans les fenetres (sombre) ---- */ /* theme-dark.css peint les fonds clairs du site (bg-white, bg-ocean-50, encadres bleu-blanc, tableaux) en bleu nuit opaque : sur le verre depoli, ces aplats faisaient des rectangles (remarque de Sebastien sur la page budget). Dans une fenetre, ils deviennent un voile blanc leger, comme le verre. Liste tiree de theme-dark.css (159 selecteurs), avec `body` en plus pour passer devant les regles des pages. */ html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .affiliation-bloc, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .ajarn-card, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .answer-bloc, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .app-card, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .aqi-tile, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .aqi-tile.aqi-error, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .aqi-unhealthy, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .aqi-very, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .aqi-very-unhealthy, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .article-card, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .avis-wrapper, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .badge-blue, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .bg-blue-50, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .bg-gray-100, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .bg-gray-50, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .bg-ocean-100, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .bg-ocean-50, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .bg-ocean-50\/30, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .bg-ocean-50\/40, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .bg-ocean-50\/50, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .bg-sand-100, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .bg-sand-200, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .bg-sand-50, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .bg-slate-50, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .bg-white, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .bloc-blue, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .bloc-concret, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .bloc-ocean, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .bloc-red, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .bloc-sand, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .bloc-texte, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .btn-clear:hover:not(:disabled), html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .card, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .cat-filter, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .checklist-bloc-blue, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .checklist-bloc-red, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .checklist-bloc-sand, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .cmp-carte, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .cmp-compteur, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .cmp-opt, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .comparison-table-wrap, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .conseil-bloc, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .conseil-box, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .date-card, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .date-input, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .dd-opt:hover, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .encart-affilie, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .event-card, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .eviter-section, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .faq-item, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .form-input, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .info-bloc, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .info-bloc-title, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .info-box, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .itin-item, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .kcal-bar, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .logement-bloc, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .logement-hotel-bloc, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .meteo-card, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .meteo-day, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .meteo-skeleton, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .mini-meteo-card, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .mois-bad, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .mois-rain, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .nav-pill, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .parcours-card, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .pharma-item, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .place-card, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .plat-card, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .pm-etape, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .poste-card, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .pro-con, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .quick-btn, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .quiz-option, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .red-bloc, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .related-card, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .resto-bloc, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .result-card, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .result-display, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .sand-bloc, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .sand-texture, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .scenario-card, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .section-bloc, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .shop-bloc, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .summary-bloc, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .sw-addon-row, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .sw-age-btn, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .tag-blue, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .tip-bloc, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .toc-bloc, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .toggle-all-btn, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .update-badge, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .urgence-badge, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .vc, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .vecu, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .visa-section, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .wb-haze, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .wb-hot, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .wb-rain, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) .wb-storm, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background-color:#eff6ff"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background-color:#eff8ff"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background-color:#f0f2ff"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background-color:#f0f7ff"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background-color:#f0f9ff"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background-color:#f0fdff"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background-color:#f4fef5"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background-color:#f8fbff"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background-color:#f9f7ff"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background-color:#faf5ff"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background-color:#fafcff"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background-color:#fdf4ff"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background-color:#fdf8ff"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background-color:#fef2f2"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background-color:#fef6fb"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background-color:#fef8ff"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background-color:#fefcf5"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background-color:#fff"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background-color:#fff5f5"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background-color:#fff8f8"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background-color:#ffffff"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background-color:white"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background:#e0effe"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background:#eff6ff"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background:#eff8ff"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background:#f0f2ff"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background:#f0f7ff"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background:#f0f9ff"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background:#f0fdff"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background:#f4fef5"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background:#f5f9ff"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background:#f8fbff"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background:#f9f7ff"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background:#faf5ff"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background:#fafcff"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background:#fdf4ff"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background:#fdf8ff"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background:#fef2f2"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background:#fef6fb"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background:#fef8ff"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background:#fefcf5"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background:#fff"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background:#fff5f5"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background:#fff8f8"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background:#ffffff"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) [style*="background:white"], html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) blockquote, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) table, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) table td:first-child, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) table th, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) table tr:nth-child(even), html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) tbody, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) td, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) th, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) thead, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) tr { background-color: rgba(255,255,255,.06) !important; background-image: none !important; } html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) :is(.bg-ocean-900, .bg-ocean-800, .bg-ocean-950, [style*="background:#0a1e3d"], [style*="background:#071528"], [style*="background:#0c2d52"], [style*="background-color:#0a1e3d"], div[class*="cta-"], div[class*="-cta"], .event-month) { background-color: rgba(255,255,255,.10) !important; } html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) :is(table th, thead) { background-color: rgba(255,255,255,.10) !important; } html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-guide, .partenaires) :is(table tr:nth-child(even)) { background-color: rgba(255,255,255,.03) !important; } /* Memes aplats, ecrits dans les feuilles propres des pages (13 selecteurs relevés dans public/*.html) : meteo, convertisseur, comparateur... */ html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-section--libre, .bloc-guide, .partenaires) .cmp-carte, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-section--libre, .bloc-guide, .partenaires) .cmp-compteur, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-section--libre, .bloc-guide, .partenaires) .cmp-filtres, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-section--libre, .bloc-guide, .partenaires) .cmp-stat, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-section--libre, .bloc-guide, .partenaires) .cmp-tableau td:first-child, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-section--libre, .bloc-guide, .partenaires) .cmp-tableau th:first-child, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-section--libre, .bloc-guide, .partenaires) .cmp-tableau-bloc, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-section--libre, .bloc-guide, .partenaires) .cv-row, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-section--libre, .bloc-guide, .partenaires) .cv-row.actif, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-section--libre, .bloc-guide, .partenaires) .faq-contrat details, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-section--libre, .bloc-guide, .partenaires) .faq-contrat summary:hover, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-section--libre, .bloc-guide, .partenaires) .meteo-card, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-section--libre, .bloc-guide, .partenaires) .meteo-skeleton, html[data-theme="dark"] body :is(.zone-carte, .bloc-section--carte, .bloc-section--nu, .bloc-section--libre, .bloc-guide, .partenaires) details.esp { background-color: rgba(255,255,255,.06) !important; background-image: none !important; } /* ---- Comparateur d'assurances (demande de Sebastien du 21/09/2026) ---- */ /* Deux fiches cote a cote a toutes les largeurs, telephone compris ; fiches de meme hauteur ; les boutons bleus « Voir l'offre » alignes en bas, en face l'un de l'autre. */ #cmp-liste { grid-template-columns: 1fr 1fr !important; align-items: stretch !important; gap: 1rem !important; } .cmp-carte { display: flex; flex-direction: column; } .cmp-carte .cmp-lignes { flex: 1 1 auto; } .cmp-carte .cmp-actions { margin-top: auto; padding-top: .7rem; } /* La colonne « Critere » du tableau reste opaque quand on fait defiler : le voile des sous-boites la rendait translucide et les colonnes passaient dessous. */ .cmp-tableau th:first-child, .cmp-tableau td:first-child { background-color: var(--e-carte) !important; } html[data-theme="dark"] body .page-teinte .cmp-tableau :is(th, td):first-child { background-color: #17293f !important; box-shadow: 2px 0 0 #2a4259 !important; } html[data-theme="dark"] body .page-teinte .cmp-tableau thead th:first-child { background-color: #1e3550 !important; } @media (max-width: 760px) { .cmp-carte { padding: .65rem .6rem .7rem; border-radius: .9rem; } .cmp-tete { grid-template-columns: auto 1fr; gap: .4rem .5rem; } .cmp-tete h3 { font-size: .88rem; } .cmp-prix-grand { grid-column: 1 / -1; text-align: left; max-width: none; } .cmp-prix-grand b { font-size: 1.05rem; } .cmp-type, .cmp-prix, .cmp-lignes, .cmp-l-lab, .cmp-l-val { font-size: .72rem; } .cmp-actions a { font-size: .74rem; padding: .45rem .6rem; } } /* ---- Boites dont le texte touchait le bord (audit du 21/09/2026) ---- */ /* Encadres que leur page ne dote pas d'une marge interieure (course a pied, immobilier) : une marge par defaut, en specificite nulle pour laisser la page l'emporter quand elle en definit une. */ :where(.bloc-guide, .bloc-section, .zone-carte) :where(.info-bloc, .warning-bloc, .warn-bloc, .sand-bloc, .tip-bloc, .danger-bloc, .green-bloc, .red-bloc, .section-bloc, .answer-bloc, .affiliation-bloc) { padding: .9rem 1.1rem; border-radius: .8rem; } /* Citation posee hors article : meme retrait que dans l'article. */ .bloc-guide blockquote, .bloc-section blockquote { padding-left: 1.25rem; border-left: 3px solid var(--e-or); } /* Ligne TOTAL du budget : surlignee, donc une marge interieure. */ .budget-row[class*="bg-"] { padding-left: .75rem; padding-right: .75rem; } /* theme-dark.css retire la marge d'un encadre emboite dans une boite (immobilier) : remise. */ html[data-theme="dark"] body .page-teinte :is(.logement-bloc, .logement-hotel-bloc) > .info-bloc { padding: .9rem 1.1rem !important; } /* Questions de la FAQ (voyage leger) : un filet sous chaque question, pas une bande. */ html[data-theme="dark"] body .page-teinte .faq-item { background-color: transparent !important; } /* Blocs d'appel a l'action (bouton d'affiliation en enfant direct de la fenetre, sous un titre centre) : le script du theme a laisse le titre centre mais pose le bouton et le texte a gauche ; tout le bloc est centre, comme la section d'origine (retour de Sebastien du 22/09/2026 : « centre le bouton », billet-retour au telephone). */ .bloc-guide:has(> a.cta-btn), .bloc-guide:has(> a.cta-primary) { text-align: center; } /* Leurs titres et textes etaient blancs ou bleu pale pour l'ancien fond bleu nuit : sur la fenetre claire ils disparaissaient (wise, retour de Sebastien du 22/09/2026). Couleurs du theme, en clair comme en sombre. */ .bloc-guide:has(> a.cta-btn) > :is(h2, h3), .bloc-guide:has(> a.cta-primary) > :is(h2, h3) { color: var(--e-texte) !important; } .bloc-guide:has(> a.cta-btn) > p, .bloc-guide:has(> a.cta-primary) > p { color: var(--e-doux) !important; } .bloc-guide:has(> a.cta-btn) > p a, .bloc-guide:has(> a.cta-primary) > p a { color: var(--e-bleu) !important; } /* Theme clair : un encadre blanc opaque autour d'un tableau (immobilier, budget...) et ses lignes zebrees bleu pale detonnent sur la fenetre en verre ; ils passent en voile translucide, comme le fait deja le sombre (retour de Sebastien du 22/09/2026 : « les tableaux ne correspondent pas au theme »). */ :where(.bloc-guide, .bloc-section, .zone-carte) :is(div.bg-white, div.bg-sand-50, div.bg-ocean-50):has(table) { background-color: rgba(255,255,255,.42) !important; border-color: rgba(255,255,255,.85) !important; } :where(.bloc-guide, .bloc-section, .zone-carte) table :is(tr, th, td, thead, tbody)[class*="bg-ocean-50"] { background-color: rgba(255,255,255,.38) !important; } html[data-theme="dark"] body :where(.bloc-guide, .bloc-section, .zone-carte) :is(div.bg-white, div.bg-sand-50, div.bg-ocean-50):has(table) { background-color: rgba(255,255,255,.06) !important; border-color: rgba(120,150,190,.28) !important; } /* Un tableau occupe toute la largeur de sa fenetre (quartiers-bangkok : tableau a 60 % de large, cale a gauche sous un titre centre, « le tableau est croche », retour de Sebastien du 22/09/2026) ; ses lignes blanches opaques passent en voile. */ :where(.bloc-guide, .bloc-section, .zone-carte) table { width: 100%; } :where(.bloc-guide, .bloc-section, .zone-carte) table :is(tr, th, td, thead, tbody)[class*="bg-white"] { background-color: rgba(255,255,255,.38) !important; } /* ---- Boutons : plus de dore (demande de Sebastien du 24/09/2026) ---- */ /* Les couches