/* ============================================================
   Timenjoy, media de la Cote d'Azur. Feuille de style v3.
   Charte officielle : brandbook Timenjoy, juillet 2025.
   Primaires : noir #000000, degrade #ff1e31 vers #ffaa00, blanc #ffffff.
   Titres en Hubhead, textes en Inter.
   ============================================================ */

@font-face{
  font-family:Hubhead; src:url(/assets/hubhead.woff2) format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
/* Filet de securite : si Hubhead ne se charge pas, les titres tombent sur
   Archivo Black plutot que sur une police systeme. Le navigateur ne telecharge
   ce fichier que dans ce cas. */
@font-face{
  font-family:"Archivo Black"; src:url(/assets/archivo-black.woff2) format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  /* --- primaires --- */
  --noir:#000000; --blanc:#ffffff;
  --rouge:#ff1e31; --orange:#ffaa00;
  --degrade:linear-gradient(103deg,#ff1e31 0%,#ff5a16 52%,#ffaa00 100%);
  /* --rouge-f sert au petit texte sur fond clair : le rouge de la charte
     n'y donne que 3,61 pour 1, sous le seuil d'accessibilite de 4,5. */
  --rouge-f:#d4101f; --corail:#ff6a52; --rouge-p:#FFF0EC;

  /* --- secondaires, une couleur par rubrique du media --- */
  --event:#fc3593;    --event-c:#fa55ab;    --event-p:#FFEFF7;
  --food:#ffa700;     --food-c:#ffd700;     --food-p:#FFF6E3;
  --sport:#1bc1c9;    --sport-c:#00dfe7;    --sport-p:#E7FAFB;
  --tourisme:#727430; --tourisme-c:#8b8b03; --tourisme-p:#F4F4E6;
  --itw:#006b89;      --itw-c:#003b51;      --itw-p:#E8F3F7;

  /* --- neutres, cales sur le noir de la charte --- */
  --nuit:#000000; --nuit-2:#0d0e10; --nuit-3:#191b1f;
  /* --gris-c a ete eclairci de #9a9ea7 a #717682 : a 2,68 pour 1 sur fond
     blanc, les mentions de source et les aides de recherche etaient sous
     le seuil d'accessibilite. Il donne maintenant 4,55. */
  --encre:#101114; --encre-2:#3c3f47; --gris:#6b6f78; --gris-c:#717682;
  --trait:#E6E7EB; --trait-d:#F1F1F4;
  --sable:#FAF8F5; --sable-2:#F2EFE9;
  --or:#C08A1E; --or-p:#FDF5E4;
  --azur:var(--itw); --azur-p:var(--itw-p);
  --vert:#0b7278; --vert-p:var(--sport-p);

  --display:Hubhead,"Archivo Black","Helvetica Neue",Arial,sans-serif;
  --ui:Inter,"Helvetica Neue",Arial,sans-serif;

  --max:1240px;
  --r:14px; --rg:20px; --rx:28px;
  --e:cubic-bezier(.22,.61,.36,1);
  --ombre:0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.07);
  --ombre-f:0 2px 6px rgba(0,0,0,.06), 0 24px 60px rgba(0,0,0,.14);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:#fff; color:var(--encre);
  font-family:var(--ui); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display); font-weight:400; line-height:1.12;
  letter-spacing:-.012em; margin:0}
p{margin:0}
button,input,select{font:inherit}

.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
.wrap-l{max-width:1440px; margin:0 auto; padding:0 24px}
@media(max-width:600px){.wrap,.wrap-l{padding:0 18px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- reveal ---------- */
.rv{opacity:1; transform:none}
html.anim .rv{opacity:0; transform:translateY(22px); transition:opacity .6s var(--e), transform .6s var(--e)}
html.anim .rv.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none} html{scroll-behavior:auto}}

/* ---------- bandeau maquette ---------- */
.demo{background:var(--nuit); color:#E9D9AE; font-size:12.5px; line-height:1.45;
  padding:8px 24px; text-align:center; position:relative; z-index:70}
