/* =========================================================
   SAFYR — be safe here
   Design system · sobre, éditorial, deux thèmes
   ========================================================= */

/* ---------------- Tokens ---------------- */

:root{
  /* Thème sombre par défaut */
  --bg:          #0A0A0B;
  --bg-2:        #0F0F11;
  --surface:     #141417;
  --surface-2:   #191920;
  --border:      rgba(255,255,255,.11);
  --border-2:    rgba(255,255,255,.20);
  --text:        #F2F2F0;
  --text-2:      #9E9EA6;
  --text-3:      #6C6C76;
  --accent:      #5B85FF;
  --accent-2:    #1F44C8;
  --accent-soft: rgba(91,133,255,.12);
  --amber:       #E8A33D;
  --amber-soft:  rgba(232,163,61,.12);
  --shadow:      0 24px 60px -32px rgba(0,0,0,.9);

  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1180px;
  --r:    10px;
  --r-sm: 7px;
  --ease: cubic-bezier(.22,.68,.32,1);
  --header-h: 72px;

  color-scheme: dark;
}

:root[data-theme="light"]{
  --bg:          #FBFAF8;
  --bg-2:        #F4F3EF;
  --surface:     #FFFFFF;
  --surface-2:   #FAF9F6;
  --border:      rgba(18,18,24,.13);
  --border-2:    rgba(18,18,24,.26);
  --text:        #131318;
  --text-2:      #55555F;
  --text-3:      #83838D;
  --accent:      #1F44C8;
  --accent-2:    #1633A0;
  --accent-soft: rgba(31,68,200,.08);
  --amber:       #A96A00;
  --amber-soft:  rgba(169,106,0,.09);
  --shadow:      0 20px 50px -30px rgba(20,20,30,.35);

  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .5s var(--ease), color .5s var(--ease);
}
body.is-locked{ overflow:hidden; }

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--accent); color:#fff; }

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

/* ---------------- Typographie ---------------- */

h1,h2{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:-.012em;
  line-height:1.04;
  margin:0 0 .42em;
  text-wrap:balance;
}
h3,h4{
  font-family:var(--body);
  font-weight:500;
  letter-spacing:-.012em;
  line-height:1.28;
  margin:0 0 .5em;
}

h1{ font-size:clamp(3.1rem, 7vw, 5.7rem); }
h2{ font-size:clamp(2.1rem, 4vw, 3.4rem); }
h3{ font-size:1.09rem; }
h4{
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--text-3); font-weight:500; margin-bottom:1.1rem;
}

p{ margin:0 0 1.05em; color:var(--text-2); }
p:last-child{ margin-bottom:0; }

.lead{
  font-size:clamp(1.06rem, 1.3vw, 1.18rem);
  line-height:1.6;
  color:var(--text-2);
  max-width:62ch;
}

.label{
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--text-3);
  margin:0 0 1.4rem;
}

.fineprint{
  font-size:.82rem; color:var(--text-3); line-height:1.6; max-width:74ch;
}
.fineprint.center{ margin-inline:auto; text-align:center; margin-top:2.4rem; }

/* ---------------- Layout ---------------- */

.wrap{
  width:min(var(--wrap), calc(100% - 2 * clamp(22px, 5vw, 60px)));
  margin-inline:auto;
}
.center{ text-align:center; }

.section{ position:relative; z-index:2; }
.section--pad{ padding:clamp(4.2rem, 8.5vh, 6.8rem) 0; }
.section--tall{ min-height:86vh; display:flex; align-items:center; padding:4rem 0; }

/* Filet de séparation entre sections */
.rule::before{
  content:"";
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(var(--wrap), calc(100% - 2 * clamp(22px, 5vw, 60px)));
  height:1px; background:var(--border);
}

