/* ==========================================================================
RIBINE — Brest, Finistère
Design system : « topographique »
Auteur : refonte 2026
========================================================================== */
/* ------------------------------------------------------------- 0. Fontes
Auto-hébergées : aucune requête vers un tiers, aucun FOUT dépendant d'un CDN.
Fraunces est variable sur 4 axes (opsz, wght, SOFT, WONK).
-------------------------------------------------------------------------- */
@font-face{
font-family:"Fraunces";
src:url("../fonts/fraunces-var.woff2") format("woff2");
font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
font-family:"Fraunces";
src:url("../fonts/fraunces-var-italic.woff2") format("woff2");
font-weight:100 900; font-style:italic; font-display:swap;
}
@font-face{
font-family:"Instrument Sans";
src:url("../fonts/instrument-sans-var.woff2") format("woff2");
font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
font-family:"DM Mono";
src:url("../fonts/dm-mono-400.woff2") format("woff2");
font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
font-family:"DM Mono";
src:url("../fonts/dm-mono-500.woff2") format("woff2");
font-weight:500; font-style:normal; font-display:swap;
}
/* --------------------------------------------------------------- 1. Tokens */
:root{
/* encres */
--granit: #14150F;
--granit-2: #1E2018;
--papier: #EFEAE0;
--papier-2: #E4DDCE;
--papier-3: #D8CFBC;
--ajonc: #E8B231;
--ocean: #14484D;
--ocean-clair: #2C7A75;
--rouille: #B4451F;
--fg: var(--granit);
--bg: var(--papier);
--accent: var(--ajonc);
--line: color-mix(in srgb, var(--granit) 16%, transparent);
--line-2: color-mix(in srgb, var(--granit) 32%, transparent);
--muted: color-mix(in srgb, var(--granit) 62%, transparent);
/* Opacité des courbes de niveau. Sur fond clair l'encre sombre reste
discrète ; sur fond sombre le trait clair « saute » beaucoup plus aux
yeux et vient gêner la lecture — d'où deux valeurs bien plus basses. */
--topo-op: 1;
--topo-op-soft: .5;
/* typographie */
--display: "Fraunces", "Playfair Display", Georgia, serif;
--sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
--mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
--t-xs: clamp(.68rem, .64rem + .12vw, .74rem);
--t-sm: clamp(.8rem, .76rem + .16vw, .875rem);
--t-md: clamp(.95rem, .9rem + .22vw, 1.06rem);
--t-lg: clamp(1.12rem, 1rem + .55vw, 1.45rem);
--t-xl: clamp(1.6rem, 1.15rem + 2vw, 2.6rem);
--t-2xl: clamp(2.3rem, 1.3rem + 4.2vw, 5rem);
--t-3xl: clamp(3.4rem, 1.1rem + 10.5vw, 9.5rem);
--t-4xl: clamp(4rem, .5rem + 15vw, 15.5rem);
/* mesures */
--pad: clamp(1.15rem, .6rem + 2.6vw, 4.5rem);
--maxw: 1560px;
--rule: 1px;
--nav-h: 72px;
/* mouvement */
--ease: cubic-bezier(.22,.61,.36,1);
--ease-out: cubic-bezier(.16,1,.3,1);
--ease-in-out: cubic-bezier(.76,0,.24,1);
}
[data-theme="dark"]{
--fg: var(--papier);
--bg: var(--granit);
--line: color-mix(in srgb, var(--papier) 18%, transparent);
--line-2: color-mix(in srgb, var(--papier) 34%, transparent);
--muted: color-mix(in srgb, var(--papier) 60%, transparent);
--topo-op: .42;
--topo-op-soft: .26;
}
[data-theme="ocean"]{
--fg: var(--papier);
--bg: var(--ocean);
--line: color-mix(in srgb, var(--papier) 20%, transparent);
--line-2: color-mix(in srgb, var(--papier) 38%, transparent);
--muted: color-mix(in srgb, var(--papier) 66%, transparent);
--topo-op: .40;
--topo-op-soft: .25;
}
/* --------------------------------------------------------------- 2. Reset */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; color-scheme:light; }
body{
margin:0;
background:var(--papier);
color:var(--granit);
font-family:var(--sans);
font-size:var(--t-md);
line-height:1.55;
font-synthesis-weight:none;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl{ margin:0; }
ul,ol{ padding:0; list-style:none; }
::selection{ background:var(--ajonc); color:var(--granit); }
:focus-visible{ outline:2px solid var(--ajonc); outline-offset:3px; }
.skip{
position:fixed; top:-100px; left:1rem; z-index:9999;
background:var(--granit); color:var(--papier);
padding:.7rem 1.1rem; font:500 var(--t-sm)/1 var(--mono);
transition:top .25s var(--ease);
}
.skip:focus{ top:1rem; }
.u-vh{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* ------------------------------------------------------- 3. Typo primitives */
.display{
font-family:var(--display);
font-weight:400;
font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 144;
line-height:.86;
letter-spacing:-.03em;
text-wrap:balance;
}
.display em{
font-style:italic;
font-variation-settings:"SOFT" 12,"WONK" 1,"opsz" 144;
letter-spacing:-.02em;
}
.d-1{ font-size:var(--t-3xl); }
.d-2{ font-size:var(--t-2xl); }
.d-3{ font-size:var(--t-xl); }
.d-mega{ font-size:var(--t-4xl); line-height:.78; }
.eyebrow{
font-family:var(--mono);
font-size:var(--t-xs);
font-weight:500;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--muted);
display:flex; align-items:center; gap:.7em;
}
.eyebrow::before{
content:""; width:1.9em; height:1px; background:currentColor; opacity:.55; flex:none;
}
.eyebrow--plain::before{ display:none; }
.mono{ font-family:var(--mono); font-size:var(--t-sm); letter-spacing:.02em; }
.lead{
font-size:var(--t-lg);
line-height:1.4;
letter-spacing:-.012em;
text-wrap:pretty;
}
.body p + p{ margin-top:1em; }
.body{ color:color-mix(in srgb, var(--fg) 82%, transparent); max-width:62ch; text-wrap:pretty; }
.num{
font-family:var(--mono);
font-size:var(--t-xs);
letter-spacing:.14em;
color:var(--accent);
}
/* ------------------------------------------------------------ 4. Structure */
.wrap{
width:100%; max-width:var(--maxw);
margin-inline:auto;
padding-inline:var(--pad);
}
.sec{
position:relative;
background:var(--bg);
color:var(--fg);
padding-block:clamp(4.5rem,2rem + 9vw,10rem);
isolation:isolate;
}
.sec--flush{ padding-block:0; }
.sec--tight{ padding-block:clamp(3rem,1.5rem + 5vw,6rem); }
.grid{
display:grid;
grid-template-columns:repeat(12,minmax(0,1fr));
gap:clamp(1rem,.4rem + 1.6vw,2.2rem);
}
.rule{ height:var(--rule); background:var(--line); border:0; width:100%; }
/* en-tête de section : numéro + titre, façon relevé topo */
.sec-head{
display:grid;
grid-template-columns:repeat(12,minmax(0,1fr));
gap:clamp(1rem,.4rem + 1.6vw,2.2rem);
align-items:end;
padding-bottom:clamp(1.6rem,1rem + 2vw,3rem);
border-bottom:var(--rule) solid var(--line);
margin-bottom:clamp(2rem,1rem + 3vw,4.5rem);
}
.sec-head__i{ grid-column:1/3; }
.sec-head__t{ grid-column:3/10; }
.sec-head__x{ grid-column:10/13; align-self:end; text-align:right; color:var(--muted); }
@media (max-width:860px){
.sec-head__i{ grid-column:1/13; }
.sec-head__t{ grid-column:1/13; margin-top:.6rem; }
.sec-head__x{ grid-column:1/13; text-align:left; margin-top:1rem; }
}
/* ------------------------------------------------------------- 5. Grain */
.grain{
position:fixed; inset:-50%;
z-index:900; pointer-events:none;
opacity:.3;
background-image:url("data:image/svg+xml;utf8,");
mix-blend-mode:multiply;
animation:grain 5s steps(5) infinite;
}
@keyframes grain{
0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}
}
/* ------------------------------------------------- 6. Courbes de niveau */
.topo{
position:absolute; inset:0;
z-index:-1;
pointer-events:none;
overflow:hidden;
}
.topo svg{ width:100%; height:100%; display:block; }
.topo path{
fill:none;
stroke:var(--fg);
stroke-width:.9;
vector-effect:non-scaling-stroke;
opacity:calc(var(--lvl,.7) * var(--topo-op));
}
.topo--soft path{ opacity:calc(var(--lvl,.7) * var(--topo-op-soft)); }
.topo--mask{
-webkit-mask-image:radial-gradient(95% 80% at 80% 42%, #000 0%, rgba(0,0,0,.55) 42%, transparent 74%);
mask-image:radial-gradient(95% 80% at 80% 42%, #000 0%, rgba(0,0,0,.55) 42%, transparent 74%);
}
.topo--hero{ --topo-op:.72; } /* le hero respire, les titres priment */
.topo__inner{
position:absolute; inset:-8% -4%;
will-change:transform;
}
/* ------------------------------------------------------- 7. Le tracé (ribine) */
.trace{
position:absolute;
top:0; left:0;
width:clamp(30px,3.2vw,52px);
height:100%;
z-index:700; pointer-events:none;
}
@media (max-width:960px){ .trace{ display:none; } }
.trace svg{ width:100%; height:100%; }
.trace__ghost{
fill:none; stroke:var(--line);
stroke-width:1.5; vector-effect:non-scaling-stroke;
stroke-dasharray:5 7;
}
.trace__live{
fill:none; stroke:var(--ajonc);
stroke-width:2.5; vector-effect:non-scaling-stroke;
stroke-linecap:round;
}
.trace__dot{
position:absolute; top:0; left:0;
width:11px; height:11px; margin:-5.5px 0 0 -5.5px;
border-radius:50%;
background:var(--ajonc);
box-shadow:0 0 0 5px color-mix(in srgb,var(--ajonc) 24%, transparent);
opacity:0; transition:opacity .4s var(--ease);
}
.trace__dot.on{ opacity:1; }
/* ---------------------------------------------------------- 8. Navigation */
.nav{
position:fixed; inset:0 0 auto 0;
z-index:800;
height:var(--nav-h);
display:flex; align-items:center;
transition:transform .5s var(--ease-out), background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
color:var(--granit);
}
.nav.is-solid{
background:color-mix(in srgb, var(--papier) 88%, transparent);
backdrop-filter:blur(14px) saturate(1.3);
-webkit-backdrop-filter:blur(14px) saturate(1.3);
box-shadow:0 1px 0 var(--line);
}
.nav.is-hidden{ transform:translateY(-102%); }
.nav__in{
width:100%; max-width:var(--maxw); margin-inline:auto;
padding-inline:var(--pad);
display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.brand{
font-family:var(--display);
font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 90;
font-weight:600;
font-size:1.45rem;
letter-spacing:-.02em;
line-height:1;
display:flex; align-items:baseline; gap:.5rem;
}
.brand small{
font:500 .58rem/1 var(--mono);
letter-spacing:.22em;
text-transform:uppercase;
color:var(--muted);
transform:translateY(-.15em);
}
.nav__links{ display:flex; align-items:center; gap:clamp(1rem,.4rem + 1.3vw,2.1rem); }
.nav__link{
font-family:var(--mono);
font-size:var(--t-xs);
letter-spacing:.13em;
text-transform:uppercase;
position:relative;
padding-block:.4rem;
}
.nav__link::after{
content:""; position:absolute; left:0; bottom:.15rem;
width:100%; height:1px; background:currentColor;
transform:scaleX(0); transform-origin:right;
transition:transform .45s var(--ease-out);
}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }
.nav__link[aria-current="page"]{ color:var(--rouille); }
.nav__cta{ display:flex; align-items:center; gap:.9rem; }
.nav__burger{
display:none;
width:44px; height:44px; margin-right:-10px;
position:relative;
}
.nav__burger span{
position:absolute; left:11px; width:22px; height:1.5px; background:currentColor;
transition:transform .4s var(--ease-in-out), opacity .2s;
}
.nav__burger span:nth-child(1){ top:19px; }
.nav__burger span:nth-child(2){ top:25px; }
.nav.is-open .nav__burger span:nth-child(1){ transform:translateY(3px) rotate(38deg); }
.nav.is-open .nav__burger span:nth-child(2){ transform:translateY(-3px) rotate(-38deg); }
@media (max-width:960px){
.nav__links,.nav__cta .btn{ display:none; }
.nav__burger{ display:block; }
}
/* menu plein écran */
.menu{
position:fixed; inset:0; z-index:790;
background:var(--granit); color:var(--papier);
display:flex; flex-direction:column; justify-content:center;
padding:calc(var(--nav-h) + 2rem) var(--pad) 2rem;
clip-path:inset(0 0 100% 0);
transition:clip-path .8s var(--ease-in-out);
visibility:hidden;
}
.menu.is-open{ clip-path:inset(0 0 0 0); visibility:visible; }
.menu__list li{ overflow:hidden; border-bottom:1px solid rgba(239,234,224,.15); }
.menu__list a{
display:flex; align-items:baseline; gap:1rem;
padding:.35em 0;
font-family:var(--display);
font-size:clamp(2rem,1rem + 7vw,3.4rem);
font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 120;
line-height:1.05; letter-spacing:-.03em;
transform:translateY(105%);
transition:transform .7s var(--ease-out), color .3s;
}
.menu.is-open .menu__list a{ transform:translateY(0); }
.menu__list li:nth-child(1) a{ transition-delay:.10s }
.menu__list li:nth-child(2) a{ transition-delay:.16s }
.menu__list li:nth-child(3) a{ transition-delay:.22s }
.menu__list li:nth-child(4) a{ transition-delay:.28s }
.menu__list li:nth-child(5) a{ transition-delay:.34s }
.menu__list li:nth-child(6) a{ transition-delay:.40s }
.menu__list li:nth-child(7) a{ transition-delay:.46s }
.menu__list a:hover{ color:var(--ajonc); }
.menu__list a i{ font:500 .55em/1 var(--mono); font-style:normal; color:var(--ajonc); letter-spacing:.1em; }
.menu__foot{
margin-top:clamp(2rem,1rem + 4vw,4rem);
display:flex; flex-wrap:wrap; gap:.6rem 2rem;
color:rgba(239,234,224,.7);
}
/* ------------------------------------------------------------- 9. Boutons */
.btn{
--btn-fg:var(--papier);
--btn-bg:var(--granit);
position:relative;
display:inline-flex; align-items:center; gap:.8em;
padding:.95em 1.5em;
font-family:var(--mono); font-size:var(--t-xs);
letter-spacing:.14em; text-transform:uppercase;
color:var(--btn-fg);
background:var(--btn-bg);
border-radius:999px;
overflow:hidden;
isolation:isolate;
transition:color .4s var(--ease), border-color .4s var(--ease);
white-space:nowrap;
}
.btn::before{
content:""; position:absolute; inset:0; z-index:-1;
background:var(--ajonc);
transform:translateY(101%);
transition:transform .55s var(--ease-out);
}
.btn:hover{ color:var(--granit); }
.btn:hover::before{ transform:translateY(0); }
.btn svg{ width:.95em; height:.95em; flex:none; transition:transform .45s var(--ease-out); }
.btn:hover svg{ transform:translate(3px,-3px); }
.btn--ghost{
--btn-fg:var(--fg); --btn-bg:transparent;
border:1px solid var(--line-2);
}
.btn--ajonc{ --btn-bg:var(--ajonc); --btn-fg:var(--granit); }
.btn--ajonc::before{ background:var(--granit); }
.btn--ajonc:hover{ color:var(--papier); }
.btn--lg{ padding:1.2em 2em; font-size:var(--t-sm); }
/* lien texte avec flèche */
.tlink{
display:inline-flex; align-items:center; gap:.6em;
font-family:var(--mono); font-size:var(--t-xs);
letter-spacing:.13em; text-transform:uppercase;
padding-bottom:.35em;
border-bottom:1px solid var(--line-2);
transition:border-color .35s var(--ease), color .35s;
}
.tlink:hover{ border-color:var(--accent); color:var(--accent); }
.tlink svg{ width:.85em;height:.85em; transition:transform .4s var(--ease-out); }
.tlink:hover svg{ transform:translateX(4px); }
/* ------------------------------------------------------------- 10. Marquee */
.band{
border-block:var(--rule) solid var(--line);
background:var(--bg); color:var(--fg);
padding-block:clamp(.8rem,.5rem + .8vw,1.35rem);
overflow:hidden;
}
.band__track{
display:flex; width:max-content;
animation:slide 38s linear infinite;
will-change:transform;
}
.band:hover .band__track{ animation-play-state:paused; }
.band__track > span{
display:flex; align-items:center; gap:clamp(1.4rem,1rem + 1.6vw,3rem);
padding-right:clamp(1.4rem,1rem + 1.6vw,3rem);
font-family:var(--display);
font-size:clamp(1.5rem,1rem + 2.6vw,3.2rem);
font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 120;
letter-spacing:-.02em;
white-space:nowrap;
}
.band__track b{ font-weight:400; }
.band__track i{ font-style:normal; color:var(--ajonc); font-size:.5em; transform:translateY(-.15em); }
@keyframes slide{ to{ transform:translateX(-50%); } }
/* --------------------------------------------------------------- 11. Hero */
.hero{
position:relative;
min-height:100svh;
display:flex; flex-direction:column; justify-content:flex-end;
padding-top:calc(var(--nav-h) + 4vh);
padding-bottom:clamp(1.5rem,1rem + 2vw,3rem);
overflow:hidden;
isolation:isolate;
}
.hero__side{
position:absolute; right:calc(var(--pad) * .38); top:50%;
transform:translateY(-50%);
writing-mode:vertical-rl;
font-family:var(--mono); font-size:var(--t-xs);
letter-spacing:.34em; text-transform:uppercase;
color:var(--muted);
}
@media (max-width:1100px){ .hero__side{ display:none; } }
.hero__main{ position:relative; z-index:2; }
.hero h1{ margin-block:.18em .5em; }
.hero__def{
border-left:2px solid var(--ajonc);
padding-left:1.1rem;
max-width:34ch;
font-family:var(--mono);
font-size:var(--t-sm);
line-height:1.65;
color:color-mix(in srgb,var(--fg) 78%, transparent);
}
.hero__def b{ color:var(--fg); font-weight:500; }
.hero__foot{
position:relative; z-index:2;
margin-top:clamp(2.5rem,1.5rem + 5vw,6rem);
padding-top:1.2rem;
border-top:var(--rule) solid var(--line);
display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem 2rem;
}
.hero__facts{ display:flex; flex-wrap:wrap; gap:.6rem 2.4rem; }
.hero__fact{ display:flex; align-items:baseline; gap:.55rem; }
.hero__fact b{ font:500 var(--t-xs)/1 var(--mono); color:var(--ajonc); letter-spacing:.12em; }
.hero__fact span{ font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; }
.scroller{
display:flex; align-items:center; gap:.7rem;
font-family:var(--mono); font-size:var(--t-xs);
letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.scroller i{
display:block; width:1px; height:34px; background:var(--line-2);
position:relative; overflow:hidden;
}
.scroller i::after{
content:""; position:absolute; inset:0; background:var(--ajonc);
animation:drip 1.9s var(--ease-in-out) infinite;
}
@keyframes drip{ 0%{transform:translateY(-100%)} 55%,100%{transform:translateY(100%)} }
/* ------------------------------------------------- 12. Bloc manifeste / quote */
.quote{
font-family:var(--display);
font-size:clamp(1.5rem,.9rem + 2.6vw,3.1rem);
font-variation-settings:"SOFT" 8,"WONK" 1,"opsz" 144;
line-height:1.06; letter-spacing:-.025em;
text-wrap:balance;
}
.quote em{ font-style:italic; color:var(--ajonc); }
.cite{ margin-top:1.4rem; color:var(--muted); }
.stat{ border-top:var(--rule) solid var(--line); padding-top:.9rem; }
.stat b{
display:block;
font-family:var(--display); font-weight:400;
font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 144;
font-size:clamp(2.2rem,1.4rem + 3vw,3.8rem);
line-height:.95; letter-spacing:-.03em;
}
.stat span{ display:block; margin-top:.5rem; font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
/* ------------------------------------------------------------ 13. Gammes */
.gammes{ border-top:var(--rule) solid var(--line); }
.gamme{
position:relative;
display:grid;
grid-template-columns:4.5rem minmax(0,1fr) minmax(0,1.15fr) auto;
gap:clamp(1rem,.5rem + 1.4vw,2.4rem);
align-items:center;
padding-block:clamp(1.3rem,.8rem + 1.6vw,2.4rem);
border-bottom:var(--rule) solid var(--line);
isolation:isolate;
transition:color .5s var(--ease), padding-left .6s var(--ease-out);
}
.gamme::before{
content:""; position:absolute; inset:0; z-index:-1;
background:var(--granit);
transform:scaleY(0); transform-origin:bottom;
transition:transform .55s var(--ease-out);
}
.gamme:hover::before{ transform:scaleY(1); transform-origin:top; }
.gamme:hover{ color:var(--papier); padding-left:clamp(.6rem,.2rem + 1.2vw,1.6rem); }
.gamme:hover .gamme__n,.gamme:hover .gamme__p b{ color:var(--ajonc); }
.gamme__n{ font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.12em; color:var(--muted); transition:color .4s; }
.gamme__t{
font-family:var(--display); font-weight:400;
font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 144;
font-size:clamp(1.6rem,1.1rem + 2.2vw,3rem);
line-height:1; letter-spacing:-.03em;
}
.gamme__d{ font-size:var(--t-sm); color:color-mix(in srgb,currentColor 72%, transparent); max-width:46ch; }
.gamme__p{ text-align:right; font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.08em; white-space:nowrap; }
.gamme__p b{ display:block; font-size:1.5em; font-weight:400; letter-spacing:-.01em; transition:color .4s; }
.gamme__ico{ position:absolute; right:0; top:0; opacity:0; }
@media (max-width:820px){
.gamme{ grid-template-columns:2.6rem minmax(0,1fr) auto; row-gap:.5rem; align-items:start; }
.gamme__d{ grid-column:2/4; }
.gamme__p{ grid-column:3; grid-row:1; align-self:center; }
}
/* --------------------------------------------------------- 14. Cartes / listes */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.cards--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:1000px){ .cards--3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .cards,.cards--3{ grid-template-columns:1fr; } }
.card{
background:var(--bg);
padding:clamp(1.4rem,1rem + 1.6vw,2.4rem);
display:flex; flex-direction:column; gap:.9rem;
min-height:230px;
transition:background .5s var(--ease), color .5s var(--ease);
}
.card:hover{ background:var(--granit); color:var(--papier); }
.card:hover .card__n{ color:var(--ajonc); }
.card__n{ font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.14em; color:var(--muted); transition:color .4s; }
.card h3{
font-family:var(--display); font-weight:400;
font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 120;
font-size:var(--t-xl); line-height:1.02; letter-spacing:-.025em;
}
.card p{ font-size:var(--t-sm); color:color-mix(in srgb,currentColor 74%, transparent); margin-top:auto; }
.deflist{ border-top:var(--rule) solid var(--line); }
.deflist > div{
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
gap:1rem clamp(1rem,.5rem + 2vw,3rem);
padding-block:1.1rem;
border-bottom:var(--rule) solid var(--line);
}
.deflist dt{ font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; }
.deflist dd{ margin:0; font-size:var(--t-sm); color:var(--muted); }
@media (max-width:640px){ .deflist > div{ grid-template-columns:1fr; gap:.35rem; } }
/* --------------------------------------------------------- 15. Tableau tarifs */
.tarifs{ width:100%; border-collapse:collapse; font-size:var(--t-sm); }
.tarifs caption{
text-align:left; padding-bottom:1rem;
font-family:var(--mono); font-size:var(--t-xs);
letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.tarifs th,.tarifs td{ text-align:right; padding:1rem .6rem; border-bottom:var(--rule) solid var(--line); }
.tarifs th:first-child,.tarifs td:first-child{ text-align:left; padding-left:0; }
.tarifs td:last-child,.tarifs th:last-child{ padding-right:0; }
.tarifs thead th{
font-family:var(--mono); font-size:var(--t-xs); font-weight:500;
letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
border-bottom-color:var(--line-2);
}
.tarifs tbody th{
font-family:var(--display); font-weight:400;
font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 96;
font-size:var(--t-lg); letter-spacing:-.02em; line-height:1.05;
}
.tarifs tbody th small{ display:block; font:400 var(--t-xs)/1.4 var(--mono); color:var(--muted); letter-spacing:.04em; margin-top:.35rem; text-transform:none; }
.tarifs tbody tr{ transition:background .4s var(--ease); }
.tarifs tbody tr:hover{ background:color-mix(in srgb,var(--ajonc) 16%, transparent); }
.tarifs td b{ font-family:var(--mono); font-weight:500; font-size:1.15em; }
.tscroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media (max-width:720px){ .tarifs{ min-width:560px; } }
/* --------------------------------------------------- 16. Placeholders photo */
.ph{
position:relative;
background:
linear-gradient(148deg, color-mix(in srgb,var(--ocean) 22%, var(--papier-2)) 0%, var(--papier-2) 48%, color-mix(in srgb,var(--ajonc) 22%, var(--papier-2)) 100%);
overflow:hidden;
isolation:isolate;
display:grid; place-items:center;
}
.ph[data-ratio="4-5"]{ aspect-ratio:4/5; }
.ph[data-ratio="3-4"]{ aspect-ratio:3/4; }
.ph[data-ratio="1-1"]{ aspect-ratio:1/1; }
.ph[data-ratio="3-2"]{ aspect-ratio:3/2; }
.ph[data-ratio="16-9"]{ aspect-ratio:16/9; }
.ph[data-ratio="21-9"]{ aspect-ratio:21/9; }
.ph .topo{ z-index:0; }
.ph .topo path{ stroke:var(--granit); }
.ph__label{
position:relative; z-index:2;
font-family:var(--mono); font-size:var(--t-xs);
letter-spacing:.14em; text-transform:uppercase;
color:color-mix(in srgb,var(--granit) 60%, transparent);
text-align:center; padding:1rem; line-height:1.7;
}
.ph__label b{ display:block; font-weight:500; color:var(--granit); letter-spacing:.2em; }
.ph::before,.ph::after{
content:""; position:absolute; z-index:2;
width:14px; height:14px;
border:1px solid color-mix(in srgb,var(--granit) 40%, transparent);
}
.ph::before{ top:12px; left:12px; border-right:0; border-bottom:0; }
.ph::after{ bottom:12px; right:12px; border-left:0; border-top:0; }
.ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:3; }
/* ------------------------------------------------------------ 17. Presse */
.presse{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(1.5rem,1rem + 3vw,4.5rem); }
.presse span{
font-family:var(--display); font-weight:500;
font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 60;
font-size:clamp(1rem,.8rem + .9vw,1.6rem);
letter-spacing:-.01em;
color:var(--muted);
transition:color .4s var(--ease);
}
.presse span:hover{ color:var(--fg); }
/* --------------------------------------------------------- 18. Infos / carte */
.infos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:clamp(1.5rem,1rem + 2vw,3rem); }
.info h4{
font-family:var(--mono); font-size:var(--t-xs); font-weight:500;
letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
padding-bottom:.8rem; margin-bottom:.9rem;
border-bottom:var(--rule) solid var(--line);
}
.info p,.info li{ font-size:var(--t-sm); line-height:1.7; }
.info a:hover{ color:var(--accent); }
/* --------------------------------------------------------------- 19. Form */
.field{ position:relative; margin-bottom:1.6rem; }
.field label{
display:block; margin-bottom:.55rem;
font-family:var(--mono); font-size:var(--t-xs);
letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
}
.field input,.field textarea,.field select{
width:100%; padding:.85rem 0;
font:inherit; font-size:var(--t-md);
color:var(--fg); background:transparent;
border:0; border-bottom:1px solid var(--line-2);
border-radius:0;
transition:border-color .35s var(--ease);
}
.field textarea{ resize:vertical; min-height:120px; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:0; border-bottom-color:var(--ajonc); }
.field select{ appearance:none; cursor:pointer; }
/* --------------------------------------------------------------- 20. Footer */
.foot{ background:var(--granit); color:var(--papier); position:relative; overflow:hidden; }
.foot .topo path{ stroke:var(--papier); }
.foot a:hover{ color:var(--ajonc); }
.foot__word{
font-family:var(--display); font-weight:400;
font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 144;
font-size:var(--t-4xl); line-height:.75; letter-spacing:-.045em;
margin-block:clamp(2rem,1rem + 4vw,4.5rem) 0;
display:block; width:100%;
}
.foot__h{ color:var(--ajonc); margin-bottom:1rem; }
.foot__list{ line-height:2.1; }
.foot__list--part{ color:rgba(239,234,224,.72); }
/* Pied de page en mobile. Les trois listes passaient chacune sur toute la
largeur : une trentaine de lignes à faire défiler avant le bas de la page,
pour des libellés de deux mots. « Le site » et « Nous trouver » restent donc
côte à côte, et « Complices » se met sur deux colonnes. L'interligne de 2,1,
réglé pour des colonnes étroites en grand écran, est resserré. */
@media (max-width:680px){
/* Sous 680 px, une règle générale ramène toute colonne à la pleine largeur.
C'est le bon réglage pour le contenu des pages, pas pour deux listes de
libellés courts : on la reprend ici, et seulement ici. */
.foot .foot__col{ grid-column-end:span 6!important; grid-column-start:auto!important; }
.foot__h{ margin-bottom:.6rem; }
.foot__list{ line-height:1.9; }
/* Filet de sécurité : un libellé plus long que la colonne se coupe au lieu
de déborder. La césure de l'adresse e-mail, elle, est placée à la main
par un après l'arobase — laissée au navigateur elle tombait au
milieu du domaine. */
.foot__list li{ overflow-wrap:break-word; }
/* la barre du bas tenait tout juste sur deux lignes : on desserre */
.foot__bar{ gap:.6rem 1.2rem; }
.foot__list--part{ columns:2; column-gap:1.4rem; }
.foot__list--part li{ break-inside:avoid; }
}
.foot__bar{
display:flex; flex-wrap:wrap; justify-content:space-between; gap:.8rem 2rem;
padding-block:1.4rem;
border-top:1px solid rgba(239,234,224,.16);
margin-top:clamp(1.5rem,1rem + 2vw,3rem);
font-family:var(--mono); font-size:var(--t-xs);
letter-spacing:.1em; text-transform:uppercase;
color:rgba(239,234,224,.6);
}
/* --------------------------------------------------- 21. Reveals & split */
.line{ display:block; overflow:hidden; }
.line > span{
display:block;
transform:translateY(105%) rotate(2deg);
transition:transform 1.05s var(--ease-out);
transition-delay:calc(var(--i,0) * 65ms);
}
.is-in .line > span{ transform:translateY(0) rotate(0); }
[data-rise]{
opacity:0; transform:translateY(28px);
transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
transition-delay:calc(var(--d,0) * 1ms);
}
[data-rise].is-in{ opacity:1; transform:none; }
[data-wipe]{ clip-path:inset(0 0 100% 0); transition:clip-path 1.1s var(--ease-in-out); }
[data-wipe].is-in{ clip-path:inset(0 0 0 0); }
[data-grow]{ transform:scaleX(0); transform-origin:left; transition:transform 1s var(--ease-in-out); }
[data-grow].is-in{ transform:scaleX(1); }
/* ------------------------------------------------------ 22. Curseur custom */
.cursor{
position:fixed; top:0; left:0; z-index:950;
width:34px; height:34px; margin:-17px 0 0 -17px;
border:1px solid var(--granit);
border-radius:50%;
pointer-events:none;
opacity:0;
transition:opacity .3s, width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out), background .35s;
mix-blend-mode:difference;
filter:invert(1);
}
.cursor.on{ opacity:.85; }
.cursor.grow{ width:66px; height:66px; margin:-33px 0 0 -33px; background:var(--papier); }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }
/* --------------------------------------------------- 23. Transition de page */
.pt{
position:fixed; inset:0; z-index:980;
display:grid; grid-template-rows:repeat(6,1fr);
pointer-events:none;
}
.pt i{
display:block; background:var(--granit);
transform:scaleY(0); transform-origin:bottom;
}
.pt.in i{ animation:ptIn .62s var(--ease-in-out) forwards; }
.pt.out i{ transform:scaleY(1); animation:ptOut .62s var(--ease-in-out) forwards; }
.pt i:nth-child(1){ animation-delay:0ms }
.pt i:nth-child(2){ animation-delay:45ms }
.pt i:nth-child(3){ animation-delay:90ms }
.pt i:nth-child(4){ animation-delay:135ms }
.pt i:nth-child(5){ animation-delay:180ms }
.pt i:nth-child(6){ animation-delay:225ms }
@keyframes ptIn{ from{transform:scaleY(0)} to{transform:scaleY(1)} }
@keyframes ptOut{ from{transform:scaleY(1); transform-origin:top} to{transform:scaleY(0); transform-origin:top} }
/* ------------------------------------------------------------ 24. Préloader */
.pre{
position:fixed; inset:0; z-index:995;
background:var(--granit); color:var(--papier);
display:grid; place-items:center;
transition:clip-path 1s var(--ease-in-out);
clip-path:inset(0 0 0 0);
}
.pre.done{ clip-path:inset(0 0 100% 0); pointer-events:none; }
.pre__in{ text-align:center; }
.pre__w{
font-family:var(--display); font-weight:400;
font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 144;
font-size:clamp(3rem,1rem + 12vw,10rem); line-height:.9; letter-spacing:-.04em;
overflow:hidden;
}
.pre__w span{ display:block; transform:translateY(105%); animation:preUp .9s var(--ease-out) .1s forwards; }
@keyframes preUp{ to{ transform:translateY(0); } }
.pre__l{
margin-top:1.2rem; font-family:var(--mono); font-size:var(--t-xs);
letter-spacing:.3em; text-transform:uppercase; color:rgba(239,234,224,.55);
opacity:0; animation:preFade .7s var(--ease) .5s forwards;
}
@keyframes preFade{ to{ opacity:1; } }
/* La barre et le vélo qui la remonte partagent la même piste : sa largeur est
une variable, pour que la course du vélo s'y ajuste sans la redire. Le vélo
s'arrête pile au bout au moment où la barre se remplit — il a l'air d'avoir
tracé le trait. */
.pre__prog{
--piste:min(240px,50vw); --velo:26px;
position:relative; width:var(--piste); margin:1.6rem auto 0;
}
.pre__bike{
position:absolute; left:0; bottom:100%; margin-bottom:3px;
width:var(--velo); height:auto; color:var(--ajonc);
animation:preBike 1.75s var(--ease-in-out) .25s forwards;
}
@keyframes preBike{ to{ transform:translateX(calc(var(--piste) - var(--velo))); } }
.pre__bar{ width:100%; height:1px; background:rgba(239,234,224,.2); overflow:hidden; }
.pre__bar i{ display:block; height:100%; background:var(--ajonc); transform:scaleX(0); transform-origin:left; animation:preBar 1.75s var(--ease-in-out) .25s forwards; }
@keyframes preBar{ to{ transform:scaleX(1); } }
/* --------------------------------------------------------- 25. Utilitaires */
.col-1{grid-column-end:span 1}.col-2{grid-column-end:span 2}.col-3{grid-column-end:span 3}
.col-4{grid-column-end:span 4}.col-5{grid-column-end:span 5}.col-6{grid-column-end:span 6}
.col-7{grid-column-end:span 7}.col-8{grid-column-end:span 8}.col-9{grid-column-end:span 9}
.col-10{grid-column-end:span 10}.col-11{grid-column-end:span 11}.col-12{grid-column-end:span 12}
.start-2{grid-column-start:2}.start-3{grid-column-start:3}.start-4{grid-column-start:4}
.start-5{grid-column-start:5}.start-6{grid-column-start:6}.start-7{grid-column-start:7}
.start-8{grid-column-start:8}.start-9{grid-column-start:9}.start-10{grid-column-start:10}
@media (max-width:1000px){
.md-6{grid-column-end:span 6!important;grid-column-start:auto!important}
.md-12{grid-column-end:span 12!important;grid-column-start:auto!important}
}
@media (max-width:680px){
.sm-12{grid-column-end:span 12!important;grid-column-start:auto!important}
[class*="col-"]{grid-column-end:span 12!important;grid-column-start:auto!important}
}
.mt-1{margin-top:.6rem}.mt-2{margin-top:1.2rem}.mt-3{margin-top:2rem}
.mt-4{margin-top:clamp(2rem,1rem + 3vw,4rem)}.mt-5{margin-top:clamp(3rem,1.5rem + 5vw,7rem)}
.flex{display:flex}.wrapf{flex-wrap:wrap}.gap-1{gap:.8rem}.gap-2{gap:1.4rem}.gap-3{gap:2.2rem}
.aic{align-items:center}.jcb{justify-content:space-between}.jce{justify-content:flex-end}
.tar{text-align:right}
.sticky{position:sticky;top:calc(var(--nav-h) + 2rem)}
@media (max-width:1000px){ .sticky{position:static} }
/* -------------------------------------------------- 26. Mouvement réduit */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.001ms!important; animation-iteration-count:1!important;
transition-duration:.001ms!important; scroll-behavior:auto!important;
}
.line > span{ transform:none!important; }
[data-rise]{ opacity:1!important; transform:none!important; }
[data-wipe]{ clip-path:none!important; }
[data-grow]{ transform:none!important; }
.grain{ display:none; }
.pre{ display:none; }
}
/* ------------------------------------------- 27. Ajustements sur fond sombre */
[data-theme="dark"] .card:hover,
[data-theme="ocean"] .card:hover{ background:var(--papier); color:var(--granit); }
[data-theme="dark"] .card:hover .card__n,
[data-theme="ocean"] .card:hover .card__n{ color:var(--rouille); }
[data-theme="dark"] .cards,
[data-theme="ocean"] .cards{ background:var(--line); border-color:var(--line); }
[data-theme="dark"] .btn--ghost,
[data-theme="ocean"] .btn--ghost{ --btn-fg:var(--papier); }
[data-theme="ocean"] .gamme:hover{ color:var(--papier); }
[data-theme="dark"] .nav__link[aria-current="page"],
[data-theme="ocean"] .nav__link[aria-current="page"]{ color:var(--ajonc); }
[data-theme="dark"] .ph,
[data-theme="ocean"] .ph{
background:linear-gradient(148deg, color-mix(in srgb,var(--ocean) 55%, var(--granit-2)) 0%, var(--granit-2) 52%, color-mix(in srgb,var(--ajonc) 26%, var(--granit-2)) 100%);
}
[data-theme="dark"] .ph .topo path,
[data-theme="ocean"] .ph .topo path{ stroke:var(--papier); }
[data-theme="dark"] .ph__label,
[data-theme="ocean"] .ph__label{ color:rgba(239,234,224,.6); }
[data-theme="dark"] .ph__label b,
[data-theme="ocean"] .ph__label b{ color:rgba(239,234,224,.92); }
[data-theme="dark"] .ph::before,[data-theme="dark"] .ph::after,
[data-theme="ocean"] .ph::before,[data-theme="ocean"] .ph::after{ border-color:rgba(239,234,224,.45); }
/* ---------------------------------------------- 28. Bloc « note » / encadré */
.note{
border:1px solid var(--line-2);
background:color-mix(in srgb, var(--bg) 78%, transparent);
padding:clamp(1.2rem,.8rem + 1.4vw,2rem);
font-size:var(--t-sm);
line-height:1.7;
position:relative;
}
.note b{ display:block; font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:.7rem; }
.note--fill{ background:color-mix(in srgb,var(--ajonc) 18%, transparent); border-color:transparent; }
.pills{ display:flex; flex-wrap:wrap; gap:.5rem; }
.pill{
font-family:var(--mono); font-size:var(--t-xs);
letter-spacing:.1em; text-transform:uppercase;
padding:.45em .95em; border:1px solid var(--line-2); border-radius:999px;
transition:background .35s var(--ease), color .35s, border-color .35s;
}
a.pill:hover{ background:var(--ajonc); border-color:var(--ajonc); color:var(--granit); }
.steps{ counter-reset:s; }
.steps li{
counter-increment:s;
display:grid; grid-template-columns:3.2rem 1fr; gap:1rem;
padding-block:1.3rem;
border-bottom:var(--rule) solid var(--line);
}
.steps li::before{
content:"0" counter(s);
font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.12em; color:var(--accent);
padding-top:.3em;
}
.steps h4{ font-family:var(--display); font-weight:400; font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 96; font-size:var(--t-lg); letter-spacing:-.02em; line-height:1.1; }
.steps p{ font-size:var(--t-sm); color:var(--muted); margin-top:.4rem; max-width:58ch; }
/* --------------------------------------------------- 29. En-tête de page */
.phero{
padding-top:calc(var(--nav-h) + clamp(3.2rem,2rem + 6vw,8rem));
padding-bottom:clamp(2.5rem,1.5rem + 4vw,5.5rem);
overflow:hidden;
}
.phero h1{ margin-block:.2em .4em; }
.phero .lead{ max-width:46ch; }
/* -------------------------------------------------------- 30. Bloc produit */
.prod{
padding-block:clamp(2.5rem,1.5rem + 4vw,6rem);
border-top:var(--rule) solid var(--line);
scroll-margin-top:calc(var(--nav-h) + 2rem);
}
.prod__meta{ display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; margin-top:1.4rem; }
.prod__meta span{
font-family:var(--mono); font-size:var(--t-xs);
letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
display:flex; align-items:center; gap:.5em;
}
.prod__meta span::before{ content:""; width:5px; height:5px; background:var(--ajonc); border-radius:50%; }
.prod__price{
display:flex; align-items:baseline; gap:.6rem;
margin-top:1.6rem; padding-top:1.2rem;
border-top:var(--rule) solid var(--line);
}
.prod__price b{
font-family:var(--display); font-weight:400;
font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 144;
font-size:clamp(2rem,1.4rem + 2.4vw,3.2rem); line-height:1; letter-spacing:-.03em;
}
.prod__price span{ font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
/* -------------------------------------------------------------- 31. Carte */
.map{ position:relative; isolation:isolate; aspect-ratio:16/10; background:var(--papier-2); overflow:hidden; border:1px solid var(--line); }
.map__pin{
position:absolute; left:38%; top:52%;
width:14px; height:14px; margin:-7px 0 0 -7px;
background:var(--rouille); border-radius:50%;
box-shadow:0 0 0 6px color-mix(in srgb,var(--rouille) 22%, transparent);
}
.map__pin::after{
content:""; position:absolute; inset:-14px; border:1px solid var(--rouille);
border-radius:50%; opacity:.5; animation:ping 2.6s var(--ease-out) infinite;
}
@keyframes ping{ 0%{transform:scale(.4);opacity:.7} 100%{transform:scale(1.6);opacity:0} }
.map__label{
position:absolute; left:38%; top:52%;
transform:translate(18px,-50%);
font-family:var(--mono); font-size:var(--t-xs);
letter-spacing:.12em; text-transform:uppercase;
background:var(--granit); color:var(--papier);
padding:.4em .7em;
}
/* ------------------------------------------------------ 32. Rangée de champs */
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(1rem,.5rem + 2vw,2.4rem); }
@media (max-width:560px){ .frow{ grid-template-columns:1fr; } }
/* ------------------------------------------------- 33. Photos & triptyque */
.ph img{ transition:transform 1.4s var(--ease-out); will-change:transform; }
.ph:hover img{ transform:scale(1.04); }
.tript{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(.6rem,.3rem + 1.1vw,1.6rem);
align-items:start;
margin-block:clamp(2rem,1rem + 3vw,4.5rem) 0;
}
.tript > *:nth-child(2){ margin-top:clamp(1rem,3vw,3.5rem); }
.tript > *:nth-child(3){ margin-top:clamp(2rem,6vw,7rem); }
.tript__cap{
margin-top:1.2rem; padding-bottom:clamp(2rem,1rem + 3vw,4.5rem);
color:var(--muted); text-align:right;
}
@media (max-width:760px){
.tript{ grid-template-columns:1fr 1fr; }
.tript > *:nth-child(3){ display:none; }
.tript__cap{ text-align:left; }
}
/* ------------------------------------------------- 34. Presse (liens) */
.presse a{
display:inline-flex; align-items:center; gap:.5em;
color:var(--muted);
transition:color .35s var(--ease);
}
.presse a svg{ width:.7em; height:.7em; opacity:0; transform:translate(-3px,3px); transition:all .35s var(--ease-out); }
.presse a:hover{ color:var(--fg); }
.presse a:hover svg{ opacity:1; transform:none; }
.presse a:hover span{ color:var(--fg); }
/* --------------------------------------------- 35. Triptyque cliquable */
.tript__c{ display:block; }
.tript__t{
display:flex; align-items:center; gap:.5em;
margin-top:.9rem;
font-family:var(--mono); font-size:var(--t-xs);
letter-spacing:.16em; text-transform:uppercase;
transition:color .35s var(--ease);
}
.tript__t svg{ width:.75em; height:.75em; transition:transform .4s var(--ease-out); }
.tript__c:hover .tript__t{ color:var(--rouille); }
.tript__c:hover .tript__t svg{ transform:translate(3px,-3px); }
/* --------------------------------------------- 36. Grille de prix atelier */
.pricecols{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(1.5rem,1rem + 2vw,3.5rem) clamp(2rem,1rem + 4vw,6rem);
align-items:start;
}
@media (max-width:820px){ .pricecols{ grid-template-columns:1fr; } }
.pricelist h4{
font-family:var(--mono); font-size:var(--t-xs); font-weight:500;
letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
padding-bottom:.7rem; margin-bottom:.3rem;
border-bottom:1px solid var(--line-2);
}
.pricelist li{
display:flex; align-items:baseline; justify-content:space-between; gap:1.2rem;
padding:.6rem 0;
border-bottom:var(--rule) solid var(--line);
font-size:var(--t-sm);
transition:background .3s var(--ease);
}
.pricelist li:hover{ background:color-mix(in srgb,var(--ajonc) 14%, transparent); }
.pricelist li small{ display:block; color:var(--muted); font-size:.88em; line-height:1.5; }
.pricelist li b{
font-family:var(--mono); font-weight:500; white-space:nowrap;
font-variant-numeric:tabular-nums;
}
/* --------------------------------------------------- 37. Quatre vignettes */
.quatre{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1rem,.5rem + 1.4vw,2.2rem); }
.quatre .qcard h3{ line-height:1.05; }
.quatre .qcard p{ color:var(--muted); margin-top:.5rem; line-height:1.65; }
@media (max-width:980px){ .quatre{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .quatre{ grid-template-columns:1fr; } }
/* --------------------------------------------------- 38. Divers tableaux */
.tarifs{ font-variant-numeric:tabular-nums; }
.tarifs tbody th small{ text-transform:none; }
a.card{ text-decoration:none; }
a.card h3{ transition:color .4s var(--ease); }
/* -------------------------------------------- 39. Menu plein écran : CTA */
.menu__foot{ align-items:center; }
.menu__foot a:not(.btn){ transition:color .3s var(--ease); }
.menu__foot a:not(.btn):hover{ color:var(--ajonc); }
/* Menu ouvert : la barre passe en clair, sinon le burger et la marque
disparaissent sur le fond sombre du menu. */
.nav.is-open{
color:var(--papier);
background:transparent;
box-shadow:none;
backdrop-filter:none;
-webkit-backdrop-filter:none;
}
.nav.is-open .brand small{ color:rgba(239,234,224,.6); }
/* ============================================ 40. Carte d'itinéraire
Fond de carte vectoriel généré (geo/make_map.py) : le trait de côte est
du SVG, pas une tuile — donc il prend les couleurs du thème comme le
reste du site, et pèse quelques kilo-octets.
================================================================== */
:root{
--land-fill: color-mix(in srgb, var(--granit) 7%, var(--papier));
--land-line: color-mix(in srgb, var(--granit) 32%, transparent);
}
[data-theme="ocean"]{
--land-fill: color-mix(in srgb, var(--papier) 86%, var(--ocean));
--land-line: color-mix(in srgb, var(--ocean) 75%, transparent);
}
[data-theme="dark"]{
--land-fill: #24271f;
--land-line: color-mix(in srgb, var(--papier) 24%, transparent);
}
.carte{ position:relative; --dur:2.8s; }
.carte__frame{ position:relative; width:100%; max-width:920px; margin-inline:auto; }
.carte__svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.carte__land path{
fill:var(--land-fill);
stroke:var(--land-line); stroke-width:1.1;
vector-effect:non-scaling-stroke;
}
.carte__ferry,.carte__ghost,.carte__route,.clead{ fill:none; vector-effect:non-scaling-stroke; }
.carte__ferry{ stroke:var(--fg); stroke-width:1.7; stroke-dasharray:2 9; stroke-linecap:round; opacity:.45; }
.carte__ghost{ stroke:var(--fg); stroke-width:1.3; stroke-dasharray:4 7; opacity:.2; }
.carte__route{
stroke:var(--ajonc); stroke-width:3.4;
stroke-linecap:round; stroke-linejoin:round;
stroke-dasharray:var(--len,3000); stroke-dashoffset:var(--len,3000);
transition:stroke-dashoffset var(--dur) cubic-bezier(.37,0,.25,1) .35s;
}
.carte.is-in .carte__route{ stroke-dashoffset:0; }
.cpt{
opacity:0; transform:scale(.3);
transform-box:fill-box; transform-origin:center;
transition:opacity .45s var(--ease-out), transform .6s var(--ease-out);
transition-delay:calc(var(--t) * var(--dur) + .45s);
}
.carte.is-in .cpt{ opacity:1; transform:none; }
.cpt__dot{ fill:var(--ajonc); stroke:var(--granit); stroke-width:1.6; vector-effect:non-scaling-stroke; }
.cpt__halo{ fill:var(--ajonc); opacity:.16; }
.cpt--end .cpt__dot{ fill:var(--rouille); stroke:var(--papier); }
.clead{ stroke:var(--fg); stroke-width:1.2; stroke-dasharray:3 5; opacity:0;
transition:opacity .8s var(--ease); transition-delay:calc(var(--t) * var(--dur) + 1s); }
.carte.is-in .clead{ opacity:.4; }
.carte__scale path,.carte__nord path{ stroke:var(--fg); stroke-width:1.5; fill:none; vector-effect:non-scaling-stroke; opacity:.5; }
.carte__nord path{ fill:var(--fg); }
.carte__scale text,.carte__nord text{
font:500 17px var(--mono); fill:var(--fg); opacity:.5;
letter-spacing:.14em; text-anchor:middle;
}
/* cartouches d'étape */
.carte__labels{ position:absolute; inset:0; pointer-events:none; }
.cmk{
position:absolute; display:flex; align-items:center; gap:.45em;
white-space:nowrap; font-weight:400;
opacity:0; transition:opacity .6s var(--ease);
transition-delay:calc(var(--t) * var(--dur) + .7s);
}
.carte.is-in .cmk{ opacity:1; }
.cmk i{
font:500 .6rem/1 var(--mono); font-style:normal; letter-spacing:.08em;
color:var(--granit); background:var(--ajonc);
padding:.34em .42em; border-radius:2px;
}
.cmk span{
font:500 var(--t-xs)/1.3 var(--mono);
letter-spacing:.09em; text-transform:uppercase;
background:color-mix(in srgb, var(--bg) 90%, transparent);
padding:.3em .5em;
}
.cmk small{ display:block; font-size:.92em; font-weight:400; letter-spacing:.02em; text-transform:none; opacity:.6; }
.cmk--right{ transform:translate(15px,-50%); }
.cmk--left{ transform:translate(calc(-100% - 15px),-50%); flex-direction:row-reverse; }
.cmk--bottom{ transform:translate(-50%,18px); }
/* vignettes photo épinglées */
.cpin{
position:absolute; margin:0;
background:var(--papier); padding:6px 6px 0;
box-shadow:0 10px 34px rgba(0,0,0,.24);
rotate:var(--rot,-2deg);
opacity:0; translate:0 14px;
transition:opacity .8s var(--ease-out), translate .8s var(--ease-out), rotate .5s var(--ease-out);
transition-delay:calc(var(--t) * var(--dur) + .95s);
}
.carte.is-in .cpin{ opacity:1; translate:0 0; }
.cpin:hover{ rotate:0deg; z-index:3; }
.cpin:nth-of-type(even){ --rot:1.8deg; }
.cpin img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.cpin figcaption{
font:500 .56rem/1.7 var(--mono); letter-spacing:.14em; text-transform:uppercase;
color:var(--granit); padding:.45em .2em;
}
/* liste des étapes, sous la carte */
.etapes{ border-top:var(--rule) solid var(--line); }
.etape{
display:grid; grid-template-columns:3rem 12rem 1fr; gap:1rem;
align-items:baseline;
padding-block:.85rem;
border-bottom:var(--rule) solid var(--line);
}
.etape i{ font:500 var(--t-xs)/1 var(--mono); font-style:normal; letter-spacing:.12em; color:var(--accent); }
.etape b{ font-weight:500; font-size:var(--t-sm); }
.etape span{ font-size:var(--t-sm); color:var(--muted); }
@media (max-width:640px){
.etape{ grid-template-columns:2.6rem 1fr; row-gap:.2rem; }
.etape span{ grid-column:2; }
}
@media (max-width:760px){
.carte__labels,.cpin,.clead,.carte__scale,.carte__nord{ display:none; }
}
.carte--compact .cmk small{ display:none; }
@media (prefers-reduced-motion:reduce){
.carte__route{ stroke-dashoffset:0!important; }
.cpt,.cmk,.cpin,.clead{ opacity:1!important; transform:none!important; translate:none!important; }
.clead{ opacity:.4!important; }
}
.cmk--top{ transform:translate(-50%,calc(-100% - 16px)); }
.cpin figcaption{ line-height:1.5; }
/* --- carte : le bac se distingue du vélo ---------------------------------- */
.carte__ferry{
stroke:var(--papier); stroke-width:4;
stroke-dasharray:0.1 10; stroke-linecap:round;
opacity:.9;
}
.carte__boat circle{ fill:var(--bg); stroke:none; }
.carte__boat path{ fill:var(--papier); stroke:none; }
.carte__boat{ opacity:0; transition:opacity .6s var(--ease) .25s; }
.carte.is-in .carte__boat{ opacity:.9; }
.carte__depart path{ fill:none; stroke:var(--papier); stroke-width:2.4; vector-effect:non-scaling-stroke; }
.carte__depart{ opacity:0; transition:opacity .5s var(--ease) .1s; }
.carte.is-in .carte__depart{ opacity:.9; }
.cmk--brest span{ color:var(--fg); }
.carte__leg{
display:flex; flex-wrap:wrap; gap:.6rem 2rem;
margin-top:1.2rem; color:var(--muted);
}
.lg{ display:flex; align-items:center; gap:.7em; }
.lg::before{ content:""; width:2.4em; height:0; flex:none; }
.lg--velo::before{ border-top:3px solid var(--ajonc); border-radius:2px; }
.lg--bac::before{
border-top:3px dotted var(--papier);
opacity:.85;
}
[data-theme="ocean"] .lg--bac::before,[data-theme="dark"] .lg--bac::before{ border-top-color:var(--papier); }
:root .lg--bac::before{ border-top-color:var(--granit); }
[data-theme="ocean"] .lg--bac::before{ border-top-color:var(--papier); }
[data-theme="dark"] .lg--bac::before{ border-top-color:var(--papier); }
.etape{ grid-template-columns:3rem 1fr; }
.cpt--anon .cpt__dot{ fill:var(--ajonc); stroke:var(--granit); stroke-width:1.2; }
/* ------------------------------- 41. Barre de navigation sur fond sombre
La barre est transparente en haut de page et flotte au-dessus de sections
dont le fond change. `nav--clair` est posée par le script quand une section
sombre ou océan passe derrière : sans elle, l'encre granit devient illisible.
---------------------------------------------------------------------- */
.nav--clair{ color:var(--papier); }
.nav--clair .brand small{ color:rgba(239,234,224,.6); }
.nav--clair.is-solid{
background:color-mix(in srgb, #14150F 86%, transparent);
box-shadow:0 1px 0 rgba(239,234,224,.16);
}
.nav--clair .nav__link[aria-current="page"]{ color:var(--ajonc); }
.nav--clair .btn{ --btn-fg:var(--granit); --btn-bg:var(--papier); }
.nav--clair .btn::before{ background:var(--ajonc); }
.nav--clair .btn:hover{ color:var(--granit); }
/* ================================================ 42. Marque
Le logo Ribine est le logo d'origine, vectorisé depuis leur fichier. Il est
posé en masque plutôt qu'en image : le remplissage vaut `currentColor`, donc
la marque suit l'encre de la section — granit sur papier, crème sur sombre —
et les courbes de niveau qui courent dans les lettres laissent voir le fond.
Deux versions : pleine pour les petites tailles (les filets se refermeraient),
à filets dès qu'il y a la place.
====================================================================== */
:root{
/* Silhouette inlinée : un masque CSS pointant un fichier externe ne se charge
pas en file://, et le site doit rester lisible ouvert depuis le dossier.
Régénérée par logo/make_logo.py. */
--logo-plein:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNjAwIDgxMCIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsPSJSaWJpbmUiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLDgxMC4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1ydWxlPSJldmVub2RkIj4KPHBhdGggZD0iTTgyMTAgNzkxNCBjLTE1NCAtNDEgLTI3NyAtMTM5IC0zNTkgLTI4NSAtMzcgLTY2IC03MCAtMTYwIC03NiAtMjEyCi0yIC0yMSAtMTAgLTU1IC0xNyAtNzUgLTExIC0zMCAtMTMgLTYxOCAtMTMgLTMyMjIgMCAtMzA2NiAxIC0zMTg4IDE5IC0zMjY1CjEwIC00NCAyNSAtODcgMzIgLTk2IDggLTkgMTYgLTMxIDE5IC00OSAxMSAtOTAgMTY1IC0yNTggMjg5IC0zMTUgMTAxIC00NwoxNzEgLTU4IDMyOCAtNTMgOTggNCAxNDEgOSAxNjMgMjEgMTcgOSAzOCAxNyA0OSAxNyAzOSAwIDE0MyA2NyAyMTcgMTQwIDkxCjkwIDE1NyAyMTUgMTg0IDM0NSA4IDQ0IDIwIDEwMyAyNiAxMzEgMTcgODcgNzMgMTEyIDEyOSA1OSAxNiAtMTUgMzkgLTMzIDUyCi0zOSAxMyAtNiAyOSAtMjMgMzYgLTM4IDM1IC03NCAzMzEgLTMxNyA0NjIgLTM3OSA2OCAtMzMgNzcgLTM3IDEyNSAtNjkgMTQzCi05NSA2NzMgLTIxNSA3ODIgLTE3NiAzNSAxMiA0NCAxMiA2OCAwIDM3IC0xOSAyMzkgLTE5IDM5MiAxIDI0NiAzMiA0OTcgMTA5CjU2NSAxNzIgMTggMTcgNDAgMjYgNjYgMjggNzEgNCAyNzcgMTMzIDQ1NyAyODcgMjU4IDIyMSA0ODIgNTMzIDU5OSA4MzggMjAKNTEgNDUgMTA3IDU1IDEyNCA0NiA3NCAxNjggNDk2IDE1NyA1NDAgLTMgMTIgMSAzNCA5IDUwIDE0IDI3IDU0IDI3MCA1NCAzMzEKMCAxNyA0IDc3IDEwIDEzNSAxNyAxNzcgNSA3MjMgLTE5IDg1NSAtNiAzMyAtMTMgODAgLTE1IDEwNSAtNyA3MSAtNTEgMjgxCi04NiA0MDMgLTg4IDMxNiAtMjQ2IDYzNiAtNDMyIDg3NyAtMTUyIDE5OCAtNDk3IDQ5MCAtNjE2IDUyMiAtMjAgNiAtNDUgMTgKLTU2IDI5IC01NCA0OSAtMzE5IDE0OCAtNTA1IDE4OCAtMzEzIDY3IC03MzIgNzEgLTEwNTUgMTAgLTI2OSAtNTAgLTU4MSAtMTkwCi03NzEgLTM0NiAtMzAgLTIzIC01NyAtNDMgLTYwIC00MyAtOSAwIC03NiAtNTQgLTE5NyAtMTU5IC0xMzAgLTExMiAtMTY4Ci0xMjAgLTE5OSAtNDEgLTYgMTYgLTEwIDM5MCAtOSAxMDI0IDAgOTU3IC0xIDEwMDAgLTE5IDEwMzMgLTEzIDI1IC0xNiA0MgotMTAgNTggOSAyNCAtNyAxMDIgLTM2IDE3MCAtMzkgOTQgLTMzOSAzNTIgLTQzNSAzNzQgLTY3IDE2IC0yOTQgMTIgLTM1OSAtNXoKbTI1MjQgLTMxOTIgYzM0NSAtOTUgNjIwIC0zODYgNzYwIC04MDQgMTEwIC0zMjggMTQ0IC04MzkgODEgLTEyMjMgLTggLTQ5Ci0xNiAtMTA2IC0xOSAtMTI1IC02IC00NCAtNTggLTIyMCAtODUgLTI4OCAtMTM4IC0zNDkgLTQyMiAtNjMwIC03MzggLTcyOQotMTM5IC00MyAtNDY4IC00MSAtNjIzIDUgLTM3MiAxMTAgLTY0NiAzODQgLTc4NyA3ODcgLTI5IDgyIC03MyAyNzkgLTc5IDM1MAotMyAyOCAtOSA3MCAtMTMgOTUgLTUgMjUgLTkgNTQgLTkgNjUgMCAxMSAtMSAxMDMgLTIgMjA1IC0xIDIwNCA0IDMwNSAxOSAzOTUKNSAzMyAxMiA3OCAxNCAxMDAgOCA3NiA2OCAyOTEgMTE0IDQwNSA2MyAxNTUgMTYxIDMxOCAyNTYgNDI0IDEyNCAxMzkgMzA4CjI2MSA0NzUgMzE1IDUyIDE3IDEwMSAzNSAxMDkgNDAgOSA1IDExMyA4IDIzMiA3IDE4NyAtMiAyMjcgLTUgMjk1IC0yNHoKTTY1NDQgNzg1MSBjLTIxMyAtNTcgLTM5NCAtMjE2IC00NzIgLTQxMSAtNjggLTE3MCAtNTMgLTQyNyAzNCAtNjAyIDQ0IC04NwoxNzggLTIyMSAyMzUgLTIzMyAxNSAtMyAzNSAtMTUgNDUgLTI2IDYxIC02NyAzNzcgLTEwMyA1NDMgLTYwIDEwNiAyNiAxOTggNzIKMjQ3IDEyMiAyMSAyMSA0NCAzOSA1MCAzOSAxOSAwIDk0IDkwIDExNCAxMzYgMTAgMjMgMjMgNDUgMjggNDggNDEgMjUgODQgMzA3CjYyIDQwMyAtNyAzMiAtMTIgNjkgLTExIDgzIDEgMTQgLTcgNTUgLTE4IDkxIC01NCAxNzIgLTIxNiAzMjYgLTQxNiAzOTUgLTEwOQozOCAtMzI5IDQ1IC00NDEgMTV6IE0xMzk1NSA3ODYzIGMtMTg2IC00NiAtMjk3IC0xMTIgLTQxMSAtMjQzIC0xMTEgLTEyOAotMTU0IC0yNDkgLTE1NCAtNDQwIDAgLTMyMCAxNjMgLTU1MiA0NTUgLTY0NyA3MyAtMjMgOTYgLTI2IDI1MCAtMjcgMTY3IC0xCjE3MSAtMSAyNTggMzEgMjE0IDc4IDM2OCAyNDIgNDI0IDQ1MyA0MCAxNTMgMTQgNDE2IC01NCA1NDMgLTgxIDE1MCAtMjkzIDMwMAotNDU3IDMyNCAtNTUgOCAtMjg2IDEzIC0zMTEgNnogTTMzNTAgNTkxOSBjLTkxIC00IC0yMjYgLTE1IC0zMDAgLTIzIC03NCAtOQotMTc4IC0yMSAtMjMwIC0yNiAtMzM2IC0zNSAtNDQyIC01MiAtODEwIC0xMzYgLTM3OSAtODYgLTc1NiAtMjQ4IC05ODggLTQyMwotNDEgLTMxIC05MCAtNjkgLTExMCAtODQgLTcyIC01NCAtMjU4IC0yMjggLTMwMCAtMjgwIC0xNTAgLTE4MSAtMjQyIC0zMTQKLTI2NyAtMzgyIC0xMCAtMjcgLTI5IC03NSAtNDMgLTEwNSAtNDEgLTkzIC01MSAtMTgyIC01MiAtNDY1IDAgLTIwMCA0IC0yNzcKMTYgLTMzNSA5IC00MSAxOSAtMTUxIDI0IC0yNDUgNSAtOTMgMTggLTIyNCAyOSAtMjkwIDE5IC0xMTAgMzMgLTE4MSAxMDcKLTUzMCA1MSAtMjQwIDU2IC0yNjEgNzQgLTMxNSAxMCAtMzAgMzAgLTEwNyA0NCAtMTcwIDE1IC02MyAzNiAtMTQ2IDQ2IC0xODUKMTEgLTM4IDM4IC0xNDAgNjEgLTIyNSAxMDkgLTQxNSAxOTEgLTY4NCAyMTUgLTcxMSAxMSAtMTIgMTggLTM0IDE3IC01NiAtMQotNDEgODcgLTI3NiAxNDMgLTM4MyA0NCAtODMgMTIxIC0xNzIgMTgyIC0yMDggbDQ3IC0yNyAxMzI0IC0zIGMxMTQwIC0yIDEzMjYKMCAxMzQwIDEyIDI4IDI1IDY4IDI5IDE0MyAxMiAxNDQgLTMwIDE4OCAtMjMgMTg4IDM0IDAgMzIgLTcgNDUgLTQ2IDgzIC01Mgo0OSAtNjAgODUgLTI2IDExOSAzNCAzNCA2MiAyNSAxNTAgLTQ1IDExOSAtOTcgMjIwIC0xNjYgMjc5IC0xOTMgbDUyIC0yMyA2MDQKLTEgYzUxNyAwIDYwNiAyIDYxNiAxNCAyMCAyNCA2MyAyOCAxMTYgMTAgNjcgLTIyIDUyNCAtMzIgNjcwIC0xNSAxNTYgMTggMzA1CjQ4IDMyMyA2NCA5IDkgMzEgMTkgNDcgMjMgMTQ5IDM2IDM0NCAyOTMgMzcwIDQ4NSAzIDE5IDEwIDUwIDE3IDY5IDkgMjcgMTMKNTA0IDE1IDIxMDUgMyAyMDE4IDAgMjI0NCAtMjcgMjI5NSAtNSAxMCAtMTIgMzEgLTE1IDQ5IC0xNiA5NCAtODEgMjA0IC0xNzcKMzAxIC0xNDEgMTQyIC0zMTUgMjA1IC00NjggMTY5IC02NiAtMTUgLTk4IC0xNCAtMTE5IDUgLTE2IDE0IC0yNiAxNSAtNjcgNgotNzUgLTE2IC0xNDQgLTQzIC0xNDQgLTU1IDAgLTE4IC0yOSAtNDAgLTEwNSAtODAgLTEyMyAtNjMgLTIwNCAtMTgwIC0yNTEKLTM2MyAtMjUgLTkyIC0yOCAtMTMzIC0yNyAtMzM0IDAgLTIxIDAgLTEwNyAwIC0xOTAgLTEgLTg0IDAgLTE2MiAwIC0xNzMgNAotNjkgLTcgLTI4MDYgLTEyIC0yODMxIC0xMSAtNjMgLTY4IC04NSAtMTIyIC00NiAtMTcgMTIgLTcyIDQzIC0xMjQgNzAgLTI3MwoxNDIgLTMzMSAxNzQgLTQwOCAyMjEgLTQ2IDI4IC05MCA1MSAtOTcgNTEgLTcgMCAtMzAgMTUgLTUyIDMzIC0xMDMgODMgLTM2OAoyNzYgLTM5MiAyODUgLTggMyAtMzYgMjYgLTYxIDUxIC0yNSAyNSAtODQgNzggLTEzMiAxMTggLTc1IDY0IC05MCA4MiAtMTI1CjE1MyBsLTQwIDgxIDMgMTEyIGMyIDg2IDkgMTMzIDMwIDIwMiAxNCA1MCAyOCAxMTEgMjkgMTM3IDIgNDcgMzQgOTggNjEgOTggNgowIDI2IDIzIDQ1IDUxIDE4IDI4IDU5IDg3IDkyIDEzMSAzMyA0NCA2NyA5MyA3NiAxMDggMTggMjkgMTYzIDIwNSAyNDggMzAyCjI4IDMxIDY2IDc4IDg1IDEwMyAxOSAyNiA0NiA2MSA2MCA3OCA1MiA2MyAyMTkgMjg3IDIxOSAyOTMgMCAzIDE4IDI2IDQwIDUxCjIxIDI1IDQ5IDY0IDYwIDg4IDEyIDI0IDI4IDQ5IDM3IDU3IDE4IDE0IDczIDEyNSA3MyAxNDYgMCA3IDEzIDQxIDI5IDc1IDU3CjEyMSA0NiAzMDMgLTI1IDQyNCAtMjkgNTAgLTE5MSAyMjMgLTIwOCAyMjMgLTcgMCAtMjUgMTQgLTQyIDMxIC00MiA0NCAtMTM0Cjk3IC0yMDYgMTE5IC0zNSAxMCAtMTE0IDM1IC0xNzcgNTQgLTYzIDIwIC0xMzIgMzggLTE1NCA0MSAtMjIgMyAtNDYgMTAgLTUzCjE2IC0yMyAxOSAtMzc4IDY5IC02NjQgOTQgLTE3NCAxNSAtNTAxIDE3IC03ODAgNHogbTU3MiAtOTQzIGMxNDkgLTI2IDIzMAotNzkgMjcyIC0xODEgMzIgLTc3IC0xMSAtMjA1IC0xMjkgLTM4NiAtNDYgLTcwIC05MSAtMTQxIC0xMDAgLTE1OSAtMjYgLTUwCi0xMTAgLTE2NiAtMTg5IC0yNjAgLTM5IC00NyAtODMgLTEwMyAtOTkgLTEyNiAtMTUgLTIyIC04MSAtMTA1IC0xNDggLTE4NQotNjYgLTc5IC0xMjYgLTE1NSAtMTMyIC0xNjkgLTYgLTE0IC0xNyAtMjkgLTI0IC0zMyAtMTYgLTEwIC0xMzcgLTE4NCAtMTU1Ci0yMjEgLTcgLTE2IC0yNCAtNDEgLTM4IC01NiAtNzAgLTc0IC0zMjQgLTU0MiAtMzU2IC02NTcgLTUxIC0xODAgLTUxIC0xODQKLTQ5IC0zNDMgMyAtMTQxIDYgLTE2MyAzMyAtMjQ4IGwzMCAtOTIgLTM3IDMwIGMtMjAgMTcgLTQwIDM0IC00NCAzOCAtNCA0Ci0xOCAyNiAtMzAgNDkgLTEyIDIzIC01OSA5NSAtMTA0IDE2MCAtNDYgNjUgLTEyNSAxODMgLTE3NyAyNjMgLTEwMiAxNTYgLTE0MQoyMTEgLTI0MCAzMzUgLTUyIDY2IC02MiA4NCAtNTUgMTAyIDYgMTYgLTIgNDIgLTMyIDEwNSAtNzQgMTUyIC0yMzIgNjAyIC0yNTMKNzIyIC00IDIxIC0xOCA0OCAtMzIgNjEgLTUxIDQ4IC00MSAzNTcgMjEgNTk0IDE5IDc0IDM1IDEzNiAzNSAxMzcgMCAxIDExIDQKMjMgOCAxNCAzIDQ3IDM2IDc4IDc3IDMwIDM5IDU5IDc3IDY0IDgzIDE4IDIyIDIxNyAxNjcgMjU4IDE4OCAyMiAxMSA4MyAzNgoxMzYgNTUgNTMgMTkgMTA0IDQxIDExMyA1MCAxMCA5IDI4IDEzIDQzIDExIDE0IC0zIDk4IDUgMTg3IDE4IDkwIDEzIDIzNSAyOAozMjMgMzUgODggNiAxNjIgMTMgMTY1IDE2IDExIDEyIDU1OCAtNiA2NDIgLTIxeiBNMjI4NjUgNTkwMyBjLTExMiAtMTAgLTMzMQotNDUgLTM0MiAtNTUgLTggLTYgLTI4IC0xMCAtNDYgLTEwIC03MCAzIC0zNzYgLTk1IC01NzIgLTE4MyAtODQgLTM3IC0yNDEKLTEyNyAtMjk0IC0xNjcgLTI0IC0xOCAtNTYgLTQwIC03MiAtNDggLTIxMiAtMTE0IC02NjAgLTYzOCAtNjkwIC04MDkgLTYgLTI5Ci0xOCAtNTQgLTMzIC02NyAtNjIgLTU1IC0xODUgLTM5MCAtMjQ0IC02NjQgLTYwIC0yNzkgLTEwOCAtODczIC03MSAtODk1IDIyCi0xNCAyNyAtNTAgMTIgLTg1IC0xNiAtMzkgLTEzIC0xMTkgMTMgLTMxNSA4NiAtNjQ3IDMzMyAtMTE2MyA3NTIgLTE1NjYgMTEzCi0xMDkgMjczIC0yMzkgMjk1IC0yMzkgNSAwIDI0IC0xMyA0MiAtMjkgMTIxIC0xMDYgNDg2IC0yNjQgNzc2IC0zMzUgNDQxCi0xMDkgMTA2MCAtMTI5IDE1MjIgLTUxIDczNCAxMjUgMTM5NCA1NTkgMTYzNyAxMDc4IDIwMyA0MzQgMjAgNzg3IC00MDkgNzg3Ci0xOTUgMCAtMjQ3IC0yNSAtNDYzIC0yMjYgLTUzOSAtNTAxIC04MDAgLTY1OSAtMTE4MyAtNzE5IC0xNjEgLTI1IC00MjQgLTE3Ci01NTUgMTggLTM4NiAxMDEgLTY0NSAzMTUgLTgyOSA2ODMgLTExMiAyMjYgLTIwMiA2MjMgLTE1OSA3MDQgMjcgNTEgLTI3IDQ5CjE0NjMgNTMgMTQ4MSA1IDE0NzIgNCAxNjkzIDUxIDI1MSA1NCA0MzggMTY2IDUwMCAyOTkgMTIgMjYgMzEgNjYgNDIgODkgNDYKMTAwIDU1IDE2OSA1NCA0MTggMCAyNTYgLTkgMzMxIC02NCA1NDMgLTgyIDMyMCAtMjUwIDY1MSAtNDUyIDg5MiAtODcgMTA0Ci0yNDAgMjU1IC0yNTggMjU1IC03IDAgLTM2IDI0IC02NCA1MyAtMTIyIDEyNiAtNDc5IDMyNiAtNzM2IDQxMCAtMTk0IDY0Ci00ODggMTI0IC02MjUgMTI4IC0xNDMgMyAtNjA4IDUgLTY0MCAyeiBtNTg5IC0xMTA2IGMzOTEgLTEwMyA2NjAgLTQxMCA3NjAKLTg2NyAxNyAtODEgNDYgLTI2MyA0MiAtMjY4IC0zIC0yIC02ODMgLTMgLTE4MzAgLTIgbC0zOTggMCA3IDU4IGMxMSA5MCA3MgozMjAgMTEwIDQxNyAxMjQgMzE3IDM3OSA1NzIgNjUwIDY1MCAxODQgNTQgNDc4IDU5IDY1OSAxMnogTTEzOTM1IDU4OTMgYy0xNTYKLTM4IC0yMjkgLTc3IC0zMzEgLTE3OSAtOTUgLTk0IC0xNDkgLTE5MSAtMTg2IC0zMzkgbC0yMyAtOTAgMSAtMTY3MCBjMCAtOTE4CjEgLTE2NzkgMSAtMTY5MCAwIC0xMSAtMSAtMTg2IC00IC0zOTAgLTMgLTI0NiAtMSAtMzgyIDcgLTQwNyA3IC0yNCA3IC00NSAxCi02MiAtMjUgLTY1IDQ3IC0zMjUgMTIyIC00MzggODMgLTEyNCAyNDUgLTI0NSAzNDAgLTI1MiAyNSAtMiA1NSAtMTEgNjggLTIwCjI4IC0xOSAyNzcgLTI0IDI5NiAtNSA2IDYgMzEgMTIgNTYgMTQgMTI1IDggMzI5IDE2OCA0MDkgMzIwIDUwIDk2IDg0IDIxOSA5NwozNTAgMTkgMTk0IDE0IDMyNjAgLTUgMzMyNCAtMTQgNDcgLTEzIDU1IDAgODMgMjMgNDUgMjMgNTU1IDEgNjE4IC0xMyAzNyAtMTMKNDcgLTEgNzEgMzQgNjcgLTI0IDMyNSAtMTAyIDQ1MyAtNTAgODQgLTE2MiAxOTQgLTE5NyAxOTQgLTE3IDAgLTQwIDEzIC02NAozNiAtNjAgNTggLTEzNSA3NyAtMzE2IDgxIC04MiAyIC0xNTkgMSAtMTcwIC0yeiBNMTU2OTIgNTg3OSBjLTczIC0xOCAtMTI2Ci00MSAtMTM3IC01OSAtNCAtNiAtMjEgLTE2IC0zOCAtMjQgLTg3IC0zNiAtMjI2IC0yNDEgLTIzMyAtMzQ0IC0yIC0yNCAtOAotNTAgLTEzIC01NiAtMjMgLTI3IC0zMiAtMTU5IC0yNyAtMzc3IDMgLTEyMyA0IC0yMzcgNCAtMjU0IC0xIC0zMiAtMiAtNTkyCi0xIC02MzUgMCAtMTQgLTEgLTcxMyAtMyAtMTU1NSAtNCAtMTYyNSAtNCAtMTYxNSA0MiAtMTc2MCA3NCAtMjI4IDI1NiAtNDA2CjQ3MSAtNDYwIDgyIC0yMSAzMjIgLTE1IDQwMyAxMCAxMDQgMzIgMjYwIDEyOCAyNjAgMTYwIDAgNyAyMCAyOSA0MyA0OCAxMjQKMTAyIDE5NiAzODYgMTgzIDcyMiAtMyA3NyAtNSAxNTEgLTQgMTY1IDAgMTQgMiAzODUgMyA4MjUgNCAxMDM4IDEyIDEyNjUgNTYKMTUyMCA0MiAyNTIgMTUwIDQ3MSAzMjAgNjUwIDM4IDQwIDY5IDc3IDY5IDgyIDAgMTYgNDMgNTAgNzkgNjIgMTkgNiA1NSAyNAo4MCA0MCA5MiA1OCAyNzEgMTQzIDI4OSAxMzkgMTEgLTMgNTAgMSA4OCA4IDM4IDcgMTI4IDEzIDE5OSAxNCA0ODQgMSA3MjIKLTE4NiA4MzAgLTY1MCA5IC00MSAyMyAtOTAgMzEgLTEwOCA4IC0xOCAxMyAtMzYgMTAgLTQxIC00IC01IDEgLTY5IDkgLTE0MgoxNSAtMTIxIDM4IC01NjkgMzMgLTYyOSAtMiAtMjQgLTMgLTk0NSAtMSAtOTg1IDAgLTExIC0xIC0yODEgLTQgLTYwMCAtMwotNDkwIC0xIC01OTUgMTIgLTY3OSAxNyAtMTEyIDU1IC0yMjkgODUgLTI2NiAxMSAtMTQgMjkgLTQzIDM5IC02NSA0NiAtMTAwCjE5OCAtMjIyIDMzMiAtMjY2IDExMCAtMzYgMzU5IC0zNiA0NjggMCAxODcgNjIgMzQwIDIyMCA0MTEgNDI2IDQ2IDEzNCA1MQoyMTYgNDcgNzY1IC0zIDI4MyAtNSA1MjIgLTUgNTMwIDEwIDEyMjAgNyAxODU3IC04IDE4ODkgLTE0IDI5IC0xNSA0MiAtNSA4NAoyOSAxMjggLTEyIDQ2NiAtODQgNjgyIC00MCAxMjIgLTEwMSAyNTUgLTE0OSAzMjggLTIwIDMwIC0zNiA1NyAtMzYgNjEgMCA0MgotMzA2IDM4NiAtMzQzIDM4NiAtNyAwIC0yNCAxMSAtMzcgMjUgLTM1IDM3IC0xNjkgMTIxIC0yNTggMTYyIC00MiAxOSAtODggNDEKLTEwMiA0OCAtNDYgMjQgLTI0MiA4NiAtMjg3IDkwIC0yNSAzIC01MCA4IC01NiAxMiAtNTIgMzIgLTU5MyA1NyAtNzI3IDMzCi0zNiAtNiAtODggLTEzIC0xMTcgLTE1IC02MiAtNCAtMjYxIC01MSAtMjc4IC02NSAtNiAtNSAtMjcgLTEyIC00NiAtMTQgLTQ3Ci02IC0xOTcgLTY4IC0yOTkgLTEyMyAtMTc1IC05NCAtMzIyIC0yMDYgLTQ5NyAtMzc2IC0xMzcgLTEzMyAtMTYxIC0xNDggLTE5OQotMTE2IC0yMiAxOCAtMzAgNDIgLTQ4IDE0OSAtNDkgMjg0IC0yMzQgNDk4IC00NzkgNTU1IC04NyAyMCAtMjg1IDE3IC0zNzUgLTZ6Ii8+CjwvZz48L3N2Zz4=");
}
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand__mark{
display:block; width:118px; height:37px;
background:currentColor;
-webkit-mask:var(--logo-plein) left center/contain no-repeat;
mask:var(--logo-plein) left center/contain no-repeat;
}
.brand small{ transform:none; }
.pre__logo{ display:block; width:min(58vw,520px); height:auto; }
.foot__word{
display:block; width:min(54%,520px); height:auto;
margin-block:clamp(2.5rem,1rem + 5vw,5rem) 0;
}
/* Voile sous la barre en mode clair : au-dessus d'une section sombre il ne se
voit pas, mais il garantit que le texte reste lisible quoi qu'il arrive. */
.nav--clair:not(.is-solid){
background-image:linear-gradient(to bottom, rgba(20,21,15,.42), rgba(20,21,15,0));
}
/* ================================================= 43. Fenêtres légales
Des