/* owlporn, maquette « Rouge classique », révision 2 : angles droits, une seule tuile, le rouge pour seul accent. */
:root{
--fond:#111;--fond-2:#181818;--fond-3:#1f1f1f;--tuile:#1d1d1d;--logo:#262626;--bord:#2b2b2b;
--texte:#f0eeee;--sourd:#a9a5a5;
--accent:#e0121f;--accent-clair:#ff2d3f;
--largeur:1280px;--colonne:250px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--fond);color:var(--texte);font:15px/1.5 Arial,Helvetica,sans-serif;-webkit-text-size-adjust:100%}
body{min-height:100vh;display:flex;flex-direction:column}
body.mur-ouvert{overflow:hidden}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-weight:800;line-height:1.15;letter-spacing:.01em}
h1,h2{text-transform:uppercase}
h1{font-size:clamp(24px,3.2vw,38px)}
h2{font-size:clamp(17px,2vw,22px)}
h3{font-size:16px}
ul{list-style:none}
main{flex:1;width:100%;max-width:var(--largeur);margin:0 auto;padding:22px 20px 40px}
.visuellement-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.chapeau{font-size:17px;color:var(--sourd);margin:8px 0 14px;max-width:760px}
.note{font-size:12px;color:#777;font-style:italic;margin-top:8px}
/* Entête */
.entete{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;padding:0 20px;height:62px;background:#000;border-bottom:2px solid var(--accent)}
.marque{display:flex;align-items:center;gap:8px;font-size:22px;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;text-decoration:none;color:#fff}
.marque b{color:var(--accent-clair)}
.navigation{display:flex;gap:16px;margin-right:auto;font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.04em}
.navigation a{text-decoration:none;color:var(--sourd);padding:6px 2px;border-bottom:2px solid transparent}
.navigation a[aria-current]{color:#fff;border-color:var(--accent)}
.recherche{display:flex;flex:1;max-width:380px;position:relative}
.resultats{position:absolute;top:100%;left:0;right:0;z-index:30;margin:2px 0 0;padding:0;list-style:none;background:var(--fond-2);border:1px solid var(--bord);max-height:60vh;overflow:auto}
.resultats[hidden]{display:none}
.resultats a{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:9px 12px;color:var(--texte);text-decoration:none;border-bottom:1px solid var(--bord)}
.resultats li:last-child a{border-bottom:0}
.resultats a:hover,.resultats a:focus{background:var(--fond-3);outline:0}
.resultats a span{color:var(--sourd);font-size:12px;white-space:nowrap}
.recherche input{flex:1;min-width:0;background:var(--fond-3);border:1px solid var(--bord);border-right:0;padding:8px 12px;color:var(--texte);font:inherit}
.recherche button{background:var(--accent);color:#fff;border:0;padding:0 14px;font:inherit;font-weight:700;cursor:pointer}
/* Le choix de langue est un depliant natif, la devise deux boutons. Un
drapeau se repere plus vite que deux lettres, et une langue de plus
n'allonge pas l'entete. */
.langue{position:relative}
.langue summary{display:flex;align-items:center;gap:6px;padding:6px 8px;cursor:pointer;
list-style:none;font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--sourd)}
.langue summary::-webkit-details-marker{display:none}
.langue summary::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;
border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px)}
.langue[open] summary,.langue summary:hover{color:var(--texte)}
.langue img{display:block;width:18px;height:13px}
.langue ul{position:absolute;right:0;top:100%;z-index:20;min-width:170px;background:var(--fond-2);
border:1px solid var(--bord);box-shadow:0 10px 26px rgba(0,0,0,.5);padding:4px 0}
.langue li{list-style:none}
.langue ul a{display:flex;align-items:center;gap:9px;padding:7px 13px;color:var(--texte);
text-decoration:none;font-size:13.5px;white-space:nowrap}
.langue ul a:hover{background:var(--fond-3)}
.langue ul a[aria-current]{font-weight:700;color:#fff}
.devise{display:flex;align-items:center;gap:2px}
.devise button{background:0;border:0;padding:5px 9px;cursor:pointer;font:inherit;font-size:15px;
font-weight:700;color:var(--sourd);border-bottom:2px solid transparent}
.devise button:hover{color:var(--texte)}
.devise button[aria-pressed="true"]{color:#fff;border-bottom-color:var(--accent)}
.menu{display:none;background:var(--fond-3);color:#fff;border:1px solid var(--bord);padding:8px 12px;font:inherit;font-weight:700;cursor:pointer}
body[data-page="accueil"] .entete .recherche{display:none}
/* Disposition avec colonne de catégories */
.disposition{display:grid;grid-template-columns:var(--colonne) minmax(0,1fr);gap:28px;align-items:start}
.colonne{background:var(--fond-2);border:1px solid var(--bord);padding:4px 0 8px;position:sticky;top:76px;max-height:calc(100vh - 92px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#3a3a3a transparent}
.colonne::-webkit-scrollbar{width:8px}
.colonne::-webkit-scrollbar-track{background:transparent}
.colonne::-webkit-scrollbar-thumb{background:#3a3a3a}
.colonne::-webkit-scrollbar-thumb:hover{background:var(--sourd)}
.colonne-groupe+.colonne-groupe{border-top:1px solid var(--bord);margin-top:6px}
.colonne-titre{padding:12px 14px 4px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--accent-clair)}
.colonne a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:5px 14px;font-size:13.5px;text-decoration:none;color:var(--texte);border-left:3px solid transparent}
.colonne a:hover{background:var(--fond-3);color:#fff}
.colonne a[aria-current]{background:var(--fond-3);color:#fff;border-left-color:var(--accent)}
.colonne .nombre{font-size:11px;color:var(--sourd)}
.colonne .vide{padding:5px 14px 5px 17px;font-size:13.5px;color:#666}
.colonne .vide span{display:flex;justify-content:space-between;gap:8px}
.colonne .vide .nombre{color:#555;font-style:italic}
/* Sections de l'annuaire */
.groupe-titre{margin:44px 0 14px;padding:8px 0;border-top:2px solid var(--accent);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.16em;color:var(--accent-clair);line-height:1.3}
.ouverture+.groupe-titre{margin-top:26px}
.titre-section{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;margin:0 0 6px}
.tout-voir{font-size:13px;font-weight:700;color:var(--accent-clair);text-decoration:none}
.accroche{color:var(--sourd);margin-bottom:12px}
section+section,.pub+section{margin-top:34px}
.groupe-titre+section{margin-top:0}
.ouverture{padding:26px 0 8px}
.ouverture h1{margin-bottom:8px}
.ouverture .chapeau{max-width:820px}
.ouverture .recherche{margin:18px 0 0;max-width:560px}
.ouverture .recherche input{padding:12px 14px;font-size:16px}
.texte-seo{margin-top:44px;padding-top:24px;border-top:1px solid var(--bord)}
.texte-seo h2{font-size:18px;margin:22px 0 8px}
.texte-seo p{max-width:820px;color:var(--sourd)}
.texte-seo p+p{margin-top:10px}
.texte-seo .intertitre{font-size:16px;margin:18px 0 6px}
.texte-seo .texte-liste{color:var(--sourd);max-width:800px}
/* Cartes */
.cartes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.cartes.n1{grid-template-columns:minmax(0,1fr)}
.cartes.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cartes.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.carte{background:var(--fond-2);border:1px solid transparent;overflow:hidden;display:flex;flex-direction:column}
/* Le rang du site dans la tuile de sa carte, à l'accueil et dans une catégorie :
les quatre premières cartes suivent l'ordre du classement, comme la liste
numérotée qui les suit. */
.carte-vignette{position:relative}
:is(.accueil,.categorie) .cartes{counter-reset:rang}
:is(.accueil,.categorie) .cartes .carte{counter-increment:rang}
:is(.accueil,.categorie) .cartes .carte-vignette::before{content:counter(rang);position:absolute;top:6px;left:10px;z-index:1;font:900 30px/1 Arial,Helvetica,sans-serif;color:#3a3a3a}
:is(.accueil,.categorie) .cartes .carte:hover .carte-vignette::before{color:#8a8585}
.carte-vignette{display:block;text-decoration:none}
.vignette{aspect-ratio:16/10;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--tuile);color:#fff}
.vignette b{font-size:17px;font-weight:800;letter-spacing:.02em}
.vignette span{font-size:12px;color:var(--sourd)}
img.vignette{object-fit:cover;object-position:top}
.carte-corps{padding:12px;display:flex;flex-direction:column;gap:8px;flex:1}
.carte h3{display:flex;justify-content:space-between;align-items:center;gap:8px}
.carte h3 a,.ligne h3 a,.court a{color:#fff;text-decoration:none}
.carte p,.ligne p{font-size:13.5px;color:var(--sourd)}
.carte .boutons{margin-top:auto;display:flex;gap:8px}
.carte .boutons .bouton{flex:1;text-align:center}
/* Accueil : cartes resserrees, dix sites par bloc, sortie sous le bloc. La carte
coute environ trois cents pixels par site contre vingt-cinq pour une ligne :
la reduire et plafonner le bloc garde la page lisible a trente-six categories. */
.accueil .vignette{aspect-ratio:16/9}
.accueil .carte-corps{padding:10px;gap:6px}
.accueil .carte h3{font-size:15px}
.accueil .carte p{font-size:13px;display:-webkit-box;-webkit-line-clamp:2;
-webkit-box-orient:vertical;overflow:hidden}
.tout-voir-bas{display:block;margin-top:12px;padding:9px 12px;text-align:center;
background:var(--fond-2);border:1px solid var(--bord);
color:var(--texte);text-decoration:none;font-weight:700;font-size:13.5px;
text-transform:uppercase;letter-spacing:.04em}
.tout-voir-bas:hover{background:var(--fond-3);color:#fff}
/* Pastilles, étiquettes, logos */
.pastilles{display:inline-flex;gap:3px;flex:none;--plume:#e8789c;--plume-eteinte:#3b3138}
.pastilles i{width:13px;height:13px;display:block;background:var(--plume-eteinte);-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.pastilles i.on{background:var(--plume)}
.fiche-tete .pastilles i,.fiche-principal h2 .pastilles i{width:16px;height:16px}
.drapeaux{display:inline-flex;gap:4px;align-items:center;vertical-align:-3px;margin-left:6px}
.drapeau{width:18px;height:13px;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.carte-vignette{position:relative}
.carte-vignette .drapeaux{position:absolute;left:8px;top:8px;margin:0}
.carte-vignette .drapeau{width:22px;height:16px;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.fiche-tete .drapeaux{margin-left:8px}.fiche-tete .drapeau{width:24px;height:18px}
.etiquettes{display:flex;flex-wrap:wrap;gap:5px}
.etiquettes li{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:2px;background:var(--fond-3);color:var(--sourd);border:1px solid transparent}
.etiquettes .gratuit{background:transparent;border-color:#2e7a4b;color:#fff}
.etiquettes .payant{background:transparent;border-color:#35679c;color:#fff}
.logo{width:40px;height:40px;flex:none;background:var(--logo);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;border-bottom:2px solid var(--accent)}
img.logo{object-fit:cover;background:#fff}
.logo.marque{padding:0 1px}
.logo.marque img{max-width:100%;max-height:100%;object-fit:contain}
.vignette.marque{padding:14px}
.vignette.marque img{max-width:72%;max-height:56%;object-fit:contain}
/* Boutons */
.bouton{display:inline-block;background:var(--accent);color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:13px;padding:9px 14px;text-decoration:none;border:0;cursor:pointer;font-family:inherit;white-space:nowrap}
.bouton:hover{background:var(--accent-clair)}
.bouton.secondaire{background:transparent;border:1px solid #444;color:#eee}
.bouton.secondaire:hover{border-color:#888;background:var(--fond-3)}
.bouton.grand{font-size:15px;padding:13px 22px}
.bouton.petit{font-size:11px;padding:6px 10px}
/* Lignes de la liste dense */
.lignes{display:flex;flex-direction:column;gap:8px}
.ligne{display:flex;align-items:center;gap:14px;padding:12px 14px;background:var(--fond-2);border:1px solid var(--bord)}
.ligne .rang,.court .rang{width:22px;text-align:right;font-weight:900;color:var(--sourd);flex:none}
.ligne-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ligne h3{font-size:15px}
.ligne .domaine,.court .domaine{font-size:12px;font-weight:400;color:var(--sourd)}
/* Liste courte sur colonnes */
.colonnes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 14px;margin-top:12px}
.court{display:flex;align-items:center;gap:10px;padding:7px 10px;background:var(--fond-2);border:1px solid var(--bord)}
.court .rang{width:18px}
.court .logo{width:30px;height:30px;font-size:13px}
.court-corps{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.court a{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.court .domaine{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.court .etiquettes{margin-top:3px}
.court .etiquettes li{font-size:10px;padding:1px 6px}
/* Puces, publicité, cartes d'articles */
.puces{display:flex;flex-wrap:wrap;gap:8px}
.puces a{display:block;padding:6px 12px;background:var(--fond-3);border:1px solid var(--bord);font-size:13px;text-decoration:none;color:var(--texte)}
.puces a:hover{border-color:var(--accent)}
/* Un emplacement publicitaire ne se voit que rempli. Il sort caché du gabarit et
le script ne le découvre qu'une fois la régie chargée, donc seulement si le
visiteur a accepté : pas de cadre vide en pointillés à la place d'une
bannière, et rien du tout pour qui refuse. */
.pub{margin:28px 0;display:flex;align-items:center;justify-content:center}
.pub ins{display:block;max-width:100%}
.articles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.article-carte{background:var(--fond-2);border:1px solid var(--bord);overflow:hidden;display:flex;flex-direction:column}
.article-vignette{display:block;background:var(--fond-2);text-decoration:none}
.article-corps{padding:12px;display:flex;flex-direction:column;gap:6px}
.meta{font-size:12px;color:var(--sourd)}
.rubrique{font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-clair)}
.article-carte h3 a{color:#fff;text-decoration:none}
.article-carte p{font-size:13.5px;color:var(--sourd)}
/* Pied de page */
.pied{border-top:1px solid var(--bord);background:#000;padding:26px 20px;font-size:13px;color:var(--sourd);text-align:center}
.pied nav{display:flex;flex-wrap:wrap;gap:16px;margin:10px 0;justify-content:center}
.pied-rta{margin-top:16px}
.pied-rta img{display:inline-block}
.pied a{color:var(--texte);text-decoration:none}
.pied-note{font-size:12px;color:#777}
/* Mur 18+ */
.mur{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;padding:20px}
.mur[hidden]{display:none}
.mur-boite{max-width:520px;text-align:center;background:var(--fond-2);border:1px solid var(--bord);border-top:4px solid var(--accent);padding:30px 26px;display:flex;flex-direction:column;align-items:center;gap:14px}
.mur-boite p{color:var(--sourd)}
.mur .boutons{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.mur-fin{font-size:12.5px;line-height:1.5;color:#8d8a8a}
.mur-fin p{margin:0 0 8px;color:#8d8a8a}
.mur-fin p:last-child{margin:0}
/* Catégorie */
.fil{font-size:13px;color:var(--sourd);margin-bottom:10px}
.fil a{text-decoration:none}
.fil a+a::before,.fil span::before{content:"/";margin:0 6px;color:var(--sourd)}
.categorie-tete{padding:10px 0 4px}
.categorie-tete p{max-width:760px}
.methode{background:var(--fond-2);border:1px solid var(--bord);border-left:3px solid var(--accent);padding:14px 18px}
.methode h2{font-size:14px;margin-bottom:6px}
.methode p{color:var(--sourd);font-size:14px;max-width:760px}
.classement .lignes+.pub{margin:14px 0}
/* Fiche */
.fiche{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.fiche-principal{min-width:0}
.fiche-tete{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:10px 0 6px}
.fiche-tete .logo{width:64px;height:64px;font-size:28px}
.fiche-titre{flex:1;min-width:240px}
.fiche-titre .domaine{color:var(--sourd);font-size:14px;margin:2px 0 6px}
.capture{margin:0 0 24px;border:1px solid var(--bord);overflow:hidden;background:var(--fond-2)}
.capture .vignette.grande{aspect-ratio:16/10}
.capture figcaption{padding:8px 12px;font-size:12px;color:var(--sourd)}
.en-bref{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:14px}
.en-bref caption{text-align:left;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--accent-clair);padding:0 0 6px}
.en-bref th,.en-bref td{text-align:left;padding:8px 12px;border:1px solid var(--bord);vertical-align:top}
.en-bref th{width:32%;color:var(--sourd);font-weight:700;background:var(--fond-2)}
.fiche-principal section{margin-top:26px}
.fiche-principal h2{margin-bottom:8px}
.fiche-principal p{max-width:760px}
.fiche-principal section p+p{margin-top:10px}
.liste{padding-left:18px;list-style:disc}
.liste li{margin:4px 0}
.bilan{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.bilan>div{background:var(--fond-2);border:1px solid var(--bord);padding:14px 16px 12px}
.bilan-forts{border-top:3px solid #2e9e5b}
.bilan-faibles{border-top:3px solid var(--accent)}
.bilan h3{font-size:12px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.bilan-forts h3{color:#7ee2a0}
.bilan-faibles h3{color:#ff8da0}
.bilan li{position:relative;padding-left:24px;margin:7px 0;font-size:14px}
.bilan li::before{position:absolute;left:0;top:0;font-weight:900}
.bilan-forts li::before{content:"\2713";color:#7ee2a0}
.bilan-faibles li::before{content:"\2717";color:#ff8da0}
.capture.galerie{margin:18px 0 4px}
.cartes.trois{grid-template-columns:repeat(3,minmax(0,1fr))}
.faq dt{font-weight:700;margin-top:12px}
.faq dd{color:var(--sourd);max-width:760px;margin-top:4px}
.fiche-pied{margin-top:34px;padding-top:18px;border-top:1px solid var(--bord)}
.sources-pliees summary{cursor:pointer;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-clair);padding:6px 0}
.sources-pliees[open] summary{margin-bottom:6px}
.sources{padding-left:18px;list-style:disc;font-size:13.5px;color:var(--sourd)}
.sources li{margin:4px 0}
.maj{margin-top:12px;font-size:13px;color:var(--sourd)}
.voisines-fiche{margin-top:8px;font-size:14px}
.fiche-colonne{display:flex;flex-direction:column;gap:16px;align-self:stretch}
.fiche-colonne .pub{margin:0;min-height:250px;display:flex;align-items:center;justify-content:center}
.essentiel{background:var(--fond-2);border:1px solid var(--bord);padding:16px 20px;margin:0 0 24px}
.essentiel-titre{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--sourd);margin:0 0 8px}
.essentiel ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.essentiel li{line-height:1.55}
.encart{background:var(--fond-2);border:1px solid var(--bord);padding:16px;display:flex;flex-direction:column;gap:10px}
.encart h2{font-size:14px}
.encart dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:13.5px}
.encart dt{color:var(--sourd)}
.encart .bouton{text-align:center}
/* Blog */
.blog-tete{padding:10px 0 14px}
.blog-tete .accroche{max-width:720px}
.liste-blog{grid-template-columns:1fr;gap:12px}
.liste-blog .article-carte{flex-direction:row}
.liste-blog .article-vignette{width:340px;flex:none;align-self:center}
.liste-blog .article-corps{padding:14px 16px}
.pagination{display:flex;gap:8px;margin-top:22px}
.pagination a,.pagination span{padding:6px 12px;border:1px solid var(--bord);text-decoration:none}
.pagination span{background:var(--accent);border-color:var(--accent);color:#fff}
/* Article */
.article-page{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.article-principal{max-width:760px}
.couverture{aspect-ratio:2/1;background:var(--tuile);border-top:2px solid var(--accent);display:flex;align-items:center;justify-content:center;color:var(--sourd);text-transform:uppercase;letter-spacing:.1em;font-size:12px;margin-bottom:20px}
.sommaire{background:var(--fond-2);border:1px solid var(--bord);padding:14px 18px;margin-bottom:10px}
.sommaire p{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-clair);margin-bottom:6px}
.sommaire ol{padding-left:18px}
.sommaire a{color:var(--texte)}
.article-principal section{margin-top:26px}
.article-principal h2{margin-bottom:8px}
.article-principal section p+p{margin-top:10px}
.article-colonne{position:sticky;top:76px;display:flex;flex-direction:column;gap:16px}
.article-colonne .pub{margin:0;min-height:250px;display:flex;align-items:center;justify-content:center}
.liens-encart li{margin:6px 0;font-size:13.5px}
.liens-encart a{color:var(--texte);text-decoration:none}
/* Annoncer */
.annoncer-tete{padding:10px 0 14px}
.annoncer-tete .accroche{max-width:720px}
.offres-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.offre{background:var(--fond-2);border:1px solid var(--bord);border-top:4px solid var(--accent);padding:20px;display:flex;flex-direction:column;gap:10px}
.offre h2{font-size:17px}
.offre .liste{color:var(--sourd);font-size:14px}
.offre .prix{margin-top:auto;font-weight:900;font-size:18px;text-transform:uppercase}
.offre .bouton{text-align:center}
.refus .liste{max-width:720px}
.formulaire{display:flex;flex-direction:column;gap:6px;max-width:560px}
.formulaire label{font-size:13px;font-weight:700;color:var(--sourd);margin-top:8px}
.formulaire input,.formulaire select,.formulaire textarea{background:var(--fond-3);border:1px solid var(--bord);padding:10px 12px;color:var(--texte);font:inherit}
.formulaire .bouton{align-self:flex-start;margin-top:12px}
.formulaire .explication{margin-top:10px}
.formulaire .explication p{margin:0 0 10px;color:var(--sourd);font-size:14px;line-height:1.6;max-width:62ch}
.formulaire .explication p:last-child{margin:0}
.formulaire .champ{display:flex;flex-direction:column;gap:6px}
.formulaire .piege{position:absolute;left:-9999px}
/* La page de contact tient dans une carte centrée : rien d'autre ne la dispute,
autant la poser au milieu plutôt que de la laisser filer à gauche. */
.contact{display:flex;justify-content:center;padding:28px 0 40px}
/* La carte garde exactement la même largeur et la même hauteur quel que soit le
sujet choisi : une carte qui rétrécit au changement d'un menu fait bricolé. Le
plancher vaut l'état le plus haut, mesuré dans les trois langues à 620 pixels
de large, et la zone de message absorbe ce qui manque. Attention, la page ne
porte la classe qu'une fois : si le main la portait aussi, il deviendrait une
boîte flexible en ligne et la carte se réduirait à la largeur de son texte. */
.contact .carte{width:100%;max-width:620px;background:var(--fond-3);border:1px solid #383838;
box-shadow:0 10px 30px rgba(0,0,0,.45);display:flex;flex-direction:column;min-height:846px}
.contact .carte h1{margin:0;padding:14px 20px;font-size:19px;letter-spacing:.04em;
background:var(--accent);color:#fff;border-bottom:1px solid var(--bord)}
.contact .dedans{padding:22px 20px 26px;flex:1;display:flex;flex-direction:column}
/* Dans une carte plus claire que la page, les champs se creusent au lieu de
se poser : c'est ce qui les fait lire comme des champs. */
.contact .formulaire input,.contact .formulaire select,.contact .formulaire textarea{
background:var(--fond);border-color:#3a3a3a}
.contact .formulaire{max-width:none;flex:1}
.contact .formulaire textarea{flex:1;min-height:130px;max-height:440px;resize:vertical}
.contact .reponse{padding:12px 14px;margin:0 0 18px;font-weight:700}
.contact .reussi{background:#14361c;border:1px solid #2f6d3c;color:#d6f3dd}
.contact .rate{background:#3a1417;border:1px solid #7a2a30;color:#f6d8da}
/* La fenêtre de consentement, au centre de la page assombrie comme le mur d'âge. Les
trois boutons ont la même classe : refuser coûte le même geste qu'accepter.
Elle ne s'ouvre qu'après le mur d'âge, jamais par-dessus. */
.consentement{position:fixed;inset:0;z-index:45;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:20px}
.consentement[hidden]{display:none}
.consentement-boite{width:100%;max-width:640px;max-height:calc(100vh - 40px);overflow-y:auto;background:var(--fond-2);border:1px solid var(--bord);padding:22px 24px;display:flex;flex-direction:column;gap:12px}
.consentement h2{font-size:17px}
.consentement p{margin:0;font-size:13.5px;color:var(--sourd)}
.consentement p a{color:var(--texte)}
.consentement-boutons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.consentement-boutons .bouton,.consentement-panneau .bouton{text-align:center}
.bouton.accepter{background:#2e7a4b;border:1px solid #2e7a4b;color:#fff}
.bouton.accepter:hover{background:#358a56;border-color:#358a56}
.consentement-panneau{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--bord);padding-top:12px}
.consentement-panneau[hidden]{display:none}
.consentement-finalite{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.consentement-finalite input{margin-top:3px;width:16px;height:16px;flex:none;accent-color:var(--accent)}
.consentement-finalite span{display:flex;flex-direction:column;gap:2px;font-size:13.5px}
.consentement-finalite small{color:var(--sourd);font-size:12.5px}
.lien-cookies{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
[hidden]{display:none!important}
/* Annuaire réel */
.annuaire-vide,.blog-vide{color:var(--sourd);max-width:720px;padding:14px 0}
.justification{margin-top:10px;color:var(--sourd)}
.fiche-principal h2 .pastilles{margin-left:10px;vertical-align:middle}
.article-principal .corps p+p{margin-top:14px}
/* La couverture d'un article : le dessin est du SVG pose dans la page, la
mascotte est une image partagee par tous les articles. */
.couverture{background:var(--fond-2);border:1px solid var(--bord);margin:0 0 20px}
.couverture svg text{text-transform:none}
.couverture svg{display:block;width:100%;height:auto}
.article-vignette .couverture{border:0;margin:0}
.article-vignette .couverture .marque{display:none}
.legende-graphe{color:var(--sourd);font-size:12.5px;margin:8px 0 0}
/* Les titres d'un long article respirent plus au-dessus qu'en dessous : un titre
appartient au texte qui le suit, pas à celui qui le précède. Le sous-titre
n'avait aucune marge, il se collait aux deux paragraphes voisins et la page se
lisait comme un pâté. Trois tailles pour trois niveaux, le sous-titre restant
en bas de casse pour ne pas se confondre avec un titre de section. */
.corps h2{margin:42px 0 12px;font-size:20px}
.corps h3{margin:30px 0 10px;font-size:17px;color:#fff}
.corps>:first-child{margin-top:0}
/* Une illustration dans le fil du texte, sa légende dessous. */
.corps .illustration{margin:30px 0}
.corps .capture-article{margin:30px 0}
.corps .mention-affiliation{margin-top:28px;font-size:13px;color:var(--sourd)}
.corps .capture-article img{width:100%;height:auto;display:block}
.corps .illustration img{width:100%;height:auto;border:1px solid var(--bord)}
.corps figcaption{margin-top:8px;font-size:12.5px;color:var(--sourd);line-height:1.45}
.corps a{color:var(--accent-clair);text-decoration:none;border-bottom:1px solid rgba(255,45,63,.4)}
.corps a:hover,.corps a:focus{color:#fff;border-bottom-color:var(--accent-clair)}
.corps ul{list-style:disc;padding-left:20px;margin:14px 0}
.corps li{margin:5px 0}
/* Un tableau de prix deborde sur telephone : il defile dans sa propre boite,
la page ne defile jamais de cote. */
.corps .tableau,.fiche-principal .tableau{overflow-x:auto;margin:22px 0;border:1px solid var(--bord)}
.corps table,.fiche-principal .tableau table{border-collapse:collapse;width:100%;min-width:560px;font-size:13.5px}
.corps caption,.fiche-principal .tableau caption{caption-side:bottom;padding:8px 12px;text-align:left;color:var(--sourd);font-size:12px}
.corps th,.corps td,.fiche-principal .tableau th,.fiche-principal .tableau td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--bord)}
.corps thead th,.fiche-principal .tableau thead th{background:var(--fond-2);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--sourd)}
.corps tbody tr:last-child td,.fiche-principal .tableau tbody tr:last-child td{border-bottom:0}
.corps tbody tr:hover,.fiche-principal .tableau tbody tr:hover{background:var(--fond-2)}
.corps .nombre,.fiche-principal .tableau .nombre{text-align:right;white-space:nowrap}
.corps .fort,.fiche-principal .tableau .fort{color:#fff;font-weight:700}
/* Tablette. Le téléphone en hérite, puis sa propre section, en fin de feuille,
reprend ce qui doit changer pour le pouce. */
@media (max-width:900px),(max-width:959.98px) and (max-height:500px){
.entete{gap:10px;flex-wrap:wrap;height:auto;padding:10px 14px}
.navigation{order:3;width:100%;justify-content:space-between;margin-right:0}
.recherche{order:4;width:100%;max-width:none}
/* La marque prend sa ligne, les deux choix partagent la suivante : le
sélecteur de devise s'étire sur ce qui reste au lieu d'aller à la ligne et
de rallonger un entête déjà collant. */
.entete>.marque{width:100%}
.langue,.devise{order:2}
.menu{display:inline-block;margin-left:auto}
.disposition{grid-template-columns:1fr;gap:18px}
.colonne{display:none;position:static;max-height:none;overflow:visible}
body.menu-ouvert .colonne{display:block}
.cartes,.cartes.n3,.cartes.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
.cartes.n1{grid-template-columns:minmax(0,1fr)}
.colonnes{grid-template-columns:repeat(2,minmax(0,1fr))}
.articles{grid-template-columns:1fr}
.fiche{grid-template-columns:1fr}
.fiche-colonne{position:static}
.article-page{grid-template-columns:minmax(0,1fr)}
.article-colonne{position:static}
.liste-blog .article-carte{flex-direction:column}
.liste-blog .article-vignette{width:auto}
.offres-grille{grid-template-columns:1fr}
.cartes.trois{grid-template-columns:repeat(2,minmax(0,1fr))}
.bilan{grid-template-columns:1fr}
main{padding:16px 14px 30px}
}
.voir-aussi{margin-top:18px;padding-top:12px;border-top:1px solid var(--bord);font-size:.94rem;color:var(--sourd)}
.voir-aussi a{color:var(--accent);text-decoration:none}
.voir-aussi a:hover{text-decoration:underline}
/* Devises. Le HTML porte les deux variantes des seuls montants et des seules
phrases dont la conclusion change, jamais du texte entier. Une règle n'en
montre qu'une, celle que html[data-devise] annonce. `revert` rend à chaque
élément son affichage normal, ligne de tableau comprise. Sans JavaScript,
l'attribut garde la devise de la construction et la page reste juste.
data-prix-autre est l'inverse : c'est la grille de l'autre devise, rangée
dans un bloc dépliable natif pour rester atteignable sans script. */
[data-prix],[data-prix-autre]{display:none}
html[data-devise="EUR"] [data-prix="EUR"],
html[data-devise="USD"] [data-prix="USD"],
html[data-devise="EUR"] [data-prix-autre="USD"],
html[data-devise="USD"] [data-prix-autre="EUR"]{display:revert}
.prix{white-space:nowrap}
.prix-sources,.prix-sources .sources{white-space:normal}
.tarifs-autre{margin-top:12px;border:1px solid var(--bord);background:var(--fond-2)}
.tarifs-autre>summary{padding:9px 12px;cursor:pointer;font-weight:700;font-size:.92rem}
.tarifs-autre>div{padding:0 12px 12px}
/* Depuis une fiche, les catégories restent accessibles sans script (Seb,
14 octobre 2026) : une entrée au même rang qu'Annuaire et Blog, qui ouvre
sous l'entête un panneau de toute la largeur, les groupes en listes avec le
nombre de sites, et les fiches relues le plus récemment en bas. */
.acces-categories{position:static;flex:none}
.acces-categories summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;padding:6px 2px;
font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--sourd);
border-bottom:2px solid transparent}
.acces-categories summary::-webkit-details-marker{display:none}
.acces-categories summary::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;
border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.acces-categories summary:hover,.acces-categories[open] summary{color:#fff}
.acces-categories[open] summary{border-bottom-color:var(--accent)}
.acces-categories[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.acces-categories summary:focus-visible{outline:2px solid var(--accent-clair);outline-offset:3px}
.mega{position:absolute;left:0;right:0;top:100%;margin-top:2px;z-index:30;
background:#171717;border-bottom:1px solid var(--bord);
box-shadow:0 34px 60px rgba(0,0,0,.7);max-height:calc(100vh - 80px);overflow-y:auto;overscroll-behavior:contain}
.acces-categories[open] .mega{animation:mega-ouvre .18s ease-out}
@keyframes mega-ouvre{from{opacity:0;transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.acces-categories[open] .mega{animation:none}}
.mega-grille{max-width:1480px;margin:0 auto;padding:26px 28px 24px;display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1.7fr) minmax(0,1fr)}
.mega-col{padding:0 32px;border-left:1px solid #262626}
.mega-col:first-child{padding-left:0;border-left:0}
.mega-col:last-child{padding-right:0}
.mega section{margin:0}
.mega .mega-groupe+.mega-groupe{margin-top:22px}
.mega-titre{margin-bottom:12px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:#8d8888}
.mega ul{margin:0;padding:0;list-style:none}
.mega a{color:var(--texte);text-decoration:none}
.mega a:focus-visible{outline:2px solid var(--accent-clair);outline-offset:2px}
.mega-liste a{display:flex;align-items:baseline;gap:12px;padding:6px 10px;margin:0 -10px;font-size:14.5px;
transition:background .15s,color .15s}
.mega-nombre{margin-left:auto;font-size:12px;color:#7c7777;font-variant-numeric:tabular-nums;transition:color .15s}
.mega-liste a:hover{background:#242424;color:#fff}
.mega-liste a:hover .mega-nombre{color:var(--accent-clair)}
.mega-centre .mega-liste{columns:2;column-gap:28px}
.mega-centre .mega-liste li{break-inside:avoid}
.mega-pied{border-top:1px solid #262626;background:#0f0f0f}
.mega-pied-dedans{max-width:1480px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:24px}
.mega-pied .mega-titre{margin:0;flex:none}
.mega-recents{display:flex;gap:10px;flex:1;min-width:0}
.mega-recents li{flex:1;min-width:0}
.mega-recents a{display:flex;align-items:center;gap:10px;padding:6px 8px;transition:background .15s}
.mega-recents a:hover{background:#1c1c1c}
.mega-recents .logo{width:32px;height:32px;border-bottom:0;font-size:14px}
.mega-recents span{display:flex;flex-direction:column;min-width:0}
.mega-recents b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mega-recents small{font-size:12px;color:var(--sourd)}
.mega-tout{flex:none;font-size:13px;font-weight:700;color:#fff;padding:8px 14px;border:1px solid #3a3a3a;transition:background .15s}
.mega-tout::after{content:" →"}
.mega-tout:hover{background:#222}
@media (max-width:1180px){
.mega-col{padding:0 20px}
.mega-recents li:nth-child(4){display:none}
}
.langues-pied{display:flex;justify-content:center;gap:18px;margin-top:16px;flex-wrap:wrap}
.langues-pied [aria-current]{font-weight:700}
.page-information{max-width:850px;margin:0 auto;padding:32px 20px 48px}
.page-information>.chapeau{margin:20px 0}
.page-information .texte-seo{margin:24px 0;padding:0;border:0}
.page-information .texte-seo h2{margin-top:28px}
.page-information nav{margin-top:24px;line-height:2}
.contact-direct{margin:16px 0;overflow-wrap:anywhere}
.comparaison{margin:24px 0}
.table-comparaison{overflow-x:auto}
.comparaison table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.55}
.comparaison th,.comparaison td{text-align:left;vertical-align:top;padding:12px;border-bottom:1px solid var(--bord)}
.comparaison th[scope=row]{min-width:110px}
.intertitre{margin:22px 0 8px;font-size:17px;color:#fff;max-width:760px}
.texte-liste{list-style:disc;padding-left:22px;margin:10px 0;max-width:740px}
.texte-liste li{margin:6px 0}
.texte-liste li::marker{color:var(--accent-clair)}
.pour-qui{margin:4px 0 18px}
.tableau-libre{margin:16px 0;overflow-x:auto;max-width:760px}
.tableau-libre table{width:100%;border-collapse:collapse;font-size:14px}
.tableau-libre caption{caption-side:bottom;text-align:left;padding-top:8px;font-size:12.5px;color:var(--sourd)}
.tableau-libre th,.tableau-libre td{padding:9px 12px;border-bottom:1px solid var(--bord);text-align:left;vertical-align:top}
.tableau-libre thead th{background:var(--fond-2);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--sourd)}
.tableau-libre tbody th{font-weight:700;color:var(--texte);min-width:120px}
.tableau-libre tbody tr:hover{background:var(--fond-2)}
.colonne-collante{position:sticky;top:76px;display:flex;flex-direction:column;gap:16px}
.fraicheur{padding:12px 16px;font-size:13px;color:var(--sourd)}
.fraicheur time{display:block;margin-top:2px;font-size:15px;font-weight:700;color:var(--texte)}
.fraicheur-tete{display:none;font-size:13px;color:var(--sourd);margin-top:2px}
.sommaire-colonne{margin:0;max-height:calc(100vh - 380px);overflow-y:auto;scrollbar-width:thin}
.sommaire-colonne ol{font-size:13.5px}
.sommaire-colonne li{margin:5px 0}
.sommaire-colonne a.actif{color:var(--accent-clair);font-weight:700}
.sommaire-corps{display:none}
@media (max-width:900px),(max-width:959.98px) and (max-height:500px){
.colonne-collante{position:static}
.sommaire-colonne,.fiche-colonne .fraicheur{display:none}
.sommaire-corps{display:block}
.fraicheur-tete{display:block}
}
/* Fiches en blocs, 24 septembre 2026 : chaque section est une carte, son titre
sur un bandeau plus clair, avec à droite le pictogramme de la section en
rouge, qui aide à repérer Prix ou Paiement en faisant défiler. Les
intertitres découpent la carte en sous-blocs par un filet. Angles droits,
le rouge reste le seul accent. */
.fiche-principal>section{margin-top:18px;padding:0 28px 26px;background:var(--fond-2);border:1px solid var(--bord);scroll-margin-top:76px}
.fiche-principal>section>h2{display:flex;align-items:center;gap:10px;margin:0 -28px 22px;padding:14px 28px;background:var(--fond-3);border-bottom:1px solid var(--bord);font-size:clamp(16px,1.8vw,19px)}
.fiche-principal>section>h2::after{content:"";flex:none;margin-left:auto;width:22px;height:22px;background:var(--accent-clair);-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}
#presentation>h2::after{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
#fonctionnement>h2::after{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
#contenu>h2::after{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
#prix>h2::after{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
#video>h2::after{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
#paiement>h2::after{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
#points>h2::after{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
#alternatives>h2::after{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
#questions>h2::after{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
#verdict>h2::after{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
.fiche-principal>section p{font-size:15.5px;line-height:1.7;max-width:720px}
.fiche-principal>section p+p{margin-top:14px}
.fiche-principal>section .intertitre{max-width:none;margin:30px 0 10px;padding-top:24px;border-top:1px solid var(--bord)}
.fiche-principal>section>h2+.intertitre{margin-top:0;padding-top:0;border-top:0}
.fiche-principal>section .texte-liste li{line-height:1.6}
.fiche-principal>section .faq dt{margin-top:18px}
.fiche-principal>section .faq dt:first-child{margin-top:0}
.fiche-principal>section .faq dd{line-height:1.65}
.fiche-principal>section .capture.galerie{margin:22px 0 6px}
/* L'affiche en tête de fiche, 24 septembre 2026 : le logo et le nom en grand,
sur la page d'accueil du site réduite à ses couleurs. */
.affiche{position:relative;overflow:hidden;display:flex;align-items:center;min-height:250px;margin:6px 0 24px;padding:32px 36px;background:var(--fond-3);border:1px solid var(--bord)}
.affiche-fond{position:absolute;inset:-60px;width:calc(100% + 120px);max-width:none;height:calc(100% + 120px);object-fit:cover;filter:blur(26px) brightness(.45) saturate(1.4)}
.affiche-contenu{position:relative;display:flex;align-items:center;gap:28px;min-width:0}
.affiche-logo{flex:none;width:128px;height:128px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.affiche-marque{flex:none;max-width:260px;max-height:110px;width:auto;height:auto}
.affiche-initiale{display:flex;align-items:center;justify-content:center;background:var(--logo);font-size:64px;font-weight:800}
.affiche-nom{font-size:clamp(30px,4.6vw,56px);font-weight:800;text-transform:uppercase;letter-spacing:.02em;line-height:1;color:#fff;overflow-wrap:anywhere}
.affiche-domaine{margin-top:10px;font-size:14px;letter-spacing:.08em;color:#d6d2d2}
.fiche-principal>section>.capture{margin:0 0 22px}
/* Le logo est dans l'affiche : l'entête ne le répète pas. */
.fiche-tete>.logo{display:none}
/* ==========================================================================
Téléphone, 25 septembre 2026
Un téléphone en portrait fait moins de 600 pixels de large, un téléphone
couché moins de 500 de haut. Une tablette ne répond à aucun des deux et
garde la section précédente, l'ordinateur ne voit rien de ce qui suit.
La même requête est reprise par site.js : la changer aux deux endroits.
L'entête tient sur une ligne de 56 pixels : la marque, la loupe, le menu.
Tout le reste de l'entête d'ordinateur passe dans un panneau plein écran.
Chaque cible au doigt fait au moins 44 pixels de côté, aucun geste ne
dépend du survol, et rien de fixe ne recouvre le texte : la page réserve
en bas la place de la barre ou du bandeau qu'elle porte.
========================================================================== */
.ouvrir-recherche,.ouvrir-panneau,.panneau,.index-groupes,.barre-visite,.deplier{display:none}
@media (max-width:599.98px),(max-width:959.98px) and (max-height:500px){
html{scroll-padding-top:66px}
main{padding:12px 16px 32px}
/* minmax(0,…) : une colonne 1fr ne descend pas sous le contenu le plus large,
et un téléphone de 320 pixels se retrouvait dézoomé. */
.disposition,.fiche,.article-page{grid-template-columns:minmax(0,1fr)}
h1{font-size:clamp(21px,6.4vw,27px);line-height:1.12}
h2{font-size:18px}
.chapeau{font-size:16px;line-height:1.55;margin:8px 0 14px}
.bouton{display:inline-flex;align-items:center;justify-content:center;min-height:44px;text-align:center}
.bouton.grand{min-height:52px}
.recherche input{font-size:16px;min-height:48px}
.recherche button{min-height:48px;padding:0 16px}
.resultats a{min-height:48px;align-items:center;padding:10px 14px}
/* Entête */
.entete{height:56px;flex-wrap:nowrap;gap:0;padding:0 2px 0 12px}
.entete>.marque{width:auto;min-height:48px;margin-right:auto;gap:6px;font-size:17px}
.entete>.marque img{width:34px;height:34px}
.entete>.menu,.entete>.acces-categories,.entete>.navigation,.entete>.recherche,
.entete>.langue,.entete>.devise{display:none}
.tactile{display:flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;
color:#fff;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tactile:focus-visible{outline:2px solid var(--accent-clair);outline-offset:-5px}
/* Le panneau : la recherche, les sections, la langue, la devise et les catégories */
.panneau:target,.panneau.ouvert{display:flex}
.panneau{position:fixed;inset:0;z-index:45;flex-direction:column;height:100vh;height:100dvh;background:var(--fond)}
.panneau-tete{flex:none;display:flex;align-items:center;justify-content:space-between;height:56px;
padding:0 2px 0 16px;background:#000;border-bottom:2px solid var(--accent)}
.panneau-nom{font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.14em}
.panneau-corps{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px 16px 40px}
.panneau .recherche{max-width:none;flex-wrap:wrap}
.panneau .resultats{position:static;flex-basis:100%;max-height:none;margin-top:6px}
.panneau-sections{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0 12px}
.panneau-sections a,.panneau-langues a,.panneau .devise button,.panneau-categories a,
.panneau-categories .vide>span{display:flex;align-items:center;min-height:48px;background:var(--fond-2);
border:1px solid var(--bord);color:var(--texte);text-decoration:none}
.panneau-sections a{justify-content:center;font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.panneau-sections a[aria-current]{border-color:var(--accent);color:#fff}
.panneau-reglages{display:grid;gap:8px;padding-bottom:18px;border-bottom:1px solid var(--bord)}
.panneau-langues{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.panneau-langues a{justify-content:center;gap:6px;padding:0 4px;font-size:13.5px;font-weight:700;color:var(--sourd);
overflow-wrap:anywhere}
.panneau-langues a[aria-current]{border-color:var(--accent);color:#fff}
.panneau-langues img{width:18px;height:13px;flex:none}
.panneau .devise{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.panneau .devise button{justify-content:center;padding:0;font-size:17px;border-bottom:1px solid var(--bord)}
.panneau .devise button[aria-pressed="true"]{border-color:var(--accent);color:#fff}
.panneau-titre{margin:22px 0 8px;font-size:11.5px;font-weight:800;text-transform:uppercase;
letter-spacing:.14em;color:var(--accent-clair)}
.panneau-categories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.panneau-categories a,.panneau-categories .vide>span{justify-content:space-between;gap:6px;
padding:6px 10px;font-size:14px;line-height:1.2}
.panneau-categories a[aria-current]{border-color:var(--accent);color:#fff}
.panneau-categories .vide>span{color:#6f6c6c}
.panneau-categories .nombre{flex:none;font-size:11.5px;color:var(--sourd)}
html.panneau-ouvert,html.panneau-ouvert body{overflow:hidden}
/* Accueil */
.ouverture{padding:10px 0 0}
.ouverture .recherche{margin-top:14px}
.index-groupes{display:block;margin-top:14px}
.index-groupes ul{display:flex;flex-wrap:wrap;gap:8px}
.index-groupes a{display:flex;align-items:center;min-height:44px;padding:0 14px;background:var(--fond-2);
border:1px solid var(--bord);color:var(--texte);text-decoration:none;font-size:13.5px;font-weight:700}
.groupe-titre{margin:38px 0 12px}
.ouverture+.groupe-titre{margin-top:28px}
section+section,.pub+section{margin-top:30px}
.groupe-titre+section{margin-top:0}
.accroche{font-size:14.5px;margin-bottom:10px}
.tout-voir{display:inline-flex;align-items:center;min-height:44px}
.tout-voir-bas{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:10px}
.deplier{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin-top:6px;
background:none;border:1px dashed #444;color:var(--texte);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.court.replie,.cartes>.carte.replie{display:none}
/* Cartes : la vignette à gauche, le texte à droite, les deux boutons dessous */
.cartes,.cartes.n1,.cartes.n2,.cartes.n3,.cartes.n4,.cartes.trois{display:flex;flex-direction:column;gap:8px}
.cartes>.carte{position:relative;display:grid;grid-template-columns:104px minmax(0,1fr);
grid-template-rows:auto auto 1fr auto;gap:6px 12px;padding:10px}
.cartes .carte-vignette{grid-column:1;grid-row:1/4;align-self:start}
.cartes .vignette,.accueil .cartes .vignette{aspect-ratio:4/3}
.cartes .vignette.marque{padding:8px}
.cartes .vignette.marque img{max-width:88%;max-height:74%}
.cartes .vignette b{font-size:12.5px;text-align:center;overflow-wrap:anywhere;padding:0 4px}
.cartes .vignette span{font-size:10.5px;overflow-wrap:anywhere;text-align:center}
.cartes .carte-vignette .drapeaux{left:4px;top:4px}
.cartes .carte-vignette .drapeau{width:18px;height:13px}
.cartes .carte-corps{display:contents}
.cartes .carte h3,.accueil .cartes .carte h3{grid-column:2;flex-wrap:wrap;justify-content:flex-start;
gap:4px 10px;font-size:15.5px;overflow-wrap:anywhere}
.cartes .carte p,.accueil .cartes .carte p{grid-column:2;display:block;overflow:visible;font-size:13.5px}
.cartes .carte .etiquettes{grid-column:2}
.cartes .carte .boutons{grid-column:1/-1;margin-top:4px;position:relative;z-index:1}
.cartes .carte h3 a::after,.article-carte h3 a::after{content:"";position:absolute;inset:0}
.article-carte{position:relative}
/* Lignes courtes de l'accueil et lignes du classement : toute la ligne mène
à la fiche, seul le bouton Visiter part sur le site. */
.colonnes{grid-template-columns:minmax(0,1fr);gap:6px;margin-top:8px}
.court,.ligne{position:relative}
.court{min-height:60px;padding:8px 8px 8px 10px;gap:10px}
.court .rang{width:auto;min-width:14px}
.court .logo{width:36px;height:36px}
.court-corps>a{font-size:15px;white-space:normal;overflow:visible;overflow-wrap:anywhere}
.court .domaine{white-space:normal;overflow-wrap:anywhere}
.court-corps>a::after,.ligne h3 a::after{content:"";position:absolute;inset:0}
.court .bouton,.ligne .bouton{position:relative;z-index:1;flex:none}
.court .bouton{padding:0 14px;font-size:12px}
.ligne{display:grid;grid-template-columns:auto 40px minmax(0,1fr) auto;gap:8px 10px;align-items:center;padding:10px}
.ligne .rang{width:auto;min-width:14px}
.ligne .logo{width:40px}
.ligne-corps{display:contents}
.ligne h3{grid-column:3;min-width:0;font-size:15.5px;overflow-wrap:anywhere}
.ligne h3 .domaine{display:block;margin-top:2px}
.ligne .bouton{grid-column:4;grid-row:1;padding:0 14px;font-size:12px}
.ligne p,.ligne .etiquettes{grid-column:1/-1}
/* Catégorie, blog, informations */
.fil{margin-bottom:4px}
.fil a{display:inline-flex;align-items:center;min-height:44px}
.puces a{display:flex;align-items:center;min-height:44px;padding:0 14px}
.methode{padding:12px 14px}
.texte-seo{margin-top:36px}
.liste-blog .article-corps{padding:12px}
.pagination{flex-wrap:wrap}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.page-information{padding:18px 16px 36px}
.page-information nav a{display:inline-flex;align-items:center;min-height:44px}
.liens-encart li{margin:0}
.liens-encart a{display:flex;align-items:center;min-height:44px;border-top:1px solid var(--bord)}
/* Tableaux. Une table à en-têtes de colonne devient une pile de fiches, une
par ligne, chaque valeur sous son libellé : site.js recopie l'en-tête de
colonne dans data-label et pose la classe. Sans script, la table garde sa
forme et défile dans sa boîte. Le tableau « En bref » n'a que deux colonnes :
le libellé passe au-dessus de la valeur. */
table.empile,table.empile tbody,table.empile tr,table.empile th,table.empile td{display:block;width:auto}
table.empile{min-width:0!important;border:0}
table.empile thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
table.empile caption{display:block;padding:0 0 8px;caption-side:top}
table.empile tr{margin:0 0 8px;background:var(--fond-2);border:1px solid var(--bord)}
table.empile tbody tr:hover{background:var(--fond-2)}
table.empile tbody th{padding:10px 12px 8px;border:0;color:#fff;font-weight:800;font-size:15px}
table.empile td{padding:8px 12px;border:0;border-top:1px solid var(--bord);text-align:left}
table.empile td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;
font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--sourd)}
table.empile .nombre{text-align:left;white-space:normal}
.corps .tableau:has(table.empile),.fiche-principal .tableau:has(table.empile),
.tableau-libre:has(table.empile),.table-comparaison:has(table.empile){overflow:visible;border:0}
.en-bref,.en-bref tbody,.en-bref tr,.en-bref th,.en-bref td{display:block;width:auto}
.en-bref{border-top:1px solid var(--bord)}
.en-bref caption{display:block}
.en-bref tr{padding:10px 0;border-bottom:1px solid var(--bord)}
.en-bref th,.en-bref td{padding:0;border:0;background:none}
.en-bref th{margin-bottom:2px;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em}
/* Fiche */
.fiche,.article-page{gap:20px}
.fiche-tete{gap:10px;margin:4px 0 10px}
.fiche-titre{flex-basis:100%;min-width:0}
.fiche-titre h1{overflow-wrap:anywhere}
.fiche-tete .bouton.grand{width:100%}
.affiche{min-height:150px;margin:4px 0 18px;padding:20px 16px}
.affiche-contenu{gap:14px}
.affiche-logo{width:72px;height:72px}
.affiche-marque{max-width:140px;max-height:64px}
.affiche-nom{font-size:clamp(24px,8vw,34px)}
.sommaire{padding:12px 14px}
.sommaire-corps ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:0;list-style:none}
.sommaire-corps a{display:flex;align-items:center;height:100%;min-height:44px;padding:6px 10px;
background:var(--fond-3);border:1px solid var(--bord);text-decoration:none;font-size:13.5px;line-height:1.25}
.fiche-principal>section{margin-top:14px;padding:0 16px 20px;scroll-margin-top:66px}
.fiche-principal>section>h2{margin:0 -16px 16px;padding:12px 16px;font-size:17px}
.fiche-principal>section p,.fiche-principal>section .texte-liste li,.faq dd{font-size:16px;line-height:1.65}
.fiche-principal>section .intertitre{margin:26px 0 10px;padding-top:20px}
.faq dt{font-size:16px}
.sources-pliees summary,.tarifs-autre>summary{display:flex;align-items:center;min-height:44px}
.sources a,.contact-direct,.corps a{overflow-wrap:anywhere}
.encart .bouton{min-height:48px}
/* La barre Visiter d'une fiche, posée par site.js quand le bouton du haut
est sorti de l'écran. La page garde sa place en bas. */
.barre-visite{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;gap:12px;
padding:8px 12px;background:#0a0a0a;border-top:2px solid var(--accent);
transform:translateY(110%);visibility:hidden;transition:transform .2s,visibility .2s}
.barre-visite.visible{transform:none;visibility:visible}
.barre-visite-nom{flex:1;min-width:0;font-weight:800;font-size:15px;overflow-wrap:anywhere;line-height:1.2}
.barre-visite .bouton{flex:none;padding:0 22px}
body.avec-barre{padding-bottom:64px}
/* Article */
.corps{font-size:16px;line-height:1.65}
.corps h2{margin:34px 0 10px;font-size:19px;scroll-margin-top:66px}
.corps h3{margin:26px 0 8px}
.couverture{margin-bottom:16px}
/* Contact */
.contact{padding:4px 0 24px}
/* La carte touche les bords : un sujet long tient dans le menu déroulant. */
.contact .carte{min-height:0;width:auto;max-width:none;margin:0 -16px;border-left:0;border-right:0}
.contact .carte h1{padding:14px 16px;font-size:18px}
.contact .dedans{padding:18px 16px 22px}
.formulaire input,.formulaire select,.formulaire textarea{min-height:48px;font-size:16px}
.formulaire .bouton{align-self:stretch;min-height:52px}
.contact .formulaire textarea{min-height:160px}
/* Pied de page */
.pied{padding:22px 16px 26px}
.pied nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;margin:14px 0 0}
.pied nav a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:4px;
border-bottom:1px solid var(--bord)}
.pied .langues-pied{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:6px}
.pied-note{margin-top:14px}
.pied-rta a{display:inline-block;padding:6px}
/* Mur 18+ : il défile si l'écran est trop bas, couché par exemple */
.mur{align-items:flex-start;overflow-y:auto;padding:16px}
.mur-boite{margin:auto;padding:22px 18px;gap:12px}
.mur-boite img{width:72px;height:72px}
.mur h2{font-size:19px}
.mur .boutons{flex-direction:column;align-items:stretch;width:100%}
.mur .bouton{white-space:normal;min-height:50px}
/* Fenêtre de consentement : les trois boutons l'un sous l'autre */
.consentement{padding:12px}
.consentement-boite{padding:16px;gap:10px}
.consentement p{font-size:13px;line-height:1.45}
.consentement-boutons{grid-template-columns:minmax(0,1fr);gap:8px}
.consentement .bouton{min-height:48px;white-space:normal}
.consentement-finalite{min-height:44px}
}
/* Téléphone couché : plus de largeur que de hauteur, on en profite. */
@media (min-width:600px) and (max-width:959.98px) and (max-height:500px){
.cartes,.cartes.n1,.cartes.n2,.cartes.n3,.cartes.n4,.cartes.trois{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.colonnes{grid-template-columns:repeat(2,minmax(0,1fr))}
.panneau-categories{grid-template-columns:repeat(3,minmax(0,1fr))}
.sommaire-corps ol{grid-template-columns:repeat(3,minmax(0,1fr))}
.consentement-boutons{grid-template-columns:repeat(3,minmax(0,1fr))}
.pied nav{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Blog, refonte du 25 septembre 2026 : l'article à la une, puis une grille.
Un article : titre et couverture côte à côte, sommaire dans la colonne,
une section encadrée par titre. */
.article-une{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:32px;align-items:center;padding:22px 0 26px;border-top:1px solid var(--bord);border-bottom:1px solid var(--bord);margin-bottom:24px}
.article-une h2{font-size:clamp(20px,2.4vw,28px);margin:6px 0 10px}
.article-une h2 a{color:#fff;text-decoration:none}
.article-une h2 a:hover{color:var(--accent-clair)}
.article-une p{color:var(--sourd)}
.article-une .couverture{margin:0}
.grille-blog{grid-template-columns:repeat(3,minmax(0,1fr))}
.article-tete{max-width:1000px;margin:4px 0 22px}
.article-principal>.couverture{margin:0 0 22px}
.article-tete .chapeau{margin:12px 0 14px}
.article-dates{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.article-dates span+span::before{content:"·";margin-right:14px;color:var(--bord)}
.article-intro{font-size:16px;margin-bottom:22px}
.article-principal .bloc-article{margin-top:18px;background:var(--fond-2);border:1px solid var(--bord)}
.article-principal .bloc-article>h2{margin:0;padding:14px 20px;background:var(--fond-3);border-bottom:1px solid var(--bord);font-size:18px}
.article-principal .bloc-article>:not(h2){margin-left:20px;margin-right:20px}
.article-principal .bloc-article>h2+*{margin-top:16px}
.article-principal .bloc-article>:last-child{margin-bottom:18px}
.article-principal .bloc-article h3{margin-top:18px}
.article-page .sommaire-colonne{max-height:none}
@media (max-width:900px){
.article-une{grid-template-columns:minmax(0,1fr);gap:16px}
.grille-blog{grid-template-columns:minmax(0,1fr)}
.article-principal .bloc-article>:not(h2){margin-left:14px;margin-right:14px}
.article-principal .bloc-article>h2{padding:12px 14px}
}
.article-colonne .sommaire a{text-decoration:none}.article-colonne .sommaire a:hover{color:var(--accent-clair)}
.page-article .article-principal{max-width:none}