.lede{ max-width:44ch; margin-bottom:2.8rem; }
.lede .lead{ margin-top:1.1rem; max-width:52ch; }
.lede--center{ max-width:56ch; margin-inline:auto; text-align:center; }
.lede--center .lead{ margin-inline:auto; }

.split{
  display:grid; grid-template-columns:1fr 1fr; gap:2.6rem;
  max-width:900px;
}

/* Grilles à filets */
.grid{ display:grid; gap:0; margin-top:3rem; }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }

.grid--rule{ border-top:1px solid var(--border); }
.grid--rule .cell{
  padding:1.6rem 2rem 1.6rem 0;
  border-right:1px solid var(--border);
}
.grid--rule .cell:last-child{ border-right:none; }
.grid--rule .cell:not(:first-child){ padding-left:2rem; }
.grid--2.grid--rule .cell:nth-child(n+3){ border-top:1px solid var(--border); }
.grid--2.grid--rule .cell:nth-child(odd){ padding-left:0; }
.grid--2.grid--rule .cell:nth-child(even){ border-right:none; }

.cell h3{ margin-bottom:.6rem; }
.cell p{ font-size:.95rem; margin-bottom:0; }

/* Cellule encadrée */
.cell--framed{
  padding:2.2rem;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:var(--surface);
  transition:border-color .4s var(--ease);
}
.cell--framed:hover{ border-color:var(--border-2); }
.cell--framed h3{ font-size:1.35rem; margin-bottom:.8rem; }
.cell--featured{ background:var(--surface-2); border-color:var(--border-2); }

.grid.offers{ gap:1rem; }

/* ---------------- Scène 3D ---------------- */

.stage{ position:fixed; inset:0; z-index:1; pointer-events:none; }
.stage canvas{ width:100%; height:100%; display:block; }

/* ---------------- Préchargement ---------------- */

.preloader{
  position:fixed; inset:0; z-index:200;
  background:var(--bg);
  display:grid; place-items:center;
  transition:opacity .7s var(--ease), visibility .7s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__inner{ display:grid; justify-items:center; gap:1.6rem; width:180px; }
.preloader__mark{ width:34px; height:34px; color:var(--text-3); }
.preloader__bar{ width:100%; height:1px; background:var(--border); overflow:hidden; }
.preloader__bar span{
  display:block; height:100%; width:0%;
  background:var(--text); transition:width .35s var(--ease);
}

/* ---------------- En-tête ---------------- */

.header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--header-h);
  display:flex; align-items:center; gap:2rem;
  padding:0 clamp(22px, 5vw, 60px);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.header.is-stuck{
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--border);
}

/* Progression de lecture — la page est longue, on situe le visiteur */
.header__progress{
  position:absolute; left:0; bottom:-1px;
  height:1px; width:100%;
  background:var(--accent);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .12s linear, opacity .4s var(--ease);
  opacity:0;
}
.header.is-stuck .header__progress{ opacity:1; }

.brand{ display:flex; align-items:center; gap:.68rem; flex:none; }
.brand__mark{ width:20px; height:20px; color:var(--text); flex:none; }
.brand__text{ display:grid; line-height:1; }
.brand__text strong{ font-size:.93rem; font-weight:600; letter-spacing:.2em; }
.brand__text em{
  font-style:normal; font-size:.56rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--text-3); margin-top:.34rem;
}

.nav{ display:flex; gap:2.1rem; margin-left:auto; align-items:center; }
.nav a{ font-size:.88rem; color:var(--text-2); transition:color .3s var(--ease); }
.nav a:hover{ color:var(--text); }
.nav a.is-active{ color:var(--text); }
.nav .nav__cta{ display:none; }

.header__end{ display:flex; align-items:center; gap:.9rem; flex:none; }

.theme-toggle{
  width:34px; height:34px; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--border); border-radius:var(--r-sm);
  background:transparent; color:var(--text-2);
  cursor:pointer; padding:0;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.theme-toggle:hover{ border-color:var(--border-2); color:var(--text); }
