/* ════════════════════════════════════════════════════════════════════ DA-52 B · Annuaire. Version « guide de voyage ». L'idée : l'annuaire se lit comme un beau guide de villes. Un sommaire à filets pointillés, une grande recherche, un index alphabétique de grands noms en Syne avec sa fiche (photo, région, coordonnées, petite carte au trait), puis les chapitres : les IA en grandes cartes typographiques qui s'ouvrent, la bibliothèque (liste + aperçu photo qui suit le curseur), Paris en trois grandes photos, la méthode, un CTA compact. Pages nuit et pages papier alternent et se posent les unes sur les autres. Aucune particule, aucun WebGL. ════════════════════════════════════════════════════════════════════ */ @font-face{font-family:'Syne';font-weight:400 800;font-display:swap;src:url(/assets/syne.woff2) format("woff2")} @font-face{font-family:'Manrope';font-weight:200 800;font-display:swap;src:url(/assets/manrope.woff2) format("woff2")} /* ── 1. Jetons ───────────────────────────────────────────────────── */ :root{ --nuit:#0B1428; --nuit-2:#101A33; --nuit-3:#13203F; --bleu:#2563EB; --bleu-1:#1D4ED8; --bleu-2:#3B82F6; --bleu-3:#60A5FA; --bleu-4:#93C5FD; --bleu-5:#DBEAFE; --bleu-6:#EAF2FF; --cobalt:#1E3A8A; --or:#FFE9B8; /* sur nuit */ --t1:#F1F6FF; --t2:rgba(234,242,255,.80); --t3:rgba(234,242,255,.64); --line:rgba(234,242,255,.11); --line-2:rgba(234,242,255,.2); --line-3:rgba(234,242,255,.34); /* sur papier */ --papier:#F6F9FF; --papier-2:#EAF2FF; --encre:#0F172A; --e2:rgba(15,23,42,.76); --e3:rgba(15,23,42,.62); --pl:rgba(15,23,42,.12); --pl-2:rgba(15,23,42,.22); --r-s:10px; --r-m:16px; --r-l:24px; --r-pill:999px; --r-sheet:clamp(1.5rem,3vw,2.75rem); --sec:clamp(4rem,8vw,7rem); --wrap:75rem; --gut:clamp(1rem,4vw,2.5rem); --nav:72px; --ease:cubic-bezier(.22,.8,.2,1); --ease-o:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.25,1); --syne:'Syne',system-ui,sans-serif; --man:'Manrope',system-ui,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,monospace; --glow-btn:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(6,18,58,.4),0 0 0 1px rgba(37,99,235,.75),0 14px 36px -12px rgba(37,99,235,.9); --glow-btn-on:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(6,18,58,.4),0 0 0 1px rgba(96,165,250,.95),0 18px 48px -10px rgba(59,130,246,1); } /* ── 2. Base ─────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box} html{background:var(--nuit);-webkit-text-size-adjust:100%} html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto!important} .lenis.lenis-stopped{overflow:hidden} body{margin:0;background:var(--nuit);color:var(--t1);font:400 1.0625rem/1.7 var(--man);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility} ::selection{background:rgba(37,99,235,.55);color:#fff} a{color:inherit;text-decoration:none} img,svg{display:block} h1,h2,h3,p{margin:0} h1,h2,h3{font-family:var(--syne)} :focus-visible{outline:2px solid var(--bleu-3);outline-offset:3px;border-radius:6px} .paper :focus-visible{outline-color:var(--bleu)} .sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip{position:absolute;left:1rem;top:-4rem;z-index:400;padding:.7rem 1rem;border-radius:var(--r-s);background:var(--bleu);color:#fff;font-weight:600} .skip:focus{top:1rem} main{position:relative;overflow-x:clip} [id]{scroll-margin-top:calc(var(--nav) + 1.25rem)} .wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--gut));margin-inline:auto;padding-inline:var(--gut)} /* Les « pages » du guide (BRIEF-13) : la nuit est le fond ; chaque section papier est une feuille blanche aux coins arrondis posée sur la nuit, qui s'élargit jusqu'aux bords en entrant (--sx, desktop) */ .sheet{position:relative;padding-block:var(--sec)} .night{background:var(--nuit);color:var(--t1)} .night.deep{background:radial-gradient(70% 45% at 50% 0%,rgba(30,58,138,.22),transparent 72%),var(--nuit)} .paper{background:var(--papier);color:var(--encre)} .sheet.paper{z-index:2;margin-inline:clamp(.35rem,.8vw,.75rem);border-radius:var(--r-sheet);clip-path:inset(0 calc(var(--sx,0) * 1vw) round var(--r-sheet))} /* le CTA nuit prolonge la section nuit qui le précède (une seule bande bleue) */ .night + .sec-suite{padding-top:calc(var(--sec)*.2)} .paper h2,.paper h3{color:var(--encre)} .night h2,.night h3{color:var(--t1)} /* ── 3. Composants communs ───────────────────────────────────────── */ .eyebrow{display:flex;align-items:center;gap:.7rem;font:700 .7rem/1 var(--man);letter-spacing:.24em;text-transform:uppercase;color:var(--bleu-4)} .paper .eyebrow{color:var(--bleu-1)} .eyebrow i{font-style:normal;font-weight:600;opacity:.75} .eyebrow::before{content:"";flex:none;width:1.6rem;height:1px;background:currentColor;opacity:.7} .h2{margin-top:1.1rem;font-weight:600;font-size:clamp(2.2rem,4.6vw,4rem);line-height:1.02;letter-spacing:-.035em;text-wrap:balance} .lead{max-width:38rem;font-size:clamp(1rem,1.2vw,1.1rem);color:var(--t2)} .paper .lead{color:var(--e2)} .head2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.2rem clamp(2rem,5vw,5rem);align-items:end} .btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;height:3.3rem;padding:0 1.65rem;border:0;border-radius:var(--r-pill);cursor:pointer; font:650 .95rem/1 var(--man);letter-spacing:.01em;color:#fff;white-space:nowrap; background:linear-gradient(180deg,#3B7BF5 0%,#2563EB 52%,#1F56D8 100%);box-shadow:var(--glow-btn);transition:transform .5s var(--ease),box-shadow .5s var(--ease)} .btn::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .45s var(--ease);background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.34),transparent 62%)} .btn:hover{transform:translateY(-1px);box-shadow:var(--glow-btn-on)} .btn:hover::before{opacity:1} .btn-sm{height:2.55rem;padding:0 1.15rem;font-size:.85rem} /* lien souligné : le trait se retrace au survol */ .ul{position:relative;display:inline-flex;align-items:center;gap:.45rem;padding:.3rem 0;font:650 .9rem/1.2 var(--man);color:var(--bleu-1)} .night .ul{color:var(--bleu-4)} .ul::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:right;transition:transform .6s var(--ease-io)} .ul:hover::after{animation:retrace .9s var(--ease-io)} @keyframes retrace{0%{transform:scaleX(1);transform-origin:right}45%{transform:scaleX(0);transform-origin:right}46%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1);transform-origin:left}} .ar{flex:none;width:12px;height:12px;transition:transform .5s var(--ease)} a:hover .ar{transform:translateX(4px)} /* Révélations (états cachés seulement avec JS) */ .js .rv{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease) calc(var(--d,0)*1s),transform 1.2s var(--ease-o) calc(var(--d,0)*1s)} .js .rv.in{opacity:1;transform:none} /* filets qui se tracent */ .js .rule{transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease-io) calc(var(--d,0)*1s)} .js .rule.in,.js .in .rule{transform:none} /* Badge DA */ .da-badge{position:absolute;top:calc(var(--nav) + 12px);right:var(--gut);z-index:60;padding:.38rem .7rem;border-radius:var(--r-pill);border:1px solid var(--line-2);background:rgba(11,20,40,.6);font:650 .62rem/1 var(--man);letter-spacing:.14em;text-transform:uppercase;color:var(--t3);transition:color .3s,border-color .3s} .da-badge:hover{color:var(--t1);border-color:var(--line-3)} /* ── 4. Navigation (reprise de DA-52) ────────────────────────────── */ .nav{position:fixed;inset:0 0 auto;z-index:100;height:var(--nav);border-bottom:1px solid transparent;transition:background-color .5s,border-color .5s,-webkit-backdrop-filter .5s,backdrop-filter .5s} .nav.is-scrolled,.nav.is-open{background:rgba(11,20,40,.84);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border-bottom-color:var(--line)} /* la nav prend le ton du fond qu'elle survole (BRIEF-13) : clair sur la nuit, encre sur une feuille blanche (.on-p) */ .nav .lat{fill:var(--lat,#EAF2FF);transition:fill .5s} .nav .lk-name,.nav .lk-sub,.menu a,.sub-btn,.burger{transition:color .5s,background-color .5s,border-color .5s} .nav.on-p{--t1:#0F172A;--t2:#334155;--t3:#56607A;--line:rgba(15,23,42,.09);--line-2:rgba(15,23,42,.18);--line-3:rgba(15,23,42,.34);--lat:#0F172A} .nav.on-p.is-scrolled{background:rgba(246,249,255,.86);border-bottom-color:rgba(15,23,42,.08)} .nav.on-p .sub{background:#fff;border-color:rgba(15,23,42,.1);box-shadow:0 30px 60px -28px rgba(15,23,42,.35)} .nav.on-p .menu .sub a:hover{background:#F6F9FF} .nav.on-p :focus-visible{outline-color:#1D4ED8} /* sans JavaScript, la nav ne peut pas suivre le fond : elle garde un fond nuit plein, lisible partout */ html:not(.js) .nav{background:rgba(11,20,40,.94)} /* menu mobile ouvert : toujours la nuit */ .nav.on-p.is-open{--t1:#F1F6FF;--t2:rgba(234,242,255,.80);--t3:rgba(234,242,255,.66);--line:rgba(234,242,255,.10);--line-2:rgba(234,242,255,.18);--lat:#EAF2FF;background:rgba(11,20,40,.96)} .nav-in{height:100%;display:flex;align-items:center;gap:1.25rem} .lockup{display:flex;align-items:center;gap:.7rem;margin-right:auto;border-radius:8px} .lk-mark{width:30px;height:30px;flex:none} .lk-txt{display:flex;flex-direction:column;gap:.32rem} .lk-name{font:700 1rem/1 var(--syne);letter-spacing:.3em;color:var(--t1)} .lk-sub{font:650 .5rem/1 var(--man);letter-spacing:.24em;color:var(--t3);white-space:nowrap} .menu ul{display:flex;align-items:center;gap:.1rem;list-style:none;margin:0;padding:0} .menu a,.sub-btn{display:inline-flex;align-items:center;gap:.35rem;height:2.5rem;padding:0 .78rem;border:0;border-radius:var(--r-pill);background:none;cursor:pointer;font:500 .875rem/1 var(--man);color:var(--t2);transition:color .3s} .menu a:hover,.sub-btn:hover,.menu a[aria-current="page"],.sub-btn[aria-expanded="true"]{color:var(--t1)} .sub-btn svg{width:10px;height:10px;transition:transform .35s var(--ease)} .has-sub{position:relative} .has-sub:hover .sub-btn svg,.sub-btn[aria-expanded="true"] svg{transform:rotate(180deg)} .sub{position:absolute;top:calc(100% + .6rem);left:50%;width:18rem;margin-left:-9rem;padding:.5rem;border-radius:var(--r-m);background:rgba(16,26,51,.97);border:1px solid var(--line-2);box-shadow:0 30px 70px -24px rgba(2,6,20,.85);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s linear .35s} .sub::before{content:"";position:absolute;left:0;right:0;top:-.7rem;height:.7rem} .has-sub:hover .sub,.has-sub:focus-within .sub,.sub-btn[aria-expanded="true"]+.sub{opacity:1;visibility:visible;transform:none;transition-delay:0s} .menu .sub a{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;height:auto;padding:.8rem .95rem;border-radius:12px} .menu .sub a:hover{background:rgba(234,242,255,.05)} .sub b{font:600 .95rem/1 var(--syne);color:var(--t1)} .sub span{font:400 .78rem/1.3 var(--man);color:var(--t3)} .sub-more{display:flex;flex-wrap:wrap;gap:.2rem .1rem;margin:.35rem 0 0;padding:.6rem .55rem .3rem;border-top:1px solid var(--line)} .menu .sub-more a{height:auto;padding:.35rem .45rem;font-size:.78rem;color:var(--t3)} .menu .sub-more a:hover{color:var(--t1);background:none} .burger{display:none;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--line-2);background:none;cursor:pointer;position:relative;flex:none} .burger span{position:absolute;left:50%;width:15px;height:1.5px;margin-left:-7.5px;background:var(--t1);border-radius:1px;transition:transform .45s var(--ease)} .burger span:first-child{top:calc(50% - 3.5px)} .burger span:last-child{top:calc(50% + 2.5px)} .burger[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)} .burger[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)} .mnav{position:absolute;top:var(--nav);left:0;right:0;height:calc(100svh - var(--nav));overflow:auto;overscroll-behavior:contain;padding:.5rem var(--gut) 2rem;background:var(--nuit);border-top:1px solid var(--line)} .mnav ul{list-style:none;margin:0;padding:0} .mnav a{display:flex;justify-content:space-between;align-items:center;padding:.95rem 0;border-bottom:1px solid var(--line);font:500 1.1rem/1.2 var(--syne);color:var(--t1)} .mnav .mn-sub a{padding-left:1rem;font:500 .95rem/1.2 var(--man);color:var(--t2)} .mnav .btn{width:100%;margin-top:1.4rem} /* ── 5. Pied de page ─────────────────────────────────────────────── */ .foot{position:relative;padding:clamp(3.5rem,6vw,5rem) 0 2rem;background:var(--nuit)} .foot-grid{display:grid;grid-template-columns:1.3fr repeat(4,minmax(0,1fr));gap:2rem} .foot-brand p{margin-top:1.1rem;max-width:18rem;font-size:.88rem;line-height:1.6;color:var(--t3)} .foot h2{font:700 .68rem/1 var(--man);letter-spacing:.22em;text-transform:uppercase;color:var(--t3)} .foot ul{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.65rem;font-size:.9rem} .foot ul a{color:var(--t2);transition:color .3s} .foot ul a:hover{color:var(--t1)} .foot address{margin-top:1.2rem;font-style:normal;font-size:.9rem;line-height:1.7;color:var(--t2)} .foot-bar{margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:var(--t3)} .foot-bar a:hover{color:var(--t1)} .credits{margin-top:1rem;font-size:.72rem;line-height:1.6;color:rgba(234,242,255,.5)} /* ── 6. En-tête : titre, chapeau | sommaire, grande recherche ───── */ .ahead{position:relative;z-index:20;padding:calc(var(--nav) + clamp(2.6rem,7vh,4.6rem)) 0 clamp(2.4rem,5vh,3.4rem);background: radial-gradient(60% 80% at 85% 0%,rgba(37,99,235,.20),transparent 70%),radial-gradient(40% 50% at 0% 55%,rgba(30,58,138,.26),transparent 70%),var(--nuit)} .h1{margin-top:1.3rem;font-weight:600;font-size:clamp(2.35rem,4.9vw,4.4rem);line-height:1.02;letter-spacing:-.042em;color:var(--t1)} .h1 .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em} .h1 .ln>span{display:inline-block} .h1 .is-blue{color:var(--bleu-3);font-weight:500} .js .h1 .ln>span{transform:translateY(105%);transition:transform 1.3s var(--ease-o)} .js .h1 .ln:nth-child(2)>span{transition-delay:.12s} .lit .h1 .ln>span{transform:none} .ah-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,21rem);gap:1.6rem clamp(2rem,6vw,6rem);align-items:start;margin-top:clamp(1.4rem,3vh,2rem)} .ah-lead{max-width:44rem;font-size:clamp(1rem,1.15vw,1.08rem);line-height:1.68;color:var(--t2)} /* le sommaire du guide : filets pointillés et numéros de chapitre */ .toc h2{font:700 .64rem/1 var(--man);letter-spacing:.24em;text-transform:uppercase;color:var(--t3)} .toc ol{list-style:none;margin:.75rem 0 0;padding:0} .toc a{display:flex;align-items:baseline;gap:.5rem;padding:.3rem 0;font:550 .9rem/1.3 var(--man);color:var(--t2);transition:color .3s} .toc a::after{content:"";order:2;flex:1;min-width:1rem;border-bottom:1px dotted rgba(234,242,255,.3);transform:translateY(-.25em);transition:border-color .3s} .toc a b{order:3;font:600 .72rem/1 var(--syne);color:var(--bleu-4);font-variant-numeric:tabular-nums} .toc a:hover{color:var(--t1)} .toc a:hover::after{border-bottom-color:var(--bleu-3)} /* la recherche : un champ éditorial large, son trait se trace */ .find{position:relative;z-index:5;margin-top:clamp(1.8rem,4vh,2.8rem)} .search{position:relative;display:flex;align-items:center;gap:1rem;height:clamp(4rem,9vh,5.2rem);padding:0 .3rem 0 0} .search::before,.search::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line-2)} .search::after{height:2px;background:linear-gradient(90deg,var(--bleu-2),var(--bleu-4));transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease-io) .5s} .lit .search::after{transform:scaleX(.18)} .lit .search:focus-within::after,.lit .search.is-q::after{transform:scaleX(1);transition-delay:0s;transition-duration:.9s} .search svg{flex:none;width:26px;height:26px;color:var(--bleu-4)} .search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;color:var(--t1);font:500 clamp(1.25rem,2.3vw,2rem)/1 var(--syne);letter-spacing:-.02em} .search input::placeholder{color:rgba(234,242,255,.42)} .search input::-webkit-search-cancel-button{display:none} .s-kbd{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:8px;border:1px solid var(--line-2);font:600 .8rem/1 var(--mono);color:var(--t3)} .s-clear{flex:none;display:none;align-items:center;gap:.4rem;height:2.6rem;padding:0 1rem;border:0;border-radius:var(--r-pill);background:rgba(234,242,255,.08);color:var(--t1);font:600 .8rem/1 var(--man);cursor:pointer} .s-clear:hover{background:rgba(234,242,255,.14)} .is-q .s-clear{display:inline-flex}.is-q .s-kbd{display:none} .try{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin:1rem 0 0;padding:0;list-style:none;font:600 .78rem/1 var(--man);color:var(--t3)} .try li:first-child{margin-right:.3rem;letter-spacing:.06em} .try button{height:2.1rem;padding:0 .85rem;border-radius:var(--r-pill);border:1px solid var(--line);background:rgba(234,242,255,.03);color:var(--t2);font:600 .78rem/1 var(--man);cursor:pointer;transition:color .3s,border-color .3s,background-color .3s} .try button:hover{color:var(--t1);border-color:var(--line-3);background:rgba(234,242,255,.07)} /* résultats : l'index du guide, filtré en direct */ .res{position:absolute;left:0;right:0;top:calc(100% + .6rem);max-height:min(26rem,60vh);overflow:auto;padding:.45rem;border-radius:var(--r-m);background:rgba(16,26,51,.98);border:1px solid var(--line-2);box-shadow:0 40px 90px -30px rgba(2,6,20,.95); opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .35s var(--ease),transform .45s var(--ease-o),visibility 0s linear .35s} .res.on{opacity:1;visibility:visible;transform:none;transition-delay:0s} .res ul{list-style:none;margin:0;padding:0} .res button{display:grid;grid-template-columns:7.5rem minmax(0,1fr) auto;align-items:center;gap:1rem;width:100%;padding:.8rem .9rem;border:0;border-radius:12px;background:none;text-align:left;cursor:pointer;color:var(--t1);font:550 .98rem/1.3 var(--man)} .res button[aria-selected="true"],.res button:hover{background:rgba(37,99,235,.18)} .res small{font:700 .6rem/1 var(--man);letter-spacing:.2em;text-transform:uppercase;color:var(--bleu-4)} .res mark{background:none;color:var(--bleu-3);font-weight:750} .res .ar{color:var(--bleu-4)} .res-none{padding:1rem;font-size:.92rem;color:var(--t3)} .res-n{padding:.55rem .9rem .35rem;font:650 .64rem/1 var(--man);letter-spacing:.2em;text-transform:uppercase;color:var(--t3)} /* l'élément trouvé clignote doucement une fois */ .hit{animation:hit 2.2s var(--ease)} @keyframes hit{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,0)}20%{box-shadow:0 0 0 6px rgba(37,99,235,.35)}} /* ── 7. Villes : l'index alphabétique + la fiche ─────────────────── */ .villes{z-index:3;margin-top:0} .villes .head2{align-items:end} /* l'onglet d'index du guide : l'alphabet, lettres pleines = villes */ .abc{display:flex;gap:.25rem;margin:clamp(2rem,4vw,3rem) 0 0;padding:0;list-style:none} .abc li{flex:1 1 0;min-width:0} .abc a,.abc span{display:grid;place-items:center;height:2.6rem;border-radius:8px;font:650 .9rem/1 var(--syne)} .abc span{color:rgba(15,23,42,.24)} .abc a{color:var(--encre);background:rgba(37,99,235,.06);transition:background-color .3s,color .3s} .abc a:hover,.abc a.on{background:var(--bleu);color:#fff} .v-grid{margin-top:clamp(1.4rem,3vw,2.2rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,24rem);gap:clamp(2rem,5vw,5rem);align-items:start} .idx{list-style:none;margin:0;padding:0} .ix{position:relative;display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:1rem;padding:.85rem 0 .9rem} .ix::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--pl)} .ix-l{padding-top:.35rem;font:700 .95rem/1 var(--syne);color:var(--bleu);transition:color .3s} .ix-n{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem clamp(1rem,2.2vw,2rem);margin:0;padding:0;list-style:none} .ix-tag{flex-basis:100%;padding:.45rem 0 .2rem;font:700 .62rem/1 var(--man);letter-spacing:.22em;text-transform:uppercase;color:var(--e3)} /* le nom de ville : grand, en Syne ; la graisse monte au survol sans rien décaler (largeur réservée) */ .nm{position:relative;display:inline-grid;font:500 clamp(1.7rem,3vw,2.85rem)/1.12 var(--syne);letter-spacing:-.035em;color:var(--encre);transition:color .45s var(--ease),opacity .45s var(--ease),font-weight .5s var(--ease)} .nm>span:first-child{grid-area:1/1} .nm::after{content:attr(data-w);grid-area:1/1;font-weight:720;visibility:hidden;height:0;overflow:hidden} .nm .x{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .nm sup{position:absolute;left:.1em;top:-.55rem;font:700 .52rem/1 var(--man);letter-spacing:.18em;text-transform:uppercase;color:var(--bleu);white-space:nowrap} .idx.is-hov .nm{color:rgba(15,23,42,.3)} .idx .nm.on{color:var(--bleu);font-weight:720} .idx .ix.on .ix-l{color:var(--encre)} .nm.is-abroad{font-size:clamp(1.35rem,2.2vw,2rem)} /* la fiche (collante) : photo, nom, région, coordonnées, petite carte au trait */ .fiche{position:sticky;top:calc(var(--nav) + 1.5rem)} .f-ph{position:relative;aspect-ratio:5/4;border-radius:var(--r-l);overflow:hidden;background:var(--nuit-2);box-shadow:0 40px 70px -40px rgba(15,23,42,.55)} .f-ph .pl,.f-ph .im{position:absolute;inset:0} /* planche typographique (ville sans photo) : la carte au trait en grand, la ville en lumière */ .pl{background:radial-gradient(70% 60% at var(--px,50%) var(--py,40%),rgba(59,130,246,.45),transparent 70%),linear-gradient(160deg,#1E3A8A,#0B1428 75%)} .pl svg{position:absolute;inset:-6% -2% -2% 8%;width:94%;height:104%;opacity:.55} .pl b{position:absolute;left:1.4rem;bottom:1.1rem;right:1.4rem;font:650 clamp(2rem,3vw,2.8rem)/1 var(--syne);letter-spacing:-.04em;color:#fff} .im{opacity:0;clip-path:inset(100% 0 0 0);transition:clip-path 1s var(--ease-io),opacity 0s linear 1s} .im.on{opacity:1;clip-path:inset(0 0 0 0);transition:clip-path 1s var(--ease-io),opacity 0s} .im.on img{transform:scale(1)} .im img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.6s var(--ease-o);filter:saturate(.88) contrast(1.03)} .im::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(11,20,40,.35))} .f-body{display:grid;grid-template-columns:minmax(0,1fr) 6.6rem;gap:1rem;margin-top:1.2rem;align-items:start} .f-k{font:700 .62rem/1.3 var(--man);letter-spacing:.2em;text-transform:uppercase;color:var(--bleu-1)} .f-n{margin-top:.45rem;font:650 clamp(1.6rem,2.2vw,2.1rem)/1.05 var(--syne);letter-spacing:-.035em;color:var(--encre)} .f-t{margin-top:.5rem;font-size:.95rem;line-height:1.45;color:var(--e2)} .f-c{margin-top:.55rem;font:500 .74rem/1 var(--mono);letter-spacing:.04em;color:var(--e3)} .f-body .ul{margin-top:.8rem} .f-swap{transition:opacity .35s var(--ease),transform .5s var(--ease-o)} .f-swap.out{opacity:0;transform:translateY(6px)} .mini{width:100%;height:auto;overflow:visible} .mini .fr{fill:none;stroke:rgba(15,23,42,.42);stroke-width:.6;stroke-linejoin:round;vector-effect:non-scaling-stroke} .mini .dt{fill:rgba(15,23,42,.28)} .mini .cur{transition:transform .9s var(--ease-o)} .mini .cur circle:first-child{fill:var(--bleu)} .mini .cur circle+circle{fill:none;stroke:var(--bleu);stroke-width:.5;transform-origin:center;transform-box:fill-box;animation:ping 2.4s var(--ease) infinite} @keyframes ping{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.6);opacity:0}} .f-hint{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--pl);font:600 .7rem/1.4 var(--man);letter-spacing:.06em;color:var(--e3)} /* comparatifs nationaux : deux encadrés, l'un bleu marque, l'autre nuit, qui s'inclinent */ .nat{margin-top:clamp(3rem,6vw,4.5rem)} .nat-h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap} .nat-h h3{font-weight:600;font-size:clamp(1.3rem,1.9vw,1.7rem);letter-spacing:-.02em} .nat-h p{font-size:.92rem;color:var(--e3)} .nat-grid{margin-top:1.3rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;perspective:1400px} .box{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(240px,30vh,300px);padding:1.6rem 1.7rem;border-radius:var(--r-l);color:#fff; transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .7s var(--ease-o),box-shadow .7s var(--ease);box-shadow:0 40px 70px -44px rgba(15,23,42,.7)} .box.b-blue{background:radial-gradient(70% 90% at var(--mx,80%) var(--my,0%),rgba(147,197,253,.45),transparent 70%),linear-gradient(160deg,#2F6CF0,#1D4ED8 60%,#1E3A8A)} .box.b-night{background:radial-gradient(70% 90% at var(--mx,80%) var(--my,0%),rgba(59,130,246,.35),transparent 70%),linear-gradient(160deg,#16244A,#0B1428)} .box .wm{position:absolute;right:-.06em;top:-.2em;z-index:-1;font:700 clamp(6rem,12vw,10.5rem)/1 var(--syne);letter-spacing:-.06em;color:rgba(255,255,255,.1);transition:transform 1.2s var(--ease-o)} .box:hover .wm{transform:translateX(-.15em)} .box small{font:700 .64rem/1 var(--man);letter-spacing:.22em;text-transform:uppercase;color:rgba(234,242,255,.82)} .box h4{margin:.7rem 0 0;max-width:22ch;font:600 clamp(1.3rem,1.9vw,1.75rem)/1.15 var(--syne);letter-spacing:-.02em} .box .go{display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;font:650 .85rem/1 var(--man);color:var(--bleu-5)} /* ── 8. Guides par IA : six grandes cartes typographiques qui s'ouvrent ── */ .ia{z-index:4} .ia-row{margin-top:clamp(2.2rem,5vw,3.4rem);display:flex;gap:.7rem;height:clamp(430px,58vh,520px)} .ia-p{position:relative;isolation:isolate;flex:1 1 0;min-width:0;overflow:hidden;border-radius:var(--r-l);border:1px solid var(--line);cursor:pointer; background:linear-gradient(180deg,rgba(25,39,76,.9),rgba(14,24,48,.95));transition:flex-grow 1s var(--ease-o),border-color .6s var(--ease)} .ia-p::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .9s var(--ease); background:radial-gradient(80% 60% at var(--mx,70%) var(--my,10%),rgba(147,197,253,.38),transparent 70%),linear-gradient(165deg,#2F6CF0,#1D4ED8 55%,#1E3A8A)} .ia-p:hover{border-color:var(--line-3)} .ia-p.on{flex-grow:3.3;border-color:rgba(147,197,253,.45);cursor:default} .ia-p.on::before{opacity:1} .ia-k{position:absolute;left:1.3rem;top:1.25rem;font:700 .64rem/1 var(--man);letter-spacing:.22em;color:var(--bleu-4);transition:color .6s} .ia-p.on .ia-k{color:rgba(234,242,255,.85)} /* fermée : le nom se lit à la verticale, comme le dos d'un guide sur l'étagère */ .ia-v{position:absolute;left:50%;bottom:1.3rem;writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);white-space:nowrap; font:600 clamp(1.7rem,2.4vw,2.4rem)/1 var(--syne);letter-spacing:-.03em;color:var(--t1);transition:opacity .5s var(--ease),transform .9s var(--ease-o)} .ia-p.on .ia-v{opacity:0;transform:translateX(-50%) rotate(180deg) translateY(-1.5rem);pointer-events:none} button.ia-v{padding:0;border:0;background:none;cursor:pointer} .pa-hint{display:none;margin-top:.9rem;font:600 .72rem/1 var(--man);letter-spacing:.08em;color:var(--t3)} /* ouverte : le nom en très grand, les guides */ .ia-c{position:absolute;left:1.6rem;bottom:1.5rem;width:min(30rem,calc(100% - 3.2rem));opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .45s var(--ease),transform .9s var(--ease-o),visibility 0s linear .45s} .ia-p.on .ia-c{opacity:1;visibility:visible;transform:none;transition-delay:.28s,.28s,0s} .ia-c h3{font-weight:650;font-size:clamp(2.8rem,5.2vw,4.9rem);line-height:.95;letter-spacing:-.05em;color:#fff} .ia-c h3 small{display:block;margin-top:.8rem;font:650 .66rem/1.45 var(--man);letter-spacing:.2em;text-transform:uppercase;color:rgba(234,242,255,.85)} .ia-c ul{list-style:none;margin:1.3rem 0 0;padding:0;border-top:1px solid rgba(255,255,255,.25)} .ia-c li a{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.16);font:600 .98rem/1.35 var(--man);color:#fff} .ia-c li:last-child a{border-bottom:0} .ia-c li a::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-io)} .ia-c li a:hover::after{transform:scaleX(1)} .ia-c .ar{color:#fff} /* ── 9. La bibliothèque : deux listes, un aperçu photo qui suit le curseur ── */ .lib{z-index:5} .lib-grid{margin-top:clamp(2.4rem,5vw,3.6rem);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,5vw,4.5rem);align-items:start} .col-h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding-bottom:1rem} .col-h h3{font-weight:600;font-size:clamp(1.35rem,2vw,1.8rem);letter-spacing:-.025em} .col-h span{flex:none;white-space:nowrap;font:700 .64rem/1 var(--man);letter-spacing:.22em;text-transform:uppercase;color:var(--bleu-1)} .col-p{margin:-.2rem 0 1.2rem;font-size:.95rem;line-height:1.55;color:var(--e2);max-width:32rem} .rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--pl-2)} .row a{position:relative;display:grid;grid-template-columns:2.4rem minmax(0,1fr) auto;align-items:center;gap:.9rem;padding:1rem 0;border-bottom:1px solid var(--pl)} .row a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--bleu);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease-io)} .row a:hover::after,.row a:focus-visible::after{transform:scaleX(1)} .row .n{font:600 .74rem/1 var(--syne);letter-spacing:.04em;color:var(--e3);font-variant-numeric:tabular-nums;transition:color .4s} .row .tt{font:560 clamp(1.02rem,1.3vw,1.18rem)/1.3 var(--syne);letter-spacing:-.012em;color:var(--encre);transition:transform .7s var(--ease-o),color .4s} .row .tg{display:flex;align-items:center;gap:.6rem;font:700 .58rem/1 var(--man);letter-spacing:.18em;text-transform:uppercase;color:var(--e3);white-space:nowrap} .row .tg .ar{color:var(--bleu);opacity:0;transform:translateX(-6px);transition:opacity .4s,transform .6s var(--ease-o)} .row a:hover .tt,.row a:focus-visible .tt{transform:translateX(.45rem);color:var(--bleu-1)} .row a:hover .n{color:var(--bleu)} .row a:hover .tg .ar{opacity:1;transform:none} .row .th{display:none} .rows.is-hov .row a:not(:hover) .tt{color:rgba(15,23,42,.5)} /* l'aperçu : suit le curseur avec inertie, s'incline selon la vitesse */ .peek{position:fixed;left:0;top:0;z-index:90;width:clamp(14rem,18vw,17rem);aspect-ratio:4/3;pointer-events:none;border-radius:14px;overflow:hidden; box-shadow:0 40px 80px -30px rgba(15,23,42,.55);clip-path:inset(50% 50% 50% 50% round 14px);transition:clip-path .7s var(--ease-o);will-change:transform} .peek.on{clip-path:inset(0 0 0 0 round 14px)} .peek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.15);transition:opacity .5s var(--ease),transform 1s var(--ease-o);filter:saturate(.85) contrast(1.03)} .peek img.on{opacity:1;transform:scale(1)} .more{display:block;margin-top:2rem;padding:1.5rem 1.6rem 1.3rem;border-radius:var(--r-l);background:var(--papier-2);border:1px solid rgba(37,99,235,.12);transition:background-color .5s var(--ease),transform .7s var(--ease-o)} .more:hover{background:#DFEAFE;transform:translateY(-2px)} .more-k{display:block;font:700 .62rem/1 var(--man);letter-spacing:.22em;text-transform:uppercase;color:var(--bleu-1)} .more-t{display:block;margin-top:.7rem;font:560 clamp(1.1rem,1.5vw,1.3rem)/1.3 var(--syne);letter-spacing:-.015em;color:var(--encre)} .more .ul{margin-top:.9rem} /* ── 10. Paris : trois grandes photos ────────────────────────────── */ .paris{z-index:6} .pa-grid{margin-top:clamp(2.6rem,5vw,4rem);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.4vw,2rem);align-items:start} .pa{display:block} .pa:nth-child(2){margin-top:clamp(3rem,7vw,6rem)} .pa:nth-child(3){margin-top:clamp(1.5rem,3.5vw,3rem)} .pa-ph{position:relative;aspect-ratio:4/5;border-radius:var(--r-l);overflow:hidden;background:var(--nuit-2)} .pa-ph img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;filter:saturate(.92);transition:scale 1.4s var(--ease-o)} .pa:hover .pa-ph img{scale:1.04} .pa-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,20,40,0) 55%,rgba(11,20,40,.55))} .js .pa-ph{clip-path:inset(100% 0 0 0 round var(--r-l));transition:clip-path 1.5s var(--ease-io) calc(var(--d,0)*1s)} .js .pa.in .pa-ph{clip-path:inset(0 0 0 0 round var(--r-l))} .pa-n{position:absolute;left:1.2rem;bottom:1rem;z-index:1;font:600 .7rem/1 var(--mono);letter-spacing:.06em;color:rgba(234,242,255,.85)} .pa-cap{margin-top:1.1rem} .pa-cap small{font:700 .64rem/1 var(--man);letter-spacing:.22em;text-transform:uppercase;color:var(--bleu-4)} .pa-cap h3{margin-top:.55rem;font-weight:600;font-size:clamp(1.25rem,1.7vw,1.55rem);line-height:1.2;letter-spacing:-.02em} .pa-cap .go{display:inline-flex;align-items:center;gap:.45rem;margin-top:.7rem;font:650 .85rem/1 var(--man);color:var(--bleu-4)} /* ── 11. Méthode ─────────────────────────────────────────────────── */ .method{z-index:7} .m-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,6rem);align-items:center} .m-ph{position:relative;aspect-ratio:4/5;border-radius:var(--r-l);overflow:hidden;background:var(--papier-2)} .m-ph img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;filter:grayscale(.2) contrast(1.02)} .m-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(37,99,235,.08),rgba(30,58,138,.28));mix-blend-mode:multiply} .js .m-ph{clip-path:inset(0 100% 0 0 round var(--r-l));transition:clip-path 1.6s var(--ease-io)} .js .in>.m-ph{clip-path:inset(0 0 0 0 round var(--r-l))} .m-p{margin-top:1.3rem;max-width:40rem;font-size:1.05rem;color:var(--e2)} .m-p strong{color:var(--encre);font-weight:700} .levers{list-style:none;margin:2rem 0 0;padding:0} .lever{position:relative;display:grid;grid-template-columns:3rem minmax(0,1fr);gap:.5rem 1rem;padding:1.15rem 0} .lever .rule{position:absolute;left:0;right:0;top:0;height:1px;background:var(--pl-2)} .lever .lv-n{grid-row:span 2;font:650 .8rem/1.6 var(--syne);color:var(--bleu)} .lever h3{font-weight:620;font-size:1.2rem;line-height:1.25;letter-spacing:-.015em} .lever p{font-size:.95rem;line-height:1.55;color:var(--e2)} .method .ul{margin-top:1.4rem} /* ── 12. CTA compact ─────────────────────────────────────────────── */ .cta{z-index:1} .cta-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,5rem);align-items:center} .cta .h2{font-size:clamp(2rem,3.8vw,3.3rem)} .cta-p{margin-top:1rem;max-width:32rem;color:var(--t2)} .form{position:relative;padding:.6rem;border-radius:var(--r-l);background:rgba(16,26,51,.9);border:1px solid var(--line-2); box-shadow:inset 0 1px 0 rgba(234,242,255,.07),0 0 60px -14px rgba(37,99,235,.45),0 40px 80px -40px rgba(2,6,20,.9);transition:border-color .6s var(--ease),box-shadow .6s var(--ease)} .form.is-ready{border-color:rgba(147,197,253,.5);box-shadow:inset 0 1px 0 rgba(234,242,255,.1),0 0 0 1px rgba(59,130,246,.3),0 0 70px -6px rgba(59,130,246,.55)} .fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.55rem} .field{display:flex;flex-direction:column;gap:.42rem;padding:.75rem 1rem;text-align:left;border-radius:var(--r-m);background:rgba(11,20,40,.85);border:1px solid var(--line);transition:border-color .3s,box-shadow .3s} .field:focus-within{border-color:rgba(96,165,250,.7);box-shadow:0 0 0 4px rgba(37,99,235,.22)} .field label{font:700 .62rem/1 var(--man);letter-spacing:.2em;text-transform:uppercase;color:var(--t3)} .field input{width:100%;padding:0;border:0;outline:0;background:none;color:var(--t1);font:400 1rem/1.4 var(--man)} .field input::placeholder{color:rgba(234,242,255,.45)} .btn-cta{width:100%;margin-top:.55rem;height:3.6rem;border-radius:calc(var(--r-l) - .6rem)} .form-ok{margin:.8rem .4rem .2rem;font-size:.94rem;color:var(--bleu-5)} .reassure{margin-top:1rem;font:550 .8rem/1.5 var(--man);letter-spacing:.04em;color:var(--t3)} .cta-addr{display:block;margin-top:.2rem;font:550 .8rem/1.5 var(--man);font-style:normal;letter-spacing:.04em;color:var(--t3)} /* ── 12b. Intégration v3 : fil d'Ariane, titres de section, contenu de la référence ── */ /* fil d'Ariane (même style que les en-têtes intérieurs v3) */ .crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin-bottom:1.5rem;font:550 .74rem/1 var(--man);letter-spacing:.04em;color:var(--t3)} .crumb a{color:var(--t2);transition:color .3s} .crumb a:hover{color:var(--t1)} .crumb [aria-current]{color:var(--bleu-4)} .crumb span[aria-hidden]{opacity:.5} /* la devise sous le titre, en chasse fixe comme les coordonnées du guide */ .ah-tag{margin-top:1.1rem;font:500 .78rem/1.4 var(--mono);letter-spacing:.08em;color:var(--bleu-4)} /* « Pourquoi cet annuaire ? » : même étiquette que le sommaire, en vis-à-vis */ .ah-why h2{font:700 .64rem/1 var(--man);letter-spacing:.24em;text-transform:uppercase;color:var(--t3)} .ah-why .ah-lead{margin-top:.85rem} .ah-goal{margin-top:.9rem;max-width:44rem;font-size:.95rem;line-height:1.65;color:var(--t3)} .ah-lead a{color:var(--t1);text-decoration:underline;text-decoration-color:rgba(147,197,253,.5);text-underline-offset:3px;transition:text-decoration-color .3s} .ah-lead a:hover{text-decoration-color:var(--bleu-3)} /* le titre de section (h2) vit dans l'étiquette ; la grande phrase de la maquette est un paragraphe */ .h2{font-family:var(--syne)} .eyebrow .eb-h{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;font-weight:600;opacity:.75} .eyebrow .eb-h::before{content:"· "} /* villes : dans le code, le titre est suivi de son chapeau ; à l'écran, l'ordre de la maquette */ .head2.h-ord{grid-template-areas:"eb ." "tt ld";row-gap:0} .h-ord>.eyebrow{grid-area:eb} .h-ord>.h2{grid-area:tt} .h-ord>.lead{grid-area:ld} .v-h{padding-bottom:.6rem} /* guides par IA : le renvoi vers les expertises */ .ia-foot{margin-top:1.6rem;max-width:46rem;font-size:.95rem;line-height:1.6;color:var(--t2)} .ia-foot a{color:var(--t1);text-decoration:underline;text-decoration-color:rgba(147,197,253,.5);text-underline-offset:3px;transition:text-decoration-color .3s} .ia-foot a:hover{text-decoration-color:var(--bleu-3)} /* Paris : « aussi à Paris », une ligne de liens sous les trois photos */ .pa-more{margin-top:clamp(2.2rem,4vw,3rem);padding-top:1.3rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:baseline;gap:.7rem 1.8rem} .pa-more p{font:700 .64rem/1 var(--man);letter-spacing:.22em;text-transform:uppercase;color:var(--t3)} .pa-more ul{display:flex;flex-wrap:wrap;gap:.3rem 1.8rem;margin:0;padding:0;list-style:none} /* méthode : numéros en CSS, titres de levier liés à l'expertise, liens de fin */ .lever .lv-n::before{content:attr(data-n)} .lever h3 a{display:inline-flex;align-items:center;gap:.5rem;transition:color .3s} .lever h3 a:hover{color:var(--bleu-1)} .lever h3 .ar{color:var(--bleu)} .m-links{display:flex;flex-wrap:wrap;gap:.3rem 1.8rem;margin-top:1.4rem} .method .m-links .ul{margin-top:0} /* formulaire : l'échec d'envoi se dit, le bouton attend la réponse */ .form-ko{margin:.8rem .4rem .2rem;font-size:.94rem;color:#FCA5A5} .form-ko a{text-decoration:underline;text-underline-offset:3px} .btn-cta:disabled{opacity:.7;cursor:progress} @media (max-width:900px){ .head2.h-ord{grid-template-areas:"eb" "tt" "ld"} .h-ord>.lead{margin-top:1.2rem} } /* ── 13. Responsive ──────────────────────────────────────────────── */ @media (max-width:1180px){ .menu{display:none} .burger{display:block} .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .foot-brand{grid-column:1/-1} } @media (max-width:1040px){ .v-grid{grid-template-columns:minmax(0,1fr) minmax(0,20rem)} } @media (max-width:900px){ .head2,.ah-grid,.cta-grid,.m-grid{grid-template-columns:1fr} .toc{display:none} .v-grid{grid-template-columns:1fr;gap:1.2rem} /* au doigt : la fiche devient un bandeau collant ; la ville qui passe au milieu de l'écran s'y affiche */ .fiche{order:-1;top:calc(var(--nav) + .5rem);z-index:4;display:grid;grid-template-columns:5.6rem minmax(0,1fr);gap:.9rem;align-items:center;padding:.55rem;border-radius:var(--r-m); background:rgba(246,249,255,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--pl);box-shadow:0 18px 40px -28px rgba(15,23,42,.45)} .f-ph{aspect-ratio:1;border-radius:12px;box-shadow:none} .pl b{display:none} .f-body{display:block;margin:0} .f-n{margin-top:.25rem;font-size:1.3rem} .f-t,.f-c,.mini,.f-hint{display:none} .f-body .ul{margin-top:.25rem;font-size:.8rem;padding:.15rem 0} .ia-row{flex-direction:column;height:auto;gap:.8rem} .ia-p,.ia-p.on{flex:none;cursor:default} .ia-p::before{opacity:0} .ia-p.on::before{opacity:1} .ia-v{display:none} .ia-c{position:relative;left:auto;bottom:auto;width:auto;padding:3.1rem 1.3rem 1.1rem;opacity:1;visibility:visible;transform:none} .ia-c h3{font-size:clamp(2.4rem,11vw,3.4rem)} .lib-grid{grid-template-columns:1fr;gap:3rem} .peek{display:none} .row a{grid-template-columns:3.6rem minmax(0,1fr)} .row .n{display:none} .row .th{display:block;grid-row:span 2;width:3.6rem;height:3.6rem;border-radius:10px;overflow:hidden;background:var(--papier-2)} .row .th img{width:100%;height:100%;object-fit:cover} .row .tg{grid-column:2;margin-top:-.45rem} .m-ph{aspect-ratio:16/10} .nat-grid{grid-template-columns:1fr} } @media (max-width:760px){ /* Paris : une galerie qu'on fait glisser au doigt (le défilement vertical reste libre) */ .pa-grid{display:flex;gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1*var(--gut));padding:0 var(--gut) .6rem;scrollbar-width:none;overscroll-behavior-x:contain} .pa-grid::-webkit-scrollbar{display:none} .pa{flex:0 0 78%;scroll-snap-align:center;margin-top:0!important} .pa-hint{display:block} .fields{grid-template-columns:1fr} } @media (max-width:520px){ :root{--nav:64px} .nav-in{gap:.55rem} .lockup{gap:.5rem} .lk-mark{width:26px;height:26px} .lk-name{font-size:.88rem;letter-spacing:.24em} .lk-sub{font-size:.44rem;letter-spacing:.2em} .nav .btn-sm{height:2.35rem;padding:0 .85rem;font-size:.78rem} .burger{width:2.35rem;height:2.35rem} .da-badge{top:calc(var(--nav) + 8px)} .s-kbd{display:none} .search{gap:.7rem} .search svg{width:20px;height:20px} .res button{grid-template-columns:minmax(0,1fr) auto;gap:.2rem .8rem} .res small{grid-column:1} .res button>span{grid-column:1} .res .ar{grid-row:1/span 2;grid-column:2} .ix{grid-template-columns:1.6rem minmax(0,1fr);gap:.6rem;padding:.7rem 0 .75rem} .ix-l{padding-top:.3rem;font-size:.82rem} .ix-n{gap:.1rem 1rem} .nm{font-size:1.62rem} .nm.is-abroad{font-size:1.3rem} .abc{gap:.2rem} .abc li:has(span){display:none} .abc a{height:2.3rem;font-size:.8rem} .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.25rem} } /* ── 14. Mouvement réduit : tout lisible, statique ───────────────── */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-delay:0s!important;scroll-behavior:auto!important} .js .rv,.js .h1 .ln>span{opacity:1!important;transform:none!important} .js .rule{transform:none!important} .js .pa-ph,.js .m-ph{clip-path:none!important} .peek{display:none} } /* ── 15. Sans JavaScript (html sans .js), ou script de la page en échec (.safe) ── Ex-bloc