@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --paper:#f7f5ee;
  --green:#244c3c;
  --muted:#787e70;
  --line:#e0e3d7;
  --terra:#b66d4c}

* {
  box-sizing:border-box}

body {
  margin:0;
  background:var(--paper);
  color:var(--green);
  font-family:'DM Sans',sans-serif;
  height:100svh;
  display:flex;
  flex-direction:column}

button,input {
  font:inherit}

button {
  cursor:pointer}

a {
  color:inherit}

header,footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 6vw}

header {
  height:100px;
  flex-shrink:0}

.brand {
  text-decoration:none;
  font-family:Manrope,sans-serif;
  font-weight:800;
  font-size:32px;
  letter-spacing:-1.8px;
  display:flex;
  align-items:center;
  gap:10px}

.brand span {
  font-size:12px;
  align-self:flex-start;
  margin-top:7px;
  letter-spacing:0}

.launch {
  font-size:12px;
  display:flex;
  gap:9px;
  align-items:center;
  color:var(--muted)}

.launch i {
  width:6px;
  height:6px;
  background:#6d8c50;
  border-radius:50%;
  box-shadow:0 0 0 4px #e8ecdc}

.header-link {
  border:0;
  background:transparent;
  color:var(--green);
  font-size:12px}

.header-link span {
  margin-left:18px;
  font-size:19px}

main {
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  align-items:center;
  max-width:1440px;
  width:100%;
  margin:auto;
  padding:15px 8vw 30px;
  gap:30px}

.eyebrow {
  font-size:10px;
  font-weight:700;
  letter-spacing:2px}

h1 {
  font-family:Manrope,sans-serif;
  font-size:clamp(46px,5.5vw,82px);
  line-height:1.12;
  letter-spacing:-4px;
  font-weight:500;
  margin:24px 0}

em {
  color:var(--terra);
  font-family:Georgia,serif;
  font-weight:400}

.lead {
  font-size:clamp(16px,1.35vw,20px);
  line-height:1.65;
  margin:0 0 18px}

.description {
  font-size:13px;
  line-height:1.8;
  color:var(--muted);
  max-width:365px;
  margin-bottom:29px}

.primary {
  background:var(--green);
  color:#fff;
  border:0;
  border-radius:7px;
  padding:17px 22px;
  font-size:12px;
  display:inline-flex;
  gap:36px;
  align-items:center;
  justify-content:space-between;
  transition:background .2s,transform .2s}

.primary:hover {
  background:#35634c;
  transform:translateY(-1px)}

.primary span {
  font-size:19px}

.small-note {
  font-size:10px;
  margin-top:18px;
  color:var(--muted);
  display:flex;
  gap:8px;
  align-items:center}

.small-note>span {
  font-size:17px;
  color:var(--terra)}

.community {
  height:460px;
  width:100%;
  max-width:500px;
  position:relative;
  justify-self:center}

.orbit {
  position:absolute;
  border:1px solid #e3e4d8;
  border-radius:50%;
  left:50%;
  top:47%;
  transform:translate(-50%,-50%)}

.one {
  width:340px;
  height:340px}

.two {
  width:440px;
  height:440px}

.connections {
  width:100%;
  height:100%;
  position:absolute;
  inset:0}

.connections path {
  fill:none;
  stroke:#b6bea7;
  stroke-width:1.2;
  stroke-dasharray:4 7}

.person {
  position:absolute;
  width:94px;
  height:94px;
  border-radius:50%;
  border:7px solid var(--paper);
  box-shadow:0 0 0 1px #dedfcc}

.person svg {
  width:100%;
  height:100%;
  border-radius:50%;
  background:#e5dfc7}

.person span {
  position:absolute;
  white-space:nowrap;
  background:#fffdf8;
  border:1px solid #e6e4d9;
  padding:9px 13px;
  border-radius:5px;
  font-size:10px;
  box-shadow:0 4px 12px #244c3c05}

.p1 {
  left:14%;
  top:15%}

.p1 span {
  left:-27px;
  top:89px}

.p2 {
  right:13%;
  top:30%}

.p2 svg {
  background:#e5bba2}

.p2 span {
  top:85px;
  left:12px}

.p3 {
  left:47%;
  top:69%}

.p3 svg {
  background:#d8deca}

.p3 span {
  left:54px;
  top:53px}

.parcel {
  position:absolute;
  left:42%;
  top:40%;
  width:102px;
  height:102px;
  border-radius:25px;
  background:#edeadf;
  transform:rotate(-8deg);
  display:grid;
  place-items:center;
  box-shadow:0 12px 35px #244c3c08}

.parcel svg {
  width:82px}

.parcel span {
  position:absolute;
  top:112px;
  left:1px;
  font-size:10px;
  white-space:nowrap;
  transform:rotate(8deg);
  color:var(--muted)}

.city {
  position:absolute;
  font-size:8px;
  color:#919887;
  letter-spacing:1.6px}

.c1 {
  top:10%;
  left:33%}

.c2 {
  right:6%;
  top:61%}

.c3 {
  left:10%;
  bottom:21%}

.star {
  position:absolute;
  color:#c28b4b;
  right:28%;
  top:10%;
  font-size:34px}

.caption {
  position:absolute;
  bottom:-24px;
  width:100%;
  text-align:center;
  font-size:11px;
  line-height:1.8;
  color:var(--muted)}

.caption strong {
  color:var(--green);
  font-weight:500}

footer {
  height:65px;
  border-top:1px solid var(--line);
  font-size:10px;
  color:var(--muted);
  flex-shrink:0}

footer a {
  text-decoration:none}

dialog {
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--paper);
  color:var(--green);
  padding:35px;
  width:min(510px,calc(100% - 28px));
  max-height:calc(100svh - 28px);
  box-shadow:0 30px 100px #19382730}

dialog::backdrop {
  background:#19382770;
  backdrop-filter:blur(5px)}

.close {
  position:absolute;
  right:17px;
  top:12px;
  font-size:27px;
  border:0;
  background:none;
  color:var(--green)}

h2 {
  font-family:Manrope,sans-serif;
  font-size:36px;
  font-weight:500;
  letter-spacing:-1.4px;
  line-height:1.2;
  margin:18px 0 12px}

.dialog-intro {
  font-size:12px;
  color:var(--muted);
  margin-bottom:24px}

fieldset {
  border:0;
  padding:0;
  margin:0 0 18px}

legend,form>label,.fields label {
  font-size:11px;
  font-weight:500}

legend {
  margin-bottom:10px}

.roles {
  display:flex;
  gap:6px}

.roles label {
  flex:1;
  position:relative}

.roles input {
  position:absolute;
  opacity:0}

.roles span {
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:45px;
  border:1px solid var(--line);
  border-radius:6px;
  padding:8px;
  font-size:10px;
  cursor:pointer}

.roles input:checked+span {
  background:var(--green);
  border-color:var(--green);
  color:white}

.roles input:focus-visible+span {
  outline:3px solid var(--terra);
  outline-offset:2px}

form>label,.fields label {
  display:block;
  margin-bottom:14px}

input:not([type=radio]):not([type=checkbox]) {
  display:block;
  width:100%;
  background:#fffdf8;
  border:1px solid var(--line);
  border-radius:6px;
  padding:12px;
  margin-top:7px;
  font-size:12px;
  color:var(--green)}

:focus-visible {
  outline:2px solid var(--terra);
  outline-offset:3px}

.fields {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:12px}

small {
  font-weight:400;
  color:var(--muted);
  margin-left:5px}

.consent {
  display:flex!important;
  align-items:flex-start;
  gap:8px;
  font-size:10px!important;
  line-height:1.7;
  color:var(--muted)}

.consent input {
  accent-color:var(--green);
  margin-top:3px}

.submit {
  width:100%}

.submit:disabled {
  opacity:.65;
  cursor:wait}

#form-status {
  font-size:11px;
  color:#9f4830;
  line-height:1.5;
  margin:10px 0 0}

.trap {
  position:absolute;
  left:-9999px}

.success-icon {
  display:grid;
  place-items:center;
  width:55px;
  height:55px;
  background:#e3e9d7;
  border-radius:50%;
  font-size:24px;
  margin:25px 0}

#success h3 {
  font-size:22px;
  font-weight:500}

#success p {
  font-size:13px;
  line-height:1.8;
  color:var(--muted)}

[hidden] {
  display:none!important}


@media(min-width:801px) and (max-height:750px) {
  header {
  height:75px}

.community {
  height:380px;
  transform:scale(.85)}

h1 {
  font-size:60px;
  margin:18px 0}

.description {
  margin-bottom:18px}

.caption {
  bottom:-35px}

}


@media(max-width:800px) {
  header {
  height:70px}

.launch {
  display:none}

.brand {
  font-size:28px}

.header-link {
  font-size:10px}

main {
  grid-template-columns:1fr;
  grid-template-rows:auto 1fr;
  padding:10px 8vw 20px;
  gap:12px}

.intro {
  text-align:center}

.eyebrow {
  font-size:8px}

h1 {
  font-size:clamp(36px,10vw,56px);
  letter-spacing:-2px;
  margin:18px 0}

.lead {
  font-size:14px;
  margin-bottom:12px}

.description {
  font-size:11px;
  max-width:350px;
  margin:0 auto 20px}

.small-note {
  justify-content:center;
  font-size:8px;
  margin-top:12px}

.community {
  height:100%;
  max-height:300px;
  min-height:160px;
  max-width:340px;
  align-self:center}

.one {
  width:170px;
  height:170px}

.two {
  width:230px;
  height:230px}

.person {
  width:60px;
  height:60px;
  border-width:4px}

.person span {
  font-size:8px;
  padding:7px}

.p1 span {
  top:54px;
  left:-20px}

.p2 span {
  top:54px;
  left:0}

.p3 span {
  left:35px;
  top:34px}

.parcel {
  width:64px;
  height:64px;
  left:40%;
  top:35%}

.parcel svg {
  width:53px}

.parcel span {
  top:70px;
  font-size:8px}

.star {
  font-size:23px}

.city {
  font-size:6px}

.caption {
  display:none}

footer {
  height:45px}

.footer-center {
  display:none}

}


@media(max-width:800px) and (max-height:680px) {
  header {
  height:55px}

h1 {
  font-size:36px;
  margin:12px 0}

.lead {
  font-size:12px}

.description {
  font-size:10px;
  margin-bottom:12px}

.primary {
  padding:12px 18px}

.community {
  min-height:120px}

.one {
  width:115px;
  height:115px}

.two {
  width:155px;
  height:155px}

.person {
  width:45px;
  height:45px}

.p1 span,.p2 span {
  top:39px}

.p3 span {
  top:24px}

.parcel {
  width:48px;
  height:48px}

.parcel svg {
  width:42px}

.parcel span {
  top:52px}

.small-note {
  margin-top:7px}

}


@media(max-height:550px) {
  body {
  height:auto;
  min-height:100svh}

main {
  min-height:420px}

}


@media(prefers-reduced-motion:reduce) {
  * {
  transition:none!important}

}



/* Page de confidentialité */
.privacy { height: auto; min-height: 100svh; }
.privacy-content { display: block; max-width: 800px; padding-top: 40px; }
.privacy-content p { line-height: 1.8; color: var(--muted); font-size: 14px; }
.privacy-pending { padding: 16px; border: 1px solid var(--line); border-radius: 8px; }