.theme-toggle svg{ width:16px; height:16px; }
.theme-toggle__moon{ display:none; }
:root[data-theme="light"] .theme-toggle__sun{ display:none; }
:root[data-theme="light"] .theme-toggle__moon{ display:block; }

.burger{
  display:none;
  width:34px; height:34px;
  background:none; border:1px solid var(--border); border-radius:var(--r-sm);
  cursor:pointer; padding:0;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.burger span{
  display:block; width:14px; height:1px; background:var(--text);
  transition:transform .3s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

/* ---------------- Boutons ---------------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.9rem; font-weight:500; letter-spacing:-.005em;
  padding:.82rem 1.5rem;
  border-radius:var(--r-sm);
  border:1px solid transparent;
  cursor:pointer;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
  white-space:nowrap;
}
.btn--sm{ padding:.55rem 1.05rem; font-size:.83rem; }
.btn--full{ width:100%; }

.btn--primary{ background:var(--text); color:var(--bg); }
.btn--primary:hover{ background:var(--accent); color:#fff; }

.btn--ghost{ border-color:var(--border-2); color:var(--text); background:transparent; }
.btn--ghost:hover{ border-color:var(--text); }

/* ---------------- Hero ---------------- */

.hero{
  min-height:100svh; display:flex; align-items:center;
  padding:var(--header-h) 0 5rem;
}
.hero__copy{ max-width:600px; }
.hero h1{ margin-bottom:1.7rem; }
.hero .lead{ max-width:46ch; }
.hero__actions{ display:flex; gap:.8rem; flex-wrap:wrap; margin:2.4rem 0 3.2rem; }

.hero__points{
  list-style:none; margin:0; padding:1.5rem 0 0; border-top:1px solid var(--border);
  display:grid; gap:.55rem;
  font-size:.88rem; color:var(--text-2); max-width:34ch;
}
.hero__points li{ display:flex; align-items:center; gap:.75rem; }
.key{
  width:6px; height:6px; border-radius:1px; flex:none;
  background:var(--text-3); transform:rotate(45deg);
}
.key--blue{ background:var(--accent); }
.key--amber{ background:var(--amber); }

.scroll-hint{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  display:grid; justify-items:center; gap:.7rem;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-3);
  transition:opacity .5s var(--ease);
}
.scroll-hint i{ display:block; width:1px; height:38px; background:var(--border-2); }
body.is-scrolled .scroll-hint{ opacity:0; }

/* ---------------- Panneaux produit ---------------- */

.side-left .wrap,.side-right .wrap{ display:flex; }
.side-left .wrap{ justify-content:flex-start; }
.side-right .wrap{ justify-content:flex-end; }

.panel{
  max-width:400px;
  padding:2.2rem;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:var(--shadow);
}
.panel h3{ font-size:1.3rem; margin-bottom:.85rem; }
.panel p{ font-size:.95rem; }

/* ---------------- Listes ---------------- */

.ticks{ list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:.6rem; }
.ticks li{
  position:relative; padding-left:1.15rem;
  font-size:.9rem; color:var(--text-2); line-height:1.5;
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:4px; height:4px; border-radius:50%; background:var(--text-3);
}
.ticks--plus li::before{
  content:"+"; width:auto; height:auto; border-radius:0; background:none;
  top:0; font-size:.9rem; color:var(--accent); line-height:1.5;
}
.ticks--minus li::before{
  content:"—"; width:auto; height:auto; border-radius:0; background:none;
  top:.05em; font-size:.7rem; color:var(--text-3); line-height:1.7;
}

.accent--blue .ticks li::before{ background:var(--accent); }
.accent--amber .ticks li::before{ background:var(--amber); }
.accent--amber .label{ color:var(--amber); }
.accent--blue .label{ color:var(--accent); }

/* ---------------- Deux boutons ---------------- */

.buttons-grid{
  display:grid;
  grid-template-columns:1fr minmax(200px, 300px) 1fr;
  gap:0 2.5rem;
  margin-top:3rem;
}
.buttons-grid > *:nth-child(1){ grid-column:1; }
.buttons-grid > *:nth-child(2){ grid-column:3; }

/* ---------------- Offres ---------------- */

.offer__desc{ font-size:.93rem; color:var(--text-3); }
.offer__price{
  margin-top:2.2rem; padding-top:1.2rem;
  border-top:1px solid var(--border);
  font-size:.98rem; color:var(--text); font-weight:500;
  display:grid; gap:.15rem;
}
.offer__price span{ font-size:.82rem; color:var(--text-3); font-weight:400; }

/* ---------------- Palette / couleurs ---------------- */

.palette{
  min-height:140vh;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:10vh 0 9vh;
}
.palette__intro{ margin-bottom:0; }
.palette__foot{ display:grid; gap:1.8rem; justify-items:center; text-align:center; }

.swatches{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem .5rem;
}
.swatches li{
  display:flex; align-items:center; gap:.6rem;
  font-size:.8rem; color:var(--text-2);
  padding:.42rem .9rem .42rem .75rem;
  border:1px solid var(--border); border-radius:100px;
  background:color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.swatches i{
  width:8px; height:8px; border-radius:2px; background:var(--c);
  transform:rotate(45deg); flex:none;
}

/* ---------------- Étapes ---------------- */

.steps{
  list-style:none; margin:3rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--border);
}
.step{ padding:1.8rem 1.6rem 0 0; }
.step + .step{ padding-left:1.6rem; border-left:1px solid var(--border); }
.step__num{
  font-size:.72rem; letter-spacing:.1em; color:var(--text-3);
  display:block; margin-bottom:1.1rem;
}
.step h3{ font-size:1.02rem; margin-bottom:.45rem; }
.step p{ font-size:.87rem; margin:0; }

/* ---------------- Console ---------------- */

.console-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:4rem; align-items:center; }
.console-copy .lead{ margin-top:1.2rem; }

