

@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;src:url(space-mono-regular.woff2) format("woff2")}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:700;font-display:swap;src:url(space-mono-bold.woff2) format("woff2")}
@font-face{font-family:"WTTM Neue";font-style:normal;font-weight:400;font-display:swap;src:local("Helvetica Neue"),local("HelveticaNeue"),local("Helvetica")}
@font-face{font-family:"WTTM Neue";font-style:normal;font-weight:700;font-display:swap;src:local("Helvetica Neue Bold"),local("HelveticaNeue-Bold"),local("Helvetica Bold")}


:root{color-scheme:light;
  --p-ink:#000;--p-mut:#5C5C5C;--p-sep:rgba(0,0,0,.14);--p-glass:rgba(255,255,255,.66);--p-bord:rgba(255,255,255,.7);
  --p-field:rgba(255,255,255,.78);--p-btn:#000;--p-btn-t:#fff;--p-bg:#F4F4F4;--p-fusion:multiply;--p-seg:rgba(0,0,0,.06);--p-on:#fff;
  --p-fond:.9;--p-voile:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,.12));
  --p-alerte:#A3001B;
  
  --hs:#FF7205;--hw:#FFB27A;--ho:#FF8A3D;--ha:.5;--hf:70px}
@media (prefers-color-scheme:dark){
  :root:not(.face-clair){color-scheme:dark;
    --p-ink:#fff;--p-mut:#A8A8A8;--p-sep:rgba(255,255,255,.16);--p-glass:rgba(16,16,16,.58);--p-bord:rgba(255,255,255,.12);
    --p-field:rgba(0,0,0,.42);--p-btn:#fff;--p-btn-t:#000;--p-bg:#060606;--p-fusion:screen;--p-seg:rgba(255,255,255,.08);--p-on:rgba(255,255,255,.16);
    --p-fond:.55;--p-voile:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.15));
    --p-alerte:#FFB4A8;
    --ho:#E85F00;--ha:.42}
}
:root.face-sombre{color-scheme:dark;
  --p-ink:#fff;--p-mut:#A8A8A8;--p-sep:rgba(255,255,255,.16);--p-glass:rgba(16,16,16,.58);--p-bord:rgba(255,255,255,.12);
  --p-field:rgba(0,0,0,.42);--p-btn:#fff;--p-btn-t:#000;--p-bg:#060606;--p-fusion:screen;--p-seg:rgba(255,255,255,.08);--p-on:rgba(255,255,255,.16);
  --p-fond:.55;--p-voile:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.15));
  --p-alerte:#FFB4A8;
  --ho:#E85F00;--ha:.42}

*{box-sizing:border-box}
html,body{margin:0;background:var(--p-bg);color:var(--p-ink)}
body{font:14px/22px "Space Mono",ui-monospace,Menlo,monospace;-webkit-font-smoothing:antialiased}


.pt{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--p-bg)}
.fond{position:fixed;inset:0;background-size:cover;background-position:center;filter:grayscale(1);opacity:var(--p-fond)}
.fond-02{background-image:url(fonds/about-us-02.jpg)}
.fond-04{background-image:url(fonds/about-us-04.jpg)}
.fond-10{background-image:url(fonds/about-us-10.jpg)}
.voile{position:fixed;inset:0;background:var(--p-voile)}


.halo{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:1;container-type:size;
  -webkit-mask-image:linear-gradient(to bottom,transparent 50%,#000 62%);mask-image:linear-gradient(to bottom,transparent 50%,#000 62%);
  --b-s:-52cqmin;--b-w:-56cqmin;--b-o:-44cqmin}
.halo i{position:absolute;display:block;opacity:var(--ha);will-change:transform}
.halo i::before{content:"";position:absolute;inset:calc(-2 * var(--hf));border-radius:50%;
  background:radial-gradient(closest-side,var(--c) calc(100% - 4 * var(--hf)),color-mix(in srgb,var(--c) 84%,transparent) calc(100% - 3 * var(--hf)),color-mix(in srgb,var(--c) 50%,transparent) calc(100% - 2 * var(--hf)),color-mix(in srgb,var(--c) 16%,transparent) calc(100% - var(--hf)),transparent)}
.halo .s{left:50%;bottom:var(--b-s);width:70cqmin;height:70cqmin;margin-left:-35cqmin;--c:var(--hs);animation:halo-s 5s ease-in-out infinite alternate}
.halo .w{left:50%;bottom:var(--b-w);width:110cqw;height:70cqmin;margin-left:-55cqw;--c:var(--hw);animation:halo-w 6s ease-in-out infinite alternate}
.halo .o{bottom:var(--b-o);width:56cqmin;height:56cqmin;--c:var(--ho);animation:halo-o 7s ease-in-out infinite alternate}
.halo .o.g{left:-16cqw}.halo .o.d{right:-16cqw}
@keyframes halo-s{to{transform:translateY(-12cqh) scale(1.2)}}
@keyframes halo-w{to{transform:translateY(-8cqh) scale(1.12)}}
@keyframes halo-o{to{transform:translateY(-14cqh) scale(1.15)}}

@media (prefers-reduced-motion:reduce){.halo i[class]{animation:none}}


.carte{position:relative;width:400px;max-width:calc(100% - 40px);margin:48px 0 48px 64px;padding:32px;border-radius:22px;
  border:.5px solid transparent}
.carte::before{content:"";position:absolute;inset:-.5px;z-index:2;border-radius:inherit;pointer-events:none;
  background:var(--p-glass);-webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);
  border:.5px solid var(--p-bord);box-shadow:0 2px 6px rgba(0,0,0,.08),0 24px 64px rgba(0,0,0,.28)}