.demo strong{color:#fff; font-weight:700}
.demo b{display:inline-block; background:var(--or); color:#241803; font-weight:800;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  padding:2px 8px; border-radius:999px; margin-right:9px; vertical-align:1px}
@media(max-width:700px){.demo{font-size:11.5px; padding:7px 16px; text-align:left}}

/* ---------- entete ---------- */
.hdr{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.88);
  backdrop-filter:saturate(1.8) blur(14px); border-bottom:1px solid var(--trait);
  transition:box-shadow .3s var(--e)}
.hdr.scr{box-shadow:0 1px 20px rgba(10,12,17,.07)}
.hdr-in{max-width:var(--max); margin:0 auto; padding:0 24px;
  display:flex; align-items:center; gap:20px; height:80px}
/* Le logotype est sur deux lignes : on le cale sur sa hauteur, jamais sur sa
   largeur, pour qu'il ne deborde pas de la barre et ne soit jamais deforme. */
.logo{display:block; line-height:0; text-decoration:none; flex:none}
.logo img{height:52px; width:auto}
@media(max-width:600px){.hdr-in{height:66px} .logo img{height:42px}}
.nav{display:flex; gap:2px; margin-left:auto; align-items:center}
.nav a{font-size:14.5px; font-weight:500; color:var(--encre-2); text-decoration:none;
  padding:9px 12px; border-radius:9px; transition:background .2s, color .2s; position:relative}
.nav a:hover{background:var(--sable); color:var(--encre)}
.nav a.on{color:var(--rouge-f); font-weight:700}
.nav .cta{background:var(--degrade); color:var(--noir); font-weight:800; padding:10px 17px;
  border-radius:999px; transition:transform .2s var(--e), background .2s}
.nav .cta:hover{background:var(--rouge-f); color:#fff; transform:translateY(-1px)}
.burger{display:none; margin-left:auto; background:none; border:1px solid var(--trait);
  border-radius:10px; padding:9px 13px; font-size:14px; font-weight:600; cursor:pointer}
@media(max-width:1080px){
  .burger{display:block}
  .nav{display:none; position:absolute; top:68px; left:0; right:0; background:#fff;
    border-bottom:1px solid var(--trait); flex-direction:column; align-items:stretch;
    padding:10px 16px 18px; gap:2px; box-shadow:var(--ombre)}
  .nav.open{display:flex; animation:drop .25s var(--e)}
  .nav a{padding:13px 12px; font-size:16.5px}
  .nav .cta{text-align:center; margin-top:8px}
}
@keyframes drop{from{opacity:0; transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- raccourcis ---------- */
.quick{border-bottom:1px solid var(--trait); background:#fff; position:sticky; top:68px; z-index:40}
.quick-in{max-width:var(--max); margin:0 auto; padding:11px 24px;
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none}
.quick-in::-webkit-scrollbar{display:none}
@media(max-width:600px){.quick-in{padding:10px 18px}}
.chip{flex:0 0 auto; background:#fff; border:1px solid var(--trait); border-radius:999px;
  padding:7px 15px; font-size:14px; font-weight:600; color:var(--encre-2);
  text-decoration:none; cursor:pointer; transition:.2s var(--e); white-space:nowrap}
.chip:hover{border-color:var(--encre); color:var(--encre); transform:translateY(-1px)}
.chip.on{background:var(--encre); border-color:var(--encre); color:#fff}
.chip.libre{border-color:#BCE6CE; background:var(--vert-p); color:var(--vert)}
.chip.libre.on{background:var(--vert); border-color:var(--vert); color:#fff}

/* ---------- hero ---------- */
.hero{position:relative; background:var(--nuit); color:#fff; overflow:hidden;
  padding:72px 0 78px}
.hero::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(90% 65% at 78% 22%, rgba(255,34,49,.20), transparent 62%),
             radial-gradient(70% 55% at 8% 88%, rgba(18,115,184,.20), transparent 60%)}
.hero-in{position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr;
  gap:52px; align-items:center}
@media(max-width:980px){.hero{padding:52px 0 56px}.hero-in{grid-template-columns:1fr; gap:34px}}
.hero .kick{display:inline-flex; align-items:center; gap:9px; font-size:11.5px; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase; color:#FFCFA6;
  background:rgba(255,34,49,.14); border:1px solid rgba(255,34,49,.3);
  padding:6px 13px; border-radius:999px; margin-bottom:22px}
.hero .kick span{width:6px; height:6px; border-radius:50%; background:var(--degrade);
  animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(255,34,49,.6)}
  50%{opacity:.75; box-shadow:0 0 0 7px rgba(255,34,49,0)}}
.hero h1{font-size:clamp(38px,5.6vw,68px); color:#fff;
  letter-spacing:-.035em; margin-bottom:20px}
/* le mot mis en avant porte le degrade de la marque */
.hero h1 em{font-style:normal; background:var(--degrade);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-fill-color:transparent}
@supports not (background-clip:text){.hero h1 em{color:var(--orange);
  -webkit-text-fill-color:var(--orange)}}
.hero .sub{font-size:18.5px; color:#B3B3BB; max-width:50ch; line-height:1.6}
.hero .acts{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}
.hero .meta{display:flex; gap:26px; flex-wrap:wrap; margin-top:34px;
  padding-top:26px; border-top:1px solid rgba(255,255,255,.12)}
.hero .meta div b{display:block; font-family:var(--display); font-size:27px; font-weight:800; color:#fff}
.hero .meta div span{font-size:12.5px; color:#87878F}

/* mosaique photo */
.mos{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; transform:rotate(-2deg)}
.mos div{border-radius:14px; overflow:hidden; background:var(--nuit-3); aspect-ratio:3/4}
.mos div:nth-child(3n+2){margin-top:-22px}
.mos div:nth-child(3n){margin-top:16px}
.mos img{width:100%; height:100%; object-fit:cover; opacity:.92;
  animation:fadein .9s var(--e) both}
@keyframes fadein{from{opacity:0; transform:scale(1.06)}to{opacity:.92; transform:none}}
@media(max-width:980px){.mos{transform:none; grid-template-columns:repeat(4,1fr)}
  .mos div{aspect-ratio:1/1} .mos div:nth-child(n){margin-top:0}}
@media(max-width:560px){.mos{grid-template-columns:repeat(3,1fr)} .mos div:nth-child(n+7){display:none}}

/* ---------- sections ---------- */
section{padding:56px 0}
section.tight{padding:36px 0}
section.sable{background:var(--sable)}
.sec-hd{display:flex; align-items:flex-end; gap:16px; margin-bottom:26px; flex-wrap:wrap}
.sec-hd h2{font-size:clamp(25px,3.2vw,36px)}
.sec-hd p{color:var(--gris); font-size:15px; margin-top:6px; max-width:58ch}
.sec-hd .more{margin-left:auto; font-size:14.5px; font-weight:700; color:var(--rouge-f);
  text-decoration:none; white-space:nowrap; display:inline-flex; align-items:center; gap:6px}
.sec-hd .more:hover{gap:10px}
.sec-hd .more::after{content:"→"; transition:.2s var(--e)}
.kicker{font-size:11.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--rouge-f); margin-bottom:10px; display:block}

/* ---------- grilles ---------- */
.g2{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
.g3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.g4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
@media(max-width:980px){.g4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.g2,.g3{grid-template-columns:1fr; gap:20px}}

/* ---------- carte ---------- */
.card{background:#fff; border:1px solid var(--trait); border-radius:var(--rg);
  overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:inherit;
  transition:transform .35s var(--e), box-shadow .35s var(--e), border-color .3s}
.card:hover{transform:translateY(-4px); box-shadow:var(--ombre-f); border-color:transparent}
.card .vis{aspect-ratio:4/3; overflow:hidden; background:var(--sable-2); position:relative}
.card .vis img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--e)}
.card:hover .vis img{transform:scale(1.07)}
.card .vis .no{position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--sable-2),#E6DFD5);
  color:#B2A695; font-family:var(--display); font-size:30px; font-weight:800}
.card .bd{padding:16px 18px 20px; display:flex; flex-direction:column; gap:9px; flex:1}
.card h3{font-size:18.5px; line-height:1.24}
.card .dek{font-size:14.5px; color:var(--encre-2); line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.card .meta{font-size:13px; color:var(--gris); margin-top:auto; padding-top:8px;
  display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center}
.card .meta b{color:var(--encre-2); font-weight:700}

.tag{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:6px;
  background:var(--azur-p); color:var(--azur); align-self:flex-start}
.tag.r{background:var(--rouge-p); color:var(--rouge-f)}
.tag.v{background:var(--vert-p); color:var(--vert)}
.tag.o{background:var(--or-p); color:#7A5405}
.tag.n{background:var(--nuit); color:#fff}
/* Les cinq rubriques du brandbook. Chaque contenu porte la couleur de sa
   famille, comme sur les comptes Instagram et YouTube. */
.tag.ev{background:var(--event-p);    color:#c00e68}
.tag.fo{background:var(--food-p);     color:#8a5a00}
.tag.sp{background:var(--sport-p);    color:#0b7278}
.tag.to{background:var(--tourisme-p); color:#5e6027}
.tag.it{background:var(--itw-p);      color:var(--itw)}

/* etiquette sur image */
.card .vis .fl{position:absolute; left:12px; top:12px; z-index:2;
  background:rgba(10,12,17,.78); backdrop-filter:blur(6px); color:#fff;
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 10px; border-radius:7px}
.card .vis .fl.v{background:rgba(21,121,74,.9)}

/* ---------- une ---------- */
.une{display:grid; grid-template-columns:1.25fr 1fr; gap:34px; align-items:stretch}
@media(max-width:900px){.une{grid-template-columns:1fr}}
.une-main{position:relative; border-radius:var(--rx); overflow:hidden; min-height:430px;
  display:flex; align-items:flex-end; text-decoration:none; color:#fff; background:var(--nuit-2)}
.une-main img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--e)}
.une-main:hover img{transform:scale(1.045)}
.une-main::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,10,14,.93) 6%, rgba(8,10,14,.5) 42%, rgba(8,10,14,.06) 78%)}
.une-txt{position:relative; z-index:2; padding:34px 32px}
@media(max-width:600px){.une-txt{padding:24px 20px} .une-main{min-height:340px}}
.une-txt h2{font-size:clamp(25px,3.4vw,38px); color:#fff; margin:12px 0 12px}
.une-txt p{color:#C3CAD6; font-size:15.5px; max-width:52ch;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.une-side{display:flex; flex-direction:column; gap:14px}
.une-side .mini{display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:center;
  border:1px solid var(--trait); border-radius:var(--r); padding:10px; text-decoration:none;
  color:inherit; transition:.3s var(--e); flex:1}
.une-side .mini:hover{border-color:transparent; box-shadow:var(--ombre); transform:translateX(3px)}
.une-side .mini .ph{width:96px; height:76px; border-radius:10px; overflow:hidden; background:var(--sable-2)}
.une-side .mini .ph img{width:100%; height:100%; object-fit:cover}
.une-side .mini h3{font-size:16px; line-height:1.28;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.une-side .mini .meta{font-size:12.5px; color:var(--gris); margin-top:5px}

/* ---------- liste agenda ---------- */
.ag{border-top:1px solid var(--trait)}
.ag-row{display:grid; grid-template-columns:92px 1fr 150px; gap:20px; align-items:center;
  padding:18px 6px; border-bottom:1px solid var(--trait-d); text-decoration:none; color:inherit;
  transition:background .25s var(--e)}
.ag-row:hover{background:var(--sable)}
.ag-d{text-align:center; background:var(--sable); border:1px solid var(--trait);
  border-radius:11px; padding:8px 4px; line-height:1.1; transition:.25s var(--e)}
/* au survol, le libelle de dix pixels passe en blanc : il lui faut le rouge
   fonce pour rester lisible (5,39 contre 3,83 avec le rouge vif). */
.ag-row:hover .ag-d{background:var(--rouge-f); border-color:var(--rouge-f)}
.ag-d span{display:block; font-size:10px; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:var(--rouge-f); transition:.25s}
.ag-d b{display:block; font-family:var(--display); font-size:23px; font-weight:800; color:var(--encre); transition:.25s}
.ag-row:hover .ag-d span,.ag-row:hover .ag-d b{color:#fff}
.ag-t{min-width:0}
.ag-t h3{font-size:18px; margin-bottom:4px}
.ag-t .meta{font-size:13.5px; color:var(--gris); display:flex; gap:4px 12px; flex-wrap:wrap}
.ag-p{font-size:14.5px; font-weight:700; color:var(--encre-2); text-align:right}
.ag-p.libre{color:var(--vert)}
@media(max-width:700px){
  .ag-row{grid-template-columns:62px 1fr; gap:14px; padding:15px 2px}
  .ag-d b{font-size:19px}
  .ag-p{grid-column:2; text-align:left; font-size:13px}
}

/* ---------- rail horizontal ---------- */
.rail-w{position:relative}
.rail{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 24px 14px; margin:0 -24px; scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail > *{flex:0 0 232px; scroll-snap-align:start}
@media(max-width:600px){.rail{padding:4px 18px 14px; margin:0 -18px} .rail > *{flex:0 0 200px}}
.rail-nav{display:flex; gap:8px; margin-left:auto}
.sec-hd .rail-nav + .more{margin-left:14px}
.rail-nav button{width:38px; height:38px; border-radius:50%; border:1px solid var(--trait);
  background:#fff; cursor:pointer; font-size:15px; color:var(--encre-2); transition:.2s var(--e)}
.rail-nav button:hover{background:var(--encre); color:#fff; border-color:var(--encre)}
@media(max-width:700px){.rail-nav{display:none}}

/* ---------- video ---------- */
.vcard{background:#fff; border-radius:var(--r); overflow:hidden; text-decoration:none;
  color:inherit; display:flex; flex-direction:column;
  transition:transform .35s var(--e)}
.vcard:hover{transform:translateY(-4px)}
.vcard .thumb{aspect-ratio:9/16; background:var(--noir); position:relative; border-radius:var(--r); overflow:hidden}
.vcard .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--e)}
.vcard:hover .thumb img{transform:scale(1.06)}
.vcard .thumb::before{content:""; position:absolute; inset:auto 0 0 0; height:52%; z-index:1;
  background:linear-gradient(to top,rgba(8,10,14,.85),transparent)}
.vcard .play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.18);
  backdrop-filter:blur(8px); border:1.5px solid rgba(255,255,255,.55); z-index:2;
  display:grid; place-items:center; transition:.3s var(--e)}
.vcard .play::after{content:""; border-left:13px solid #fff; border-top:8px solid transparent;
  border-bottom:8px solid transparent; margin-left:4px}
.vcard:hover .play{background:var(--rouge); border-color:var(--rouge); transform:translate(-50%,-50%) scale(1.1)}
.vcard .vtxt{position:absolute; inset:auto 0 0 0; z-index:2; padding:12px 13px 13px; color:#fff}
.vcard .vtxt h3{font-family:var(--ui); font-size:13.5px; font-weight:600; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.vcard .vtxt .meta{font-size:11.5px; color:#B9C1CE; margin-top:6px}

/* ---------- filtres ---------- */
.filtres{display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  padding:16px 0 20px; border-bottom:1px solid var(--trait); margin-bottom:26px}
.filtres select,.filtres input{font-size:14.5px; padding:10px 14px; border-radius:10px;
  border:1px solid var(--trait); background:#fff; color:var(--encre-2); transition:.2s}
.filtres select:focus,.filtres input:focus{outline:none; border-color:var(--encre)}
.filtres input{min-width:230px; flex:1; max-width:340px}
.cpt{margin-left:auto; font-size:14px; color:var(--gris); font-weight:600}
@media(max-width:600px){.cpt{margin-left:0; width:100%}}
.vide{padding:60px 20px; text-align:center; color:var(--gris)}
.vide b{display:block; font-family:var(--display); font-size:22px; color:var(--encre); margin-bottom:8px}

/* ---------- article ---------- */
.art{max-width:740px; margin:0 auto}
.fil{font-size:13px; color:var(--gris); margin-bottom:18px; display:flex; gap:7px; flex-wrap:wrap}
.fil a{color:var(--gris); text-decoration:none}
.fil a:hover{color:var(--rouge-f)}
.art h1{font-size:clamp(30px,5vw,50px); margin-bottom:16px}
.chapo{font-size:19px; color:var(--encre-2); line-height:1.6; margin-bottom:22px}
.sign{display:flex; gap:11px; align-items:center; font-size:13.5px; color:var(--gris);
  padding:15px 0; border-top:1px solid var(--trait); border-bottom:1px solid var(--trait); margin-bottom:28px}
.sign .av{width:36px; height:36px; border-radius:50%; background:var(--rouge-p);
  color:var(--rouge-f); display:grid; place-items:center; font-weight:800; font-size:13px}
.art h2{font-size:27px; margin:38px 0 14px}
.art h3{font-size:21px; margin:28px 0 10px}
.art p{font-size:17.5px; line-height:1.7; color:var(--encre-2); margin-bottom:16px}
.art a[href]{color:var(--azur); text-decoration:underline; text-underline-offset:3px}
.hero-img{aspect-ratio:16/9; border-radius:var(--rx); overflow:hidden; margin-bottom:26px; background:var(--sable-2)}
.hero-img img{width:100%; height:100%; object-fit:cover}
.embed{margin:28px 0; border-radius:var(--rg); overflow:hidden; background:#000; border:1px solid var(--trait)}
.embed iframe{display:block; width:100%; aspect-ratio:9/16; max-height:620px; border:0}
.embed .cap{background:var(--sable); color:var(--gris); font-size:13px; padding:11px 15px; border-top:1px solid var(--trait)}

.infos{border:1px solid var(--trait); border-radius:var(--rg); background:var(--sable); padding:24px 26px; margin:34px 0}
.infos h3,.infos h2{font-size:19.5px; margin:0 0 15px; line-height:1.25}
.infos dl{display:grid; grid-template-columns:120px 1fr; gap:10px 18px; margin:0; font-size:15.5px}
.infos dt{color:var(--gris); font-weight:600}
.infos dd{margin:0; color:var(--encre-2)}
.infos dd a{color:var(--azur)}
@media(max-width:560px){.infos dl{grid-template-columns:1fr; gap:2px} .infos dt{margin-top:10px}}

.note{border-left:3px solid var(--or); background:var(--or-p); padding:15px 19px;
  border-radius:0 11px 11px 0; font-size:14.5px; color:#6B4B08; margin:26px 0; line-height:1.6}
.encadre{border-left:3px solid var(--or); background:var(--or-p); padding:15px 19px;
  border-radius:0 11px 11px 0; font-size:14.5px; color:#6B4B08; margin:26px 0; line-height:1.6}
.encadre .chip{margin:0 6px 6px 0}

.note b{color:#4A3405}
/* Le lien d'evitement : invisible tant qu'on ne l'atteint pas au clavier. */
.evite{position:absolute; left:-9999px; top:0; z-index:200; background:#000; color:#fff;
  padding:12px 20px; border-radius:0 0 11px 0; font-weight:700; text-decoration:none}
.evite:focus{left:0}
/* .avert : meme aspect que .note, mais destine au lecteur. Contrairement a
   .note, il n'est pas retire a la publication. */
.avert{border-left:3px solid var(--azur); background:var(--azur-pale); padding:15px 19px;
  border-radius:0 11px 11px 0; font-size:14.5px; color:#0C4A6E; margin:26px 0; line-height:1.6}
.avert b{color:#083352}
.src{font-size:13px; color:var(--gris-c); font-style:italic; margin:18px 0}

/* ---------- newsletter ---------- */
.nl{background:var(--nuit); color:#fff; border-radius:var(--rx); padding:44px 40px;
  display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center;
  position:relative; overflow:hidden}
.nl::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 100% at 88% 10%, rgba(255,34,49,.22), transparent 62%)}
.nl > *{position:relative; z-index:2}
@media(max-width:880px){.nl{grid-template-columns:1fr; padding:32px 24px}}
.nl h2{font-size:clamp(25px,3.2vw,33px); color:#fff; margin-bottom:10px}
.nl p{color:#B3B3BB; font-size:15.5px; max-width:52ch}
.nl form{display:flex; gap:10px; flex-wrap:wrap}
.nl input{font-size:15px; padding:14px 17px; border-radius:12px; border:1px solid #2A303C;
  background:#161A23; color:#fff; min-width:250px}
.nl input::placeholder{color:#7e7e86}
.nl input:focus{outline:none; border-color:var(--rouge)}
.nl button{font-size:15px; font-weight:700; padding:14px 24px; border-radius:12px; border:0;
  background:var(--degrade); color:var(--noir); cursor:pointer; white-space:nowrap; transition:.2s var(--e)}
.nl button:hover{background:var(--rouge-f); transform:translateY(-1px)}
.nl small{display:block; color:#737C8C; font-size:12.5px; margin-top:12px}
.nl small a{color:#B3B3BB}

/* ---------- chiffres ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
@media(max-width:860px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{border:1px solid var(--trait); border-radius:var(--rg); padding:24px 20px; background:#fff}
.stat b{display:block; font-family:var(--display); font-size:37px; font-weight:800;
  letter-spacing:-.03em; line-height:1}
.stat span{display:block; font-size:14.5px; color:var(--encre-2); margin-top:7px}
.stat em{display:block; font-style:normal; font-size:11.5px; color:var(--gris-c); margin-top:9px}

/* ---------- offres ---------- */
.offres{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media(max-width:900px){.offres{grid-template-columns:1fr}}
.offre{border:1px solid var(--trait); border-radius:var(--rg); padding:28px 26px; background:#fff;
  display:flex; flex-direction:column; gap:12px; transition:.35s var(--e)}
.offre:hover{box-shadow:var(--ombre-f); transform:translateY(-3px)}
.offre.mis{border-color:var(--rouge); box-shadow:0 0 0 3px var(--rouge-p)}
.offre h3{font-size:22px}
.offre ul{margin:6px 0 0; padding-left:20px; color:var(--encre-2); font-size:15px; line-height:1.7}
.offre .prix{font-family:var(--display); font-size:15px; color:var(--gris); font-weight:600; margin-top:auto; padding-top:10px}

/* ---------- boutons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; font-size:15.5px; font-weight:700;
  text-decoration:none; padding:14px 26px; border-radius:999px; background:var(--degrade);
  color:var(--noir); border:0; cursor:pointer; font-family:var(--ui); transition:.25s var(--e)}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(255,30,49,.3); filter:saturate(1.15)}
.btn.sec{background:rgba(255,255,255,.07); color:#fff; border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(6px)}
.btn.sec:hover{background:rgba(255,255,255,.14); box-shadow:none}
.btn.ghost{background:#fff; color:var(--encre); border:1px solid var(--trait)}
.btn.ghost:hover{background:var(--sable); box-shadow:var(--ombre)}

/* ---------- pied ---------- */
.ft{background:var(--nuit); color:#fff; margin-top:60px; padding:54px 0 32px}
.ft-in{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px}
@media(max-width:860px){.ft-in{grid-template-columns:1fr 1fr; gap:28px}}
@media(max-width:480px){.ft-in{grid-template-columns:1fr}}
.ft .logo img{height:66px; width:auto}
.ft .ft-t{margin:0; font-family:var(--ui); font-size:12px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:#7e7e86; margin-bottom:13px}
.ft ul{list-style:none; margin:0; padding:0; font-size:14.5px; line-height:2.1}
/* Une cible tactile doit faire au moins 24 px de haut (WCAG 2.5.8). Les liens
   du pied de page en faisaient 17 : sur telephone, on tapait a cote. */
.ft li a{display:inline-flex; align-items:center; min-height:26px}
.fil a,.nl small a{display:inline-flex; align-items:center; min-height:24px}
.ft a{color:#B3B3BB; text-decoration:none; transition:color .2s}
.ft a:hover{color:#fff}
.ft .about{font-size:14.5px; color:#87878F; max-width:34ch; margin-top:12px; line-height:1.65}
.ft .bas a{display:inline-flex; align-items:center; min-height:26px}
.ft .bas{margin-top:38px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1);
  font-size:12.5px; color:#6B7587; display:flex; gap:18px; flex-wrap:wrap}

/* ---------- divers ---------- */
.pagin{display:flex; gap:8px; justify-content:center; margin-top:34px; flex-wrap:wrap}
.pagin a,.pagin span{padding:9px 14px; border-radius:9px; border:1px solid var(--trait);
  font-size:14px; font-weight:600; text-decoration:none; color:var(--encre-2)}
.pagin a:hover{background:var(--sable)}
.pagin .on{background:var(--encre); color:#fff; border-color:var(--encre)}
.top{position:fixed; right:22px; bottom:22px; width:44px; height:44px; border-radius:50%;
  background:var(--encre); color:#fff; border:0; cursor:pointer; z-index:55; font-size:17px;
  opacity:0; pointer-events:none; transition:.3s var(--e); box-shadow:var(--ombre-f)}
.top.on{opacity:1; pointer-events:auto}

/* Commentaires destinés à l'équipe, masqués dès que le site est public */
.note.interne{display:none !important}

/* ============================================================
   Lecteur vidéo vertical, façon Reels, directement sur le site
   ============================================================ */
.vmodal{position:fixed; inset:0; z-index:200; background:rgba(6,8,12,.94);
  backdrop-filter:blur(18px); display:none; place-items:center; padding:24px}
.vmodal.on{display:grid; animation:vfade .25s var(--e)}
@keyframes vfade{from{opacity:0}to{opacity:1}}
.vmodal-in{position:relative; width:min(430px,100%); max-height:calc(100vh - 48px);
  display:flex; flex-direction:column; gap:14px}
.vmodal .player{position:relative; width:100%; aspect-ratio:9/16; border-radius:18px;
  overflow:hidden; background:#000; box-shadow:0 30px 80px rgba(0,0,0,.6)}
.vmodal .player iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.vmodal .info{color:#fff}
.vmodal .info h3{font-family:var(--ui); font-size:15.5px; font-weight:600; line-height:1.4}
.vmodal .info .meta{font-size:13px; color:#98A0B2; margin-top:7px;
  display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.vmodal .info .meta a{color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35)}
.vclose,.vprev,.vnext{position:absolute; z-index:3; width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.12);
  backdrop-filter:blur(10px); color:#fff; font-size:19px; cursor:pointer;
  display:grid; place-items:center; transition:.2s var(--e)}
.vclose:hover,.vprev:hover,.vnext:hover{background:#fff; color:var(--noir)}
.vclose{top:-4px; right:-58px}
.vprev{top:50%; left:-70px; transform:translateY(-50%)}
.vnext{top:50%; right:-70px; transform:translateY(-50%)}
.vcount{position:absolute; top:-4px; left:-58px; z-index:3; color:#87878F; font-size:13px;
  font-weight:600; white-space:nowrap}
@media(max-width:820px){
  .vmodal{padding:0}
  .vmodal-in{width:100%; max-height:100vh; gap:0}
  .vmodal .player{border-radius:0; aspect-ratio:auto; flex:1; min-height:0}
  .vmodal .info{padding:14px 18px 22px; background:var(--noir)}
  .vclose{top:14px; right:14px}
  .vprev,.vnext{display:none}
  .vcount{top:20px; left:18px}
}
.vcard{cursor:pointer}
.play-hint{position:absolute; left:12px; top:12px; z-index:3; background:rgba(10,12,17,.72);
  backdrop-filter:blur(6px); color:#fff; font-size:10.5px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; padding:5px 9px; border-radius:6px}

/* ============================================================
   La carte, en vue partagée liste et plan
   ============================================================ */
.carte-wrap{display:grid; grid-template-columns:420px 1fr;
  height:calc(100vh - 70px); min-height:560px}
.carte-map{width:100%; height:100%; background:var(--sable-2); min-height:300px}
.carte-side{display:flex; flex-direction:column; border-right:1px solid var(--trait); background:#fff; min-height:0}
.carte-hd{padding:22px 22px 16px; border-bottom:1px solid var(--trait)}
.carte-hd h1{font-size:25px; margin-bottom:8px}
.carte-hd p{font-size:14.5px; color:var(--gris); margin-bottom:14px}
.carte-hd input{width:100%; font-size:15px; padding:11px 15px; border-radius:11px;
  border:1px solid var(--trait); background:var(--sable)}
.carte-hd input:focus{outline:none; border-color:var(--encre); background:#fff}
.carte-chips{display:flex; gap:7px; flex-wrap:wrap; margin-top:11px}
.carte-chips .chip{font-size:12.5px; padding:6px 12px; border:1px solid var(--trait);
  background:#fff; border-radius:999px; cursor:pointer; font-weight:600; color:var(--encre-2)}
.carte-chips .chip.on{background:var(--encre); color:#fff; border-color:var(--encre)}
.carte-chips .chip.libre.on{background:var(--vert); border-color:var(--vert)}
.carte-cpt{font-size:13px; color:var(--gris); font-weight:600; margin-top:13px}
.carte-liste{overflow-y:auto; flex:1; padding:8px 0; min-height:0}
@media(max-width:1000px){.carte-liste{max-height:none; overflow:visible}}
.cpt-item{display:grid; grid-template-columns:78px 1fr; gap:13px; padding:12px 22px;
  cursor:pointer; text-decoration:none; color:inherit; border-bottom:1px solid var(--trait-d);
  transition:background .2s var(--e)}
.cpt-item:hover,.cpt-item.actif{background:var(--sable)}
.cpt-item .ph{width:78px; height:64px; border-radius:9px; overflow:hidden; background:var(--sable-2)}
.cpt-item .ph img{width:100%; height:100%; object-fit:cover}
.cpt-item h3{font-size:15px; line-height:1.3; margin-bottom:4px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.cpt-item .sub{font-size:12.5px; color:var(--gris);
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden}
.cpt-item .bad{display:inline-block; font-size:10px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; padding:2px 6px; border-radius:4px; margin-bottom:5px;
  background:var(--azur-pale); color:var(--azur)}
.cpt-item .bad.e{background:var(--rouge-pale); color:var(--rouge-f)}
.leaflet-container{font-family:var(--ui)}
/* Sur la carte, les adresses portent le jaune FOOD et les sorties le rose
   EVENT : les deux familles se distinguent au premier coup d'oeil. */
.pin{background:var(--food); color:var(--noir); border-radius:999px; font-size:11.5px; font-weight:800;
  padding:5px 11px; white-space:nowrap; box-shadow:0 2px 10px rgba(0,0,0,.3);
  border:2px solid #fff; transition:.18s var(--e)}
.pin.e{background:var(--event)}
.pin.actif{background:var(--encre); transform:scale(1.14); z-index:900 !important}
.leaflet-popup-content{margin:12px 14px; font-family:var(--ui)}
.leaflet-popup-content h4{font-family:var(--display); font-size:16px; margin:0 0 5px}
.leaflet-popup-content p{font-size:13px; color:var(--gris); margin:0 0 9px}
.leaflet-popup-content a.btn{padding:7px 14px; font-size:13px}

/* Sur mobile, la carte passe au-dessus et reste visible pendant qu'on fait
   defiler la liste. Ce bloc doit rester APRES les regles de base. */
@media(max-width:1000px){
  .carte-wrap{grid-template-columns:1fr; height:auto; min-height:0}
  .carte-map{height:52vh; min-height:300px; order:-1;
    position:sticky; top:68px; z-index:5; border-bottom:1px solid var(--trait)}
  .carte-side{border-right:0}
  .carte-liste{overflow:visible; max-height:none}
  .carte-hd{padding:18px 18px 14px}
  .carte-hd h1{font-size:21px}
  .cpt-item{padding:11px 18px}
}

/* regroupement des points de la carte */
.grappe{width:40px; height:40px; border-radius:50%; background:var(--degrade); color:var(--noir);
  display:grid; place-items:center; font-size:14px; font-weight:800; border:3px solid #fff;
  box-shadow:0 3px 12px rgba(10,12,17,.35)}
.marker-cluster{background:none !important}
.marker-cluster div{background:none !important; margin:0 !important; width:40px !important; height:40px !important}
.pin{max-width:150px; overflow:hidden; text-overflow:ellipsis}
.leaflet-container a.leaflet-popup-close-button{color:var(--gris)}

/* bascule de langue */
.nav a.lang{font-size:13px; font-weight:700; color:var(--gris); border:1px solid var(--trait);
  border-radius:999px; padding:7px 13px; margin-right:6px}
.nav a.lang:hover{border-color:var(--encre); color:var(--encre); background:transparent}

/* tableaux et listes dans les dossiers */
.art .tbl{overflow-x:auto; margin:24px 0; border:1px solid var(--trait); border-radius:var(--r)}
.art table{width:100%; border-collapse:collapse; font-size:15px; min-width:520px}
.art th{background:var(--sable); text-align:left; font-weight:700; padding:12px 14px;
  border-bottom:1px solid var(--trait); font-size:13.5px}
.art td{padding:12px 14px; border-bottom:1px solid var(--trait-d); color:var(--encre-2)}
.art tr:last-child td{border-bottom:0}
.art ul.lst{margin:0 0 18px; padding-left:22px; font-size:17px; line-height:1.7; color:var(--encre-2)}
.art ul.lst li{margin-bottom:9px}

/* ============================================================
   Recherche globale
   ============================================================ */
.btn-rech{background:none; border:1px solid var(--trait); border-radius:999px;
  width:38px; height:38px; display:grid; place-items:center; cursor:pointer;
  font-size:15px; color:var(--encre-2); margin-right:6px; transition:.2s var(--e)}
.btn-rech:hover{border-color:var(--encre); color:var(--encre)}
.rech{position:fixed; inset:0; z-index:190; background:rgba(10,12,17,.6);
  backdrop-filter:blur(8px); display:none; justify-content:center; padding:11vh 20px 20px}
.rech.on{display:flex; animation:vfade .2s var(--e)}
.rech-box{width:min(640px,100%); background:#fff; border-radius:var(--rx);
  box-shadow:0 30px 90px rgba(10,12,17,.4); overflow:hidden; max-height:74vh;
  display:flex; flex-direction:column}
.rech-box input{width:100%; border:0; border-bottom:1px solid var(--trait);
  padding:22px 24px; font-size:18px; font-family:var(--ui)}
.rech-box input:focus{outline:none}
.rech-res{overflow-y:auto; flex:1}
.rech-res a{display:grid; grid-template-columns:52px 1fr auto; gap:14px; align-items:center;
  padding:12px 22px; text-decoration:none; color:inherit; border-bottom:1px solid var(--trait-d)}
.rech-res a:hover,.rech-res a.sel{background:var(--sable)}
.rech-res .ph{width:52px; height:52px; border-radius:9px; overflow:hidden; background:var(--sable-2)}
.rech-res .ph img{width:100%; height:100%; object-fit:cover}
.rech-res h4{font-family:var(--display); font-size:16px; margin:0 0 3px; line-height:1.25}
.rech-res p{font-size:13px; color:var(--gris); margin:0}
.rech-res .cat{font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--rouge-f); white-space:nowrap}
.rech-vide{padding:38px 24px; text-align:center; color:var(--gris); font-size:15px}
.rech-aide{padding:13px 24px; font-size:12.5px; color:var(--gris-c); border-top:1px solid var(--trait-d)}
@media(max-width:600px){.rech{padding:0} .rech-box{max-height:100vh; border-radius:0; height:100%}}

/* Questions fréquentes */
.faq{margin:18px 0 8px; border-top:1px solid var(--trait)}
.faq details{border-bottom:1px solid var(--trait)}
.faq summary{padding:17px 34px 17px 0; font-family:var(--display); font-size:18.5px;
  font-weight:700; cursor:pointer; list-style:none; position:relative; line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:4px; top:15px; font-size:23px;
  font-weight:400; color:var(--rouge-f); transition:transform .25s var(--e)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--rouge-f)}
.faq details > div{padding:0 0 18px; font-size:16.5px; line-height:1.68; color:var(--encre-2)}

/* mention d'auteur sous une photo sous licence Creative Commons */
.credit{font-size:12px; color:var(--gris); margin-top:7px; letter-spacing:.01em}
.credit a{color:var(--gris); text-decoration:underline; text-underline-offset:2px}
.credit a:hover{color:var(--encre)}

/* les adresses Timenjoy a moins de neuf cents metres */
.proches ul.lst{margin:0; padding:0; list-style:none}
.proches ul.lst li{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:9px 0; border-bottom:1px solid var(--trait-d)}
.proches ul.lst li:last-child{border-bottom:0}
.proches ul.lst a{font-weight:700; text-decoration:none; color:var(--encre)}
.proches ul.lst a:hover{color:var(--rouge-f)}
.proches ul.lst span{font-size:13.5px; color:var(--gris); margin-left:auto;
  white-space:nowrap}

/* titre de section au-dessus d'une grille de liste */
.liste-t{font-size:15px; font-weight:400; color:var(--gris); letter-spacing:.02em;
  margin:6px 0 14px; font-family:var(--ui)}

/* ---------- appel a l'action Instagram ---------- */
.cta-ig{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:34px 0 8px;
  padding:20px 22px; border-radius:var(--rg); background:var(--nuit); color:#fff}
.cta-ig .ic{width:40px; height:40px; flex:none; border-radius:12px; background:var(--degrade);
  display:grid; place-items:center}
.cta-ig .ic svg{width:22px; height:22px; stroke:#000; fill:none; stroke-width:2}
.cta-ig p{flex:1; min-width:200px; margin:0; font-size:15.5px; line-height:1.45; color:#d9d9de}
.cta-ig p b{color:#fff}
.cta-ig .btn{padding:11px 18px; font-size:14.5px; white-space:nowrap}
.hdr .ig{display:grid; place-items:center; width:40px; height:40px; border-radius:10px;
  color:var(--encre); transition:background .2s}
.hdr .ig:hover{background:var(--sable)}
.hdr .ig svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2}
.hero .meta a{color:inherit; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35)}
.hero .meta a:hover{border-color:#fff}
.stat a{color:inherit; text-decoration:none; border-bottom:1px solid var(--trait)}
@media(max-width:600px){.cta-ig{padding:18px}}

/* ============================================================
   Bandeau de consentement (CNIL)
   Fenetre centree sur voile assombri : le visiteur choisit avant de
   continuer. Accepter et Refuser ont le meme poids visuel, comme
   l'exige la CNIL : refuser doit etre aussi simple qu'accepter.
   ============================================================ */
#tnjCookies{position:fixed; inset:0; z-index:320; display:flex;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(16,17,20,.55); -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px); opacity:0; transition:opacity .26s var(--e)}
#tnjCookies.on{opacity:1}
#tnjCookies .ck-in{background:#fff; color:var(--encre); max-width:520px; width:100%;
  border-radius:18px; padding:30px 30px 26px; box-shadow:0 24px 70px rgba(0,0,0,.4);
  transform:translateY(12px); transition:transform .26s var(--e)}
#tnjCookies.on .ck-in{transform:none}
#tnjCookies .ck-titre{font-family:var(--display); font-size:23px; font-weight:800;
  line-height:1.2; margin:0 0 12px}
#tnjCookies .ck-txt{font-size:15px; line-height:1.6; color:var(--encre-2); margin:0 0 22px}
#tnjCookies a{color:var(--rouge-f); text-decoration:underline; text-underline-offset:3px}
.ck-actions{display:flex; gap:11px; flex-wrap:wrap}
/* flex:1 1 0 et non 1 1 auto : les deux boutons font exactement la meme
   largeur quelle que soit la longueur du texte. La CNIL demande que refuser
   soit aussi simple qu'accepter, et cela se voit d'abord a l'oeil. */
.ck-btn{flex:1 1 0; min-width:150px; min-height:46px; font-family:var(--ui);
  font-weight:700; font-size:15px; border-radius:999px; padding:12px 22px;
  cursor:pointer; border:1px solid transparent; transition:.18s var(--e)}
.ck-btn.ck-non{background:#fff; color:var(--encre); border-color:var(--trait)}
.ck-btn.ck-non:hover{background:var(--sable)}
/* texte noir sur le degrade : le blanc n'y passe pas le seuil de contraste */
.ck-btn.ck-oui{background:var(--degrade); color:#000}
.ck-btn.ck-oui:hover{opacity:.92}
body.bandeau-ouvert{overflow:hidden}
.ck-lien{background:none; border:none; padding:0; font:inherit; color:inherit;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer;
  display:inline-flex; align-items:center; min-height:26px; opacity:.9}
.ck-lien:hover{opacity:1}
@media(max-width:520px){
  #tnjCookies .ck-in{padding:24px 22px 22px}
  .ck-btn{flex:1 1 100%}
}