.console{
  border:1px solid var(--border);
  border-radius:var(--r);
  background:var(--surface);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.console__bar{
  display:flex; align-items:center; gap:1rem;
  padding:.8rem 1.1rem;
  border-bottom:1px solid var(--border);
  background:var(--surface-2);
}
.console__title{ font-size:.7rem; letter-spacing:.06em; color:var(--text-3); }
.console__live{
  margin-left:auto; display:flex; align-items:center; gap:.4rem;
  font-size:.68rem; color:var(--text-2);
}
.console__live i{
  width:5px; height:5px; border-radius:50%; background:#3FBF7F;
  animation:blink 2.4s ease-in-out infinite;
}
@keyframes blink{ 50%{ opacity:.3; } }

.console__body{ display:grid; grid-template-columns:1.3fr 1fr; min-height:320px; }
.console__map{
  position:relative;
  border-right:1px solid var(--border);
  background:var(--bg-2);
}
.map__zone{
  position:absolute;
  left:var(--x); top:var(--y); width:var(--w); height:var(--h);
  border:1px solid var(--border);
  border-radius:4px;
}
.map__zone span{
  position:absolute; top:.5rem; left:.65rem;
  font-size:.6rem; letter-spacing:.05em; color:var(--text-3);
}
.ping{
  position:absolute; left:var(--x); top:var(--y);
  width:8px; height:8px; border-radius:50%;
  transform:translate(-50%,-50%);
}
.ping::after{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  border:1px solid currentColor;
  animation:ripple 2.6s var(--ease) infinite;
}
@keyframes ripple{ 0%{ transform:scale(.6); opacity:.7 } 100%{ transform:scale(2.4); opacity:0 } }
.ping--amber{ background:var(--amber); color:var(--amber); }
.ping--blue{ background:var(--accent); color:var(--accent); }
.ping--blue::after{ animation-delay:.9s; }

.console__feed{ padding:.9rem; display:grid; gap:.55rem; align-content:start; }
.alert{
  display:grid; gap:.24rem;
  padding:.8rem .95rem;
  border-radius:var(--r-sm);
  border:1px solid var(--border);
  border-left-width:2px;
}
.alert strong{ font-size:.85rem; font-weight:500; color:var(--text); }
.alert__tag{ font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; }
.alert__meta{ font-size:.72rem; color:var(--text-3); }
.alert--amber{ border-left-color:var(--amber); background:var(--amber-soft); }
.alert--amber .alert__tag{ color:var(--amber); }
.alert--blue{ border-left-color:var(--accent); background:var(--accent-soft); }
.alert--blue .alert__tag{ color:var(--accent); }
.alert--done{ opacity:.5; }
.alert--done .alert__tag{ color:var(--text-3); }

/* ---------------- Équipe ---------------- */

.roster{ margin-top:0; border-top:1px solid var(--border); }
.roster__head,
.roster__row{
  display:grid;
  grid-template-columns:1.5fr .6fr 1.4fr;
  gap:1.5rem;
  align-items:baseline;
  padding:.85rem 0;
  border-bottom:1px solid var(--border);
}
.roster__head{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-3); padding:.9rem 0;
}
.roster__list{ list-style:none; margin:0; padding:0; }
.roster__name{ font-size:1rem; color:var(--text-2); }
.roster__name b{ font-weight:500; color:var(--text); }
.roster__spec{
  font-size:.72rem; letter-spacing:.1em; color:var(--text-3);
  border:1px solid var(--border); border-radius:100px;
  padding:.16rem .6rem; justify-self:start;
}
.roster__role{ font-size:.9rem; color:var(--text-2); }
.roster__row--lead .roster__role{ color:var(--text); }
.roster__row--lead .roster__spec{ border-color:var(--border-2); color:var(--text-2); }