.carte>*{position:relative;z-index:3}
@media (max-resolution:1.5dppx){.carte::before{inset:-1px}}

.nuee{position:relative;display:block;width:58px;height:58px;contain:layout paint;mix-blend-mode:var(--p-fusion)}
.nuee picture{display:contents}
.nf-img,.nf-vid{position:absolute;inset:0;width:100%;height:100%;display:block;margin:0}
.nf-vid{opacity:0;object-fit:contain;pointer-events:none}
.nuee.nf-joue .nf-vid{opacity:1}
.nuee.nf-joue .nf-img{visibility:hidden}
@media (prefers-reduced-motion:reduce){.nf-vid{display:none}}
.carte h1{font:700 20px/1.2 "Space Mono",ui-monospace,monospace;margin:18px 0 18px;letter-spacing:-.01em}
.carte form{margin:0}
.lb{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--p-mut);margin:14px 0 6px}
.carte input[type=email],.carte input.code{display:block;width:100%;height:48px;border-radius:12px;background:var(--p-field);
  border:1px solid var(--p-sep);color:var(--p-ink);font:16px/1 "Space Mono",ui-monospace,monospace;padding:0 14px;margin:0;
  -webkit-appearance:none;appearance:none}
.carte input::placeholder{color:var(--p-mut);opacity:1}

.carte input.code{height:56px;font:700 24px/1 "Space Mono",ui-monospace,monospace;letter-spacing:.5em;text-align:center;padding:0 0 0 .5em}
.carte input:focus-visible{outline:2px solid #FF7205;outline-offset:2px}
.bt{display:flex;align-items:center;justify-content:center;width:100%;height:48px;margin:18px 0 0;border:0;border-radius:99px;
  background:var(--p-btn);color:var(--p-btn-t);font:700 13px/1 "Space Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.bt:focus-visible{outline:2px solid #FF7205;outline-offset:3px}
.note,.envoye,.msg{font-family:"WTTM Neue",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif}
.note{font-size:12.5px;line-height:1.5;color:var(--p-mut);margin:14px 0 0}
.note.seule{font-size:15px;color:var(--p-ink);margin:0}
.envoye{font-size:14px;line-height:1.5;margin:0}
.msg{font-size:13px;line-height:1.45;color:var(--p-alerte);margin:10px 0 0}
.liens2{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;color:var(--p-mut);margin-top:6px;flex-wrap:wrap}
.liens2 a,.liens2 .lien,.pd a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none}
.liens2 .lien{all:unset;display:inline-flex;align-items:center;min-height:44px;cursor:pointer;font:inherit;color:inherit}
.liens2 a:hover,.liens2 .lien:hover,.pd a:hover{color:var(--p-ink);text-decoration:underline}
.liens2 .lien:focus-visible,.liens2 a:focus-visible,.pd a:focus-visible{outline:2px solid #FF7205;outline-offset:2px}


.pd{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:20px;padding-top:6px;border-top:1px solid var(--p-sep);
  font-size:12.5px;color:var(--p-mut);flex-wrap:wrap}
.pseg{display:inline-flex;background:var(--p-seg);border-radius:12px;padding:3px;gap:2px;margin:0}
.pseg button{all:unset;cursor:pointer;width:34px;height:28px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;color:var(--p-mut)}
.pseg button[aria-pressed="true"]{background:var(--p-on);color:var(--p-ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.pseg button:focus-visible{outline:2px solid #FF7205;outline-offset:1px}
.pseg svg{width:16px;height:16px;fill:currentColor}


.carte.aide{width:480px}
.ai-k{margin:16px 0 0}
.carte.aide .ai-k,.carte.aide .pd{font-size:15px}
.carte.aide h1{margin:6px 0 12px}
.ai-chapo,.ai-b p{font-family:"WTTM Neue",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:15px;line-height:1.5;margin:0}
.ai-chapo{color:var(--p-ink)}
.ai-b{border-top:1px solid var(--p-sep);margin-top:16px;padding-top:14px}
.ai-b h2{display:flex;align-items:baseline;gap:12px;font:700 15px/22px "Space Mono",ui-monospace,monospace;margin:0 0 6px}
.ai-n{font-size:15px;font-weight:400;letter-spacing:.06em;color:var(--p-mut)}
.ai-b p{color:var(--p-ink)}
.ai-b p+p{margin-top:2px}

.ai-b p.ai-l{display:flex;flex-wrap:wrap;column-gap:20px;font:15px/22px "Space Mono",ui-monospace,monospace}
.ai-l a{display:inline-flex;align-items:center;min-height:44px;color:var(--p-ink);text-decoration:underline;text-decoration-color:#FF7205;text-underline-offset:4px}
.ai-l a:focus-visible{outline:2px solid #FF7205;outline-offset:2px}


@media (min-width:900px){
  .carte.aide{width:min(1120px,calc(100% - 128px));max-width:none;margin:clamp(20px,5vh,48px) 64px}
  .carte.aide .ai-chapo{max-width:68ch}
  .ai-blocs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px;margin-top:4px}
}

@media (min-width:900px) and (max-height:700px){
  .carte.aide{padding-top:24px;padding-bottom:20px}
  .carte.aide .ai-k{margin-top:10px}
}


@media (max-width:600px){
  .pt{justify-content:center}
  .carte,.carte.aide{width:auto;flex:1 1 auto;margin:24px 20px;padding:24px}
}
