/* clckit · clckitapp.com
   Jetons repris de ~/clckit/CLAUDE.md §3. Polices hébergées ici (licence OFL,
   voir fonts/OFL-*.txt) : aucune requête vers un tiers, donc aucune adresse
   IP de visiteur envoyée à Google. */

@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/bricolage-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/fonts/dmsans-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/fonts/dmsans-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/fonts/dmsans-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --coral:#FF6F61;
  --gold:#F2A93B;
  --violet:#4B2A7B;
  --violet-light:#B89BE8;
  --violet-tint:#EDE3FA;
  --it-clair:#8C6BBF;      /* le « it » du logotype sur fond clair */
  --cream:#FFF8EE;
  --night:#14111F;
  --muted:#6B5A80;
  --border:#D9CDB8;
  --card-border:#EFE4D2;
  --white:#FFFFFF;
  --error:#A3261B;         /* 6,9:1 sur blanc */
  --display:"Bricolage Grotesque",ui-rounded,system-ui,sans-serif;
  --text:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gutter:clamp(16px,5vw,64px);
  --radius:22px;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  margin:0;background:var(--cream);color:var(--night);
  font-family:var(--text);font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:var(--violet);text-underline-offset:.15em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.08;letter-spacing:-.02em;margin:0}
p{margin:0}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--violet);color:var(--cream);padding:.6rem 1rem;border-radius:999px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}

.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 var(--gutter)}

/* ---------- logotype ---------- */
.wordmark{
  display:inline-flex;align-items:baseline;
  font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1;
  color:var(--violet);text-decoration:none;white-space:nowrap;
}
.wordmark svg{width:.565em;height:.565em;margin:0 .03em 0 .02em;transform:translateY(.018em);flex-shrink:0}
.wordmark svg path{stroke:currentColor}
.wordmark .it{color:var(--it-clair);margin-left:.04em}
.wordmark--clair{color:var(--cream)}
.wordmark--clair .it{color:var(--violet-light)}

.sign{color:var(--violet)}
.sign g{stroke:currentColor}