.values{ margin-top:2.8rem; }
.values__list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:baseline;
}
.values__list li{
  font-family:var(--display); font-size:1.55rem; line-height:1.25;
}
.values__list li:not(:last-child)::after{
  content:"·"; color:var(--text-3); margin:0 .75rem;
}

.charte{
  display:grid; grid-template-columns:repeat(3,1fr);
  margin-top:2.8rem;
  border-top:1px solid var(--border);
}
.charte__col{ padding:1.6rem 2rem 0 0; }
.charte__col + .charte__col{ padding-left:2rem; border-left:1px solid var(--border); }
.charte__col .ticks{ margin-top:0; }

/* Citation et signatures côte à côte : deux blocs courts,
   inutile de les empiler sur toute la hauteur d'un écran. */
.charte-foot{
  display:grid; grid-template-columns:1.15fr 1fr; gap:3rem;
  margin-top:2.8rem; padding-top:2rem;
  border-top:1px solid var(--border);
  align-items:start;
}
.quote{ margin:0; padding:0; max-width:42ch; border:none; }
.quote p{
  font-family:var(--display); font-size:clamp(1.35rem, 2.2vw, 1.85rem);
  line-height:1.32; color:var(--text); margin:0;
}

.signatures{ margin:0; padding:0; border:none; }
.signatures__list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.signatures__list li{
  font-size:.82rem; color:var(--text-2);
  border:1px solid var(--border); border-radius:100px;
  padding:.35rem .9rem;
}

/* ---------------- Contact ---------------- */

.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4.5rem; align-items:start; }
.contact-copy .lead{ margin-top:1.3rem; }

.contact-list{ list-style:none; margin:2.2rem 0 0; padding:0; display:grid; gap:.9rem; }
.contact-list li{
  display:grid; grid-template-columns:5rem 1fr; align-items:baseline;
  padding-bottom:.9rem; border-bottom:1px solid var(--border);
}
.contact-list span{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3);
}
.contact-list a{ font-size:1rem; transition:color .3s var(--ease); }
.contact-list a:hover{ color:var(--accent); }

.form{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
  padding:2.2rem;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:var(--surface);
}
.field{ display:grid; gap:.45rem; }
.field--full{ grid-column:1 / -1; }
.form .btn, .form__note{ grid-column:1 / -1; }
.field label{
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3);
}
.field input,.field select,.field textarea{
  font-family:var(--body); font-size:.94rem;
  color:var(--text);
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  padding:.78rem .9rem;
  transition:border-color .25s var(--ease);
  width:100%; resize:vertical;
}
.field select{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23888891' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center; background-size:11px;
  padding-right:2.3rem;
}
.field input::placeholder,.field textarea::placeholder{ color:var(--text-3); opacity:.75; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--text); }
.field.is-error input,.field.is-error select{ border-color:#D9455A; }
.form__note{ font-size:.76rem; color:var(--text-3); margin:0; line-height:1.5; }
.form__note.is-success{ color:var(--text-2); }

/* ---------------- Clôture ---------------- */

.closing{ min-height:54vh; display:grid; place-items:center; text-align:center; padding:4rem 0; }
.closing__title{ font-size:clamp(3.2rem, 9vw, 7rem); margin-bottom:.5rem; }
.closing p{ font-size:1rem; }

/* ---------------- Pied de page ---------------- */

.footer{
  position:relative; z-index:2;
  border-top:1px solid var(--border);
  background:var(--bg);
  padding:3.4rem 0 1.8rem;
}
.footer__grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1.2fr; gap:3rem; }
.footer__grid nav{ display:grid; gap:.55rem; align-content:start; }
.footer__grid nav a{ font-size:.88rem; color:var(--text-2); transition:color .3s var(--ease); }
.footer__grid nav a:hover{ color:var(--text); }
.footer__blurb{ font-size:.85rem; color:var(--text-3); max-width:34ch; margin-top:1.2rem; }
.footer__blurb strong{ color:var(--text-2); font-weight:500; }
.footer__base{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top:2.4rem; padding-top:1.5rem; border-top:1px solid var(--border);
  font-size:.78rem; color:var(--text-3);
}
.footer__base p{ margin:0; color:inherit; }

/* ---------------- Apparitions ---------------- */