/* ---------- en-tête ---------- */
.top{position:sticky;top:0;z-index:40;background:rgba(255,248,238,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid transparent}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px}
.top .wordmark{font-size:1.75rem}
.top__nav{display:flex;align-items:center;gap:.5rem}
.lang{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 .9rem;
  border-radius:999px;border:1.5px solid var(--border);background:var(--white);
  font-weight:700;font-size:.9rem;letter-spacing:.04em;color:var(--night);text-decoration:none;
}
.lang:hover{border-color:var(--violet)}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:56px;padding:0 1.75rem;border-radius:999px;border:0;cursor:pointer;
  background:var(--violet);color:var(--cream);
  font-family:var(--display);font-weight:800;font-size:1.125rem;letter-spacing:-.01em;text-decoration:none;
  transition:transform .15s ease,background-color .15s ease;
}
.btn:hover{background:#3C2163}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.7;cursor:progress}
.btn--petit{min-height:44px;padding:0 1.1rem;font-size:.95rem}
.btn--bloc{width:100%}

/* ---------- héros ---------- */
.hero{padding:20px 0 56px}
.hero__grid{display:grid;gap:28px;align-items:start}
.hero__marque{display:flex;align-items:center;justify-content:center;gap:10px}
.hero__marque .sign{width:72px;height:72px;flex:none}
.hero__marque .wordmark{font-size:3.4rem}
.hero__texte{text-align:center}
.hero h1{font-size:clamp(1.9rem,7.4vw,3.6rem);margin:18px 0 12px}
.hero__en{display:block;font-family:var(--text);font-weight:500;font-size:.5em;letter-spacing:0;color:var(--muted);margin-top:.5rem}
.hero__pitch{color:#3D3350;max-width:36ch;margin:0 auto;font-size:1.0625rem}
.reperes{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;margin:18px 0 0;padding:0}
.reperes li{background:var(--violet-tint);color:var(--violet);border-radius:999px;padding:.35rem .85rem;font-size:.875rem;font-weight:500}

@media (min-width:920px){
  .hero{padding:48px 0 96px}
  .hero__grid{grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
  .hero__texte{text-align:left}
  .hero__marque{justify-content:flex-start;gap:16px}
  .hero__marque .sign{width:120px;height:120px}
  .hero__marque .wordmark{font-size:5.4rem}
  .hero__pitch{margin:0;font-size:1.2rem}
  .reperes{justify-content:flex-start}
}

/* ---------- formulaire ---------- */
.carte{background:var(--white);border:1px solid var(--card-border);border-radius:var(--radius);padding:24px 20px;box-shadow:0 10px 30px -18px rgba(75,42,123,.35)}
@media (min-width:480px){.carte{padding:28px}}
.form h2{font-size:1.5rem;margin-bottom:4px}
.form__aide{color:var(--muted);font-size:.95rem;margin-bottom:18px}
.champ{margin-bottom:16px}
.champ label,.champ .label{display:block;font-weight:700;font-size:.95rem;margin-bottom:6px}
.champ .facultatif{font-weight:400;color:var(--muted)}
.champ input[type=email],.champ input[type=text],.champ select{
  width:100%;min-height:52px;padding:0 16px;border-radius:14px;
  border:1.5px solid var(--border);background:var(--white);color:var(--night);
  font:inherit;font-size:1rem;
}
.champ select{appearance:none;-webkit-appearance:none;padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%234B2A7B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center}
.champ input:focus,.champ select:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-tint)}
.champ [aria-invalid=true]{border-color:var(--error)}
.erreur{display:block;color:var(--error);font-size:.9rem;font-weight:500;margin-top:6px}
.erreur:empty{display:none}

.coche{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;margin-bottom:12px;cursor:pointer;font-size:.95rem;line-height:1.5}
.coche input{
  appearance:none;-webkit-appearance:none;width:26px;height:26px;margin:0;border-radius:8px;
  border:1.5px solid var(--border);background:var(--white);display:grid;place-content:center;cursor:pointer;
}
.coche input::after{content:"";width:12px;height:7px;border:solid var(--cream);border-width:0 0 3px 3px;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.coche input:checked{background:var(--violet);border-color:var(--violet)}
.coche input:checked::after{opacity:1}
.coche input:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.coche input[aria-invalid=true]{border-color:var(--error)}
.coche__erreur{margin:-6px 0 12px 38px}

.mentions{font-size:.8125rem;color:var(--muted);line-height:1.5;margin:4px 0 18px}
.mentions a{color:var(--muted)}

/* Le pot de miel : hors écran, jamais vu ni atteint au clavier. */
.miel{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

.statut{margin-top:14px;font-weight:500}
.statut:empty{display:none}
.statut--erreur{color:var(--error)}

.succes{text-align:center;padding:12px 4px}
.succes .sign{width:88px;height:88px;margin:0 auto 12px}
.succes h2{font-size:1.75rem;margin-bottom:10px}
.succes p{color:#3D3350}

/* ---------- sections ---------- */
.section{padding:72px 0}
@media (min-width:920px){.section{padding:112px 0}}
.surtitre{font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.section h2{font-size:clamp(1.9rem,5.4vw,3rem);max-width:20ch}
.section__intro{margin-top:16px;max-width:56ch;color:#3D3350;font-size:1.125rem}

.duo{display:grid;gap:16px;margin-top:36px}
@media (min-width:720px){.duo{grid-template-columns:1fr 1fr;gap:24px}}
.geste{border-radius:var(--radius);padding:24px;border:1px solid var(--card-border);background:var(--white)}
.geste__pastille{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:.4rem 1rem;font-weight:700;color:var(--night);margin-bottom:14px}
.geste--like .geste__pastille{background:var(--coral)}
.geste--clockit{border:3px solid var(--gold)}
.geste--clockit .geste__pastille{background:var(--gold)}
.geste h3{font-size:1.5rem;margin-bottom:8px}
.geste p{color:#3D3350}
.geste__exemples{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:16px 0 0}
.geste__exemples li{border:1.5px solid var(--gold);border-radius:999px;padding:.3rem .8rem;font-size:.9rem;font-weight:500}

/* L'heure dorée : le seul bloc sombre, comme l'écran « Clockit reçu ». */
.section--nuit{background:var(--night);color:var(--cream)}
.section--nuit .surtitre{color:var(--violet-light)}
.section--nuit .section__intro{color:#D8D0E6}
.heure{display:grid;gap:32px;align-items:center}
@media (min-width:920px){.heure{grid-template-columns:1.1fr .9fr;gap:64px}}
.drop{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:360px}
.drop span{aspect-ratio:3/4;border-radius:14px;background:linear-gradient(160deg,#2B2440,#1C1730);border:1px solid #3A3152}
.drop span:nth-child(3n+1){background:linear-gradient(160deg,#3A2A5C,#221B36)}
.drop span:first-child{border:2px solid var(--gold)}
.drop__legende{margin-top:14px;color:#D8D0E6;font-size:.95rem}
.horloge{display:inline-flex;align-items:baseline;gap:.4rem;font-family:var(--display);font-weight:800;color:var(--gold);font-size:clamp(3rem,10vw,5rem);line-height:1;margin-bottom:10px}
.horloge small{font-family:var(--text);font-weight:500;font-size:1rem;color:#D8D0E6}

/* Zéro ghosting */
.fin{display:grid;gap:32px;align-items:center}
@media (min-width:920px){.fin{grid-template-columns:1fr 1fr;gap:64px}}
.bulle{background:var(--white);border:1px solid var(--card-border);border-radius:var(--radius) var(--radius) var(--radius) 6px;padding:20px 22px;max-width:440px;box-shadow:0 10px 30px -20px rgba(75,42,123,.4)}
.bulle__entete{font-size:.8125rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.bulle p{color:var(--night)}
.bulle__note{margin-top:14px;font-size:.9rem;color:var(--muted)}

/* Sécurité */
.section--teinte{background:var(--violet-tint)}
.grille{display:grid;gap:16px;margin-top:36px;list-style:none;padding:0}
@media (min-width:640px){.grille{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.grille--4{grid-template-columns:repeat(4,1fr)}}
.point{background:var(--white);border-radius:var(--radius);padding:22px;border:1px solid var(--card-border)}
.point__icone{width:44px;height:44px;border-radius:999px;background:var(--violet-tint);display:grid;place-items:center;margin-bottom:12px;color:var(--violet)}
.point__icone svg{width:24px;height:24px}
.point h3{font-size:1.2rem;margin-bottom:6px}
.point p{color:#3D3350;font-size:.98rem}

/* Le pacte */
.section--violet{background:var(--violet);color:var(--cream)}
.section--violet .surtitre{color:var(--violet-light)}
.section--violet .section__intro{color:#E6DCF5}
.pacte{counter-reset:pacte}
.pacte .point{background:rgba(255,248,238,.06);border-color:rgba(255,248,238,.18);color:var(--cream)}
.pacte .point p{color:#E6DCF5}
.pacte .point::before{counter-increment:pacte;content:counter(pacte);display:grid;place-items:center;width:40px;height:40px;border-radius:999px;background:var(--gold);color:var(--night);font-family:var(--display);font-weight:800;margin-bottom:12px}

/* Appel final */
.final{text-align:center}
.final h2{margin:0 auto}
.final .section__intro{margin:16px auto 28px}
.final .sign{width:96px;height:96px;margin:0 auto 18px}

/* ---------- pied ---------- */
.pied{background:var(--night);color:#D8D0E6;padding:48px 0 40px;font-size:.95rem}
.pied a{color:var(--cream)}
.pied__grille{display:grid;gap:28px}
@media (min-width:720px){.pied__grille{grid-template-columns:1.2fr 1fr 1fr}}
.pied .wordmark{font-size:2rem;margin-bottom:10px}
.pied h2{font-family:var(--text);font-weight:700;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-light);margin-bottom:10px}
.pied ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.pied address{font-style:normal}
.pied__bas{margin-top:32px;padding-top:20px;border-top:1px solid #2E2842;font-size:.875rem;color:#B5AAC8}

/* ---------- bandeau de langue ---------- */
.bandeau{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.5rem 1rem;background:var(--violet);color:var(--cream);padding:.6rem var(--gutter);font-size:.95rem}
.bandeau[hidden]{display:none}
.bandeau a{color:var(--cream);font-weight:700}
.bandeau button{background:none;border:1.5px solid rgba(255,248,238,.5);color:var(--cream);border-radius:999px;min-height:36px;padding:0 .9rem;font:inherit;cursor:pointer}

/* ---------- pages juridiques et pages simples ---------- */
.doc{padding:40px 0 80px}
.doc__corps{max-width:760px}
.doc h1{font-size:clamp(2rem,6vw,2.8rem);margin-bottom:6px}
.doc .maj{color:var(--muted);margin-bottom:24px}
.doc h2{font-size:1.35rem;margin:36px 0 10px}
.doc p,.doc li{color:#2A2338}
.doc p+p{margin-top:12px}
.doc ul{padding-left:1.2rem;margin:10px 0}
.doc li+li{margin-top:6px}
.doc .encadre{background:var(--violet-tint);border-radius:var(--radius);padding:20px 22px;margin-top:36px}
.doc .encadre h2{margin-top:0}

.simple{min-height:70vh;display:grid;place-items:center;text-align:center;padding:48px var(--gutter)}
.simple .sign{width:96px;height:96px;margin:0 auto 16px}
.simple h1{font-size:clamp(2rem,7vw,3rem);margin-bottom:12px}
.simple p{color:#3D3350;max-width:44ch;margin:0 auto 24px}
.simple__liens{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* Ajustements */
blockquote,figure{margin:0}
@media (max-width:599px){
  .reperes{display:none}           /* le formulaire remonte ; le 18+ est dans le formulaire */
  .hero h1{margin-top:14px}
}