.reveal{
  opacity:0; transform:translateY(16px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--d, 0ms);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ---------------- Responsive ---------------- */

@media (max-width:1080px){
  .grid--3{ grid-template-columns:1fr 1fr; }
  .grid--3.grid--rule .cell:nth-child(odd){ padding-left:0; }
  .grid--3.grid--rule .cell:nth-child(even){ border-right:none; }
  .grid--3.grid--rule .cell:nth-child(n+3){ border-top:1px solid var(--border); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .step{ padding:1.6rem 1.4rem 1.6rem 0; border-bottom:1px solid var(--border); }
  .step + .step{ padding-left:1.4rem; }
  .step:nth-child(odd){ border-left:none; padding-left:0; }
  .console-grid{ grid-template-columns:1fr; gap:2.6rem; }
  .contact-grid{ grid-template-columns:1fr; gap:3rem; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:2.4rem; }
  .charte{ grid-template-columns:1fr; }
  .charte-foot{ grid-template-columns:1fr; gap:2rem; }
  .charte__col{ padding:2rem 0; border-bottom:1px solid var(--border); }
  .charte__col + .charte__col{ padding-left:0; border-left:none; }
  .buttons-grid{ grid-template-columns:1fr 1fr; gap:1rem; }
  .buttons-grid > *:nth-child(2){ grid-column:2; }
}

@media (max-width:820px){
  body{ font-size:16px; }
  .section--pad{ padding:3.6rem 0; }
  .lede{ margin-bottom:2rem; }
  .grid{ margin-top:2.2rem; }
  .cell--framed{ padding:1.5rem; }
  .cell--framed h3{ font-size:1.2rem; }
  .ticks{ gap:.45rem; }
  .steps{ margin-top:2.2rem; }
  .step,.step + .step{ padding:1.2rem 0 !important; }
  .charte{ margin-top:2.2rem; }
  .charte__col{ padding:1.4rem 0; }
  .values{ margin-top:2.2rem; }
  .charte-foot{ margin-top:2.2rem; padding-top:1.6rem; }
  .console-grid{ gap:2rem; }
  .contact-grid{ gap:2.2rem; }
  .footer{ padding:2.8rem 0 1.6rem; }

  .nav{
    position:fixed; inset:0;
    background:var(--bg);
    flex-direction:column; justify-content:center; align-items:center;
    gap:1.6rem; margin:0;
    opacity:0; visibility:hidden;
    transition:opacity .35s var(--ease), visibility .35s;
  }
  .nav.is-open{ opacity:1; visibility:visible; }
  .nav a{ font-family:var(--display); font-size:1.7rem; color:var(--text); }
  .nav .nav__cta{
    display:inline-flex; font-family:var(--body); font-size:.95rem;
    margin-top:.8rem; color:var(--bg);
  }
  .header__cta{ display:none; }
  .burger{ display:flex; z-index:101; }
  .theme-toggle{ z-index:101; }

  /* Le texte se resserre en bas ; le haut de l'écran est réservé au bracelet */
  .hero{ align-items:flex-end; padding-bottom:5.5rem; }
  .hero__copy{ max-width:100%; }
  .hero h1{ font-size:2.55rem; margin-bottom:1rem; }
  .hero .lead{ font-size:.95rem; line-height:1.55; }
  .hero__actions{ margin:1.5rem 0 0; gap:.6rem; }
  .hero__actions .btn{ padding:.75rem 1.2rem; font-size:.86rem; }
  .hero__points{ display:none; }   /* repris en détail dans les sections suivantes */
  .scroll-hint{ display:none; }

  .section--tall{ min-height:100svh; align-items:flex-end; padding-bottom:8vh; }
  .side-left .wrap,.side-right .wrap{ justify-content:center; }
  .panel{
    max-width:100%; padding:1.7rem;
    background:color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
  }
  .panel h3{ font-size:1.2rem; }
  .panel p{ font-size:.92rem; }

  .split{ grid-template-columns:1fr; gap:1rem; }
  .grid--2,.grid--3{ grid-template-columns:1fr; }
  .grid--rule .cell{
    border-right:none; padding:1.7rem 0;
    border-bottom:1px solid var(--border);
  }
  .grid--rule .cell:not(:first-child){ padding-left:0; border-top:none; }
  .grid.offers{ gap:.8rem; }
  .buttons-grid{ grid-template-columns:1fr; }
  .buttons-grid > *:nth-child(1),
  .buttons-grid > *:nth-child(2){ grid-column:1; }

  .steps{ grid-template-columns:1fr; }
  .step,.step + .step{ padding:1.5rem 0; border-left:none; padding-left:0; }

  .palette{ min-height:135vh; padding:9vh 0 8vh; }

  .roster__head{ display:none; }
  .roster__row{ grid-template-columns:1fr auto; gap:.3rem 1rem; padding:1.1rem 0; }
  .roster__spec{ grid-row:1; grid-column:2; justify-self:end; }
  .roster__role{ grid-column:1 / -1; font-size:.85rem; color:var(--text-3); }
  .values__list li{ font-size:1.25rem; }

  .form{ grid-template-columns:1fr; padding:1.6rem; }
  .console__body{ grid-template-columns:1fr; }
  .console__map{ min-height:220px; border-right:none; border-bottom:1px solid var(--border); }
  .contact-list li{ grid-template-columns:1fr; gap:.2rem; }
  .footer__grid{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}