/* ==========================================================================
   kappn.ai · Charte graphique Kappn V1
   Bleu encre, beige, bleu, bleu vibrant. Articulat CF pour le texte,
   Fraunces 144 pt pour les titres, un seul mot en italique par titre.
   Photos et écrans à bords arrondis, ombre légère, trame de points animés.
   ========================================================================== */

@font-face{font-family:"Fraunces 144";src:url(fonts/fraunces-144-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces 144";src:url(fonts/fraunces-144-semibold-italic.woff2) format("woff2");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Articulat CF";src:url(fonts/articulat-cf-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --encre:#0E1537; --nuit:#0A1030;
  --beige:#F4F2EC; --beige-2:#ECE8DD; --papier:#FBFAF7;
  --bleu:#ADC0ED; --vibrant:#5A86F0;
  --texte:#0E1537; --texte-2:rgba(14,21,55,.74); --texte-3:rgba(14,21,55,.58);
  --clair:#F4F2EC; --clair-2:rgba(244,242,236,.80); --clair-3:rgba(244,242,236,.62);
  --serif:"Fraunces 144","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Articulat CF","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --max:1200px; --gut:clamp(20px,5vw,64px);
  --nav:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav) + 12px)}
body{margin:0;background:var(--beige);color:var(--texte);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
::selection{background:var(--bleu);color:var(--encre)}
:focus-visible{outline:2px solid var(--vibrant);outline-offset:3px}

.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{width:100%;max-width:calc(var(--max) + 2 * var(--gut));margin:0 auto;padding:0 var(--gut)}
.evitement{position:fixed;left:12px;top:-64px;z-index:200;background:var(--beige);color:var(--encre);padding:12px 18px;border-radius:999px;text-decoration:none;transition:top .25s var(--ease)}
.evitement:focus{top:12px}

/* ---------- Défilement doux (Lenis 1.3) ---------- */
html.lenis,html.lenis body{height:auto}
/* Depuis Lenis 1.3, « lenis-smooth » n'est posée que pendant un défilement : on s'accroche à « lenis » */
html.lenis{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}

/* ---------- Typographie ---------- */
.titre{font-family:var(--serif);font-weight:400;letter-spacing:-.022em;line-height:1.02;text-wrap:balance}
.titre em{font-style:italic;font-weight:600;letter-spacing:-.012em;padding-right:.04em}
.sombre .titre em{color:var(--bleu)}
h1.titre{font-size:clamp(50px,5.2vw + 22px,122px);line-height:.95;letter-spacing:-.028em}
h2.titre{font-size:clamp(40px,3.5vw + 20px,84px)}
.chapo{font-size:clamp(18px,.45vw + 15.5px,21px);line-height:1.55;color:var(--texte-2);max-width:32em;text-wrap:pretty}
.sombre{color:var(--clair)}
.sombre .chapo{color:rgba(244,242,236,.9)}

/* Étiquette de section : la pastille à filet de la charte */
.etiquette{display:flex;align-items:center;gap:14px;margin-bottom:clamp(22px,2.4vw,34px)}
.pastille{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 16px;border:1px solid rgba(14,21,55,.30);border-radius:999px;font-size:14px;line-height:1;white-space:nowrap}
.sombre .pastille{border-color:rgba(244,242,236,.32)}
.filet{flex:1;height:1px;background:linear-gradient(90deg,rgba(14,21,55,.24),rgba(14,21,55,0))}
.sombre .filet{background:linear-gradient(90deg,rgba(244,242,236,.28),rgba(244,242,236,0))}

/* ---------- Boutons ---------- */
.btn{--h:54px;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--h);padding:0 26px;border-radius:999px;border:1px solid transparent;font:400 16px/1 var(--sans);letter-spacing:.005em;text-decoration:none;white-space:nowrap;transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .2s var(--ease)}
.btn:active{transform:scale(.98)}
.btn svg{width:16px;height:16px;flex:none;transition:transform .45s var(--ease)}
.btn:hover .fl{transform:translateX(3px)}
.btn:hover .ext{transform:translate(2px,-2px)}
.btn-encre{background:var(--encre);color:var(--beige)}
.btn-encre:hover{background:#1C2763}
.btn-beige{background:var(--beige);color:var(--encre)}
.btn-beige:hover{background:#fff}
.btn-contour{background:transparent;border-color:rgba(14,21,55,.30);color:var(--encre)}
.btn-contour:hover{border-color:var(--encre);background:rgba(14,21,55,.04)}
.sombre .btn-contour{border-color:rgba(244,242,236,.36);color:var(--clair)}
.sombre .btn-contour:hover{border-color:var(--clair);background:rgba(244,242,236,.06)}
.btn-mini{--h:42px;padding:0 18px;font-size:15px}
.btn[disabled]{cursor:progress;opacity:.8}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Navigation ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;color:var(--clair);transition:background-color .45s var(--ease),box-shadow .45s var(--ease)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--nav)}
.marque{display:inline-flex;color:inherit;text-decoration:none;border-radius:6px}
.marque svg{height:25px;width:auto}
.nav-liens{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px)}
.nav-lien{font-size:15px;text-decoration:none;opacity:.82;transition:opacity .3s;white-space:nowrap}
.nav-lien:hover{opacity:1}
.nav .btn-mini{background:transparent;border-color:rgba(244,242,236,.38);color:var(--clair)}
.nav .btn-mini:hover{background:var(--beige);color:var(--encre);border-color:var(--beige)}
.nav.solide{background:rgba(14,21,55,.97);box-shadow:0 1px 0 rgba(244,242,236,.08)}
.nav--clair{color:var(--encre)}
.nav--clair .btn-mini{border-color:rgba(14,21,55,.30);color:var(--encre)}
.nav--clair .btn-mini:hover{background:var(--encre);color:var(--beige);border-color:var(--encre)}
.nav--clair.solide{background:rgba(244,242,236,.97);box-shadow:0 1px 0 rgba(14,21,55,.08)}
@media (max-width:560px){.nav-lien--large{display:none}}

/* ---------- Fonds ---------- */
.fond-encre{position:relative;isolation:isolate;background:
  radial-gradient(54% 64% at 78% 44%,rgba(90,134,240,.26) 0%,rgba(90,134,240,0) 64%),
  radial-gradient(62% 72% at 0% 106%,rgba(4,7,24,.62) 0%,rgba(4,7,24,0) 62%),
  linear-gradient(172deg,#151D49 0%,#0E1537 52%,#0A1030 100%)}
.grain::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.section{position:relative;padding:clamp(84px,10vw,148px) 0}

/* ---------- Héros ---------- */
.hero{overflow:hidden;padding:calc(var(--nav) + clamp(30px,5.5vw,76px)) 0 clamp(72px,8vw,120px)}
.hero-grille{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:clamp(36px,4.4vw,76px);align-items:center}
.hero h1{margin:0}
.attente .chapo{max-width:27em;color:var(--clair)}
@media (max-width:1023px){
  .hero-grille{grid-template-columns:1fr}
  .hero .scene{max-width:520px;margin:8px auto 0;width:100%}
}

/* Formulaire de liste d'attente */
.inscription{margin-top:clamp(28px,3vw,38px);max-width:600px}
.champ{display:flex;align-items:center;gap:6px;padding:6px;border-radius:999px;background:rgba(244,242,236,.07);border:1px solid rgba(244,242,236,.24);transition:border-color .3s var(--ease),background-color .3s var(--ease)}
.champ:focus-within{border-color:rgba(173,192,237,.85);background:rgba(244,242,236,.10)}
.champ input{flex:1;min-width:0;height:52px;padding:0 10px 0 22px;background:transparent;border:0;outline:0;font-size:16px;color:var(--clair)}
.champ input::placeholder{color:rgba(244,242,236,.58)}
.champ .btn{--h:52px}
.inscription .note{margin-top:14px;font-size:15px;line-height:1.5;color:rgba(244,242,236,.72)}
.message{margin-top:12px;font-size:15.5px;line-height:1.45}
.message:empty{display:none}
.message.ko{color:var(--clair)}
.message.ko::before{content:"";display:inline-block;width:8px;height:8px;margin-right:10px;border-radius:50%;background:var(--bleu);vertical-align:1px}
.inscription.fait .champ,.inscription.fait .note{display:none}
.inscription.fait .message{display:flex;align-items:center;gap:14px;font-size:18px;color:var(--clair);margin-top:0}
.inscription.fait .message::before{content:"";flex:none;width:40px;height:40px;border-radius:50%;background:var(--bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1537' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center/20px no-repeat}
/* Variante sur fond beige */
.inscription--clair .champ{background:var(--papier);border-color:rgba(14,21,55,.16)}
.inscription--clair .champ:focus-within{border-color:var(--vibrant);background:#fff}
.inscription--clair .champ input{color:var(--encre)}
.inscription--clair .champ input::placeholder{color:rgba(14,21,55,.48)}
.inscription--clair .note{color:var(--texte-3)}
.inscription--clair .message.ko,.inscription--clair.fait .message{color:var(--encre)}
.inscription--clair.fait .message::before{background-color:var(--encre);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F2EC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E")}
.inscription--clair .message.ko::before{background:var(--vibrant)}
@media (max-width:540px){
  .champ{flex-direction:column;align-items:stretch;border-radius:28px;padding:6px}
  .champ input{height:52px;padding:0 18px;text-align:left}
  .champ .btn{width:100%}
}

/* Preuves, séparées par des filets qui s'éteignent */
.preuves{display:flex;flex-wrap:wrap;align-items:center;gap:12px 0;margin-top:clamp(30px,3.4vw,44px);font-size:17px;color:rgba(244,242,236,.88)}
.preuves li{display:flex;align-items:center}
.preuves li+li::before{content:"";width:1px;height:20px;margin:0 20px;background:linear-gradient(180deg,rgba(244,242,236,0),rgba(244,242,236,.38),rgba(244,242,236,0))}
.preuves li:first-child{color:var(--clair)}
/* Colonne de texte étroite : les preuves passent en liste, sans filet orphelin en début de ligne */
.hero-texte{container-type:inline-size}
@container (max-width:600px){
  .preuves{flex-direction:column;align-items:flex-start;gap:10px}
  .preuves li::before,.preuves li+li::before{content:"";width:5px;height:5px;margin:0 12px 0 0;border-radius:50%;background:var(--bleu);flex:none}
}

/* ---------- La scène : trois téléphones sur un panneau bleu ---------- */
.scene{position:relative;width:100%;container-type:inline-size;aspect-ratio:100/108}
.scene-panneau{position:absolute;left:11cqw;top:15cqw;width:86cqw;height:86cqw;border-radius:4.6cqw;background:linear-gradient(150deg,#C4D2F4 0%,#ADC0ED 48%,#96ACE2 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.tel{position:absolute;margin:0;background:#0B1130;padding:1.15cqw;border-radius:6.4cqw;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 2.6cqw 4.6cqw rgba(4,8,24,.42),0 7cqw 11cqw rgba(4,8,24,.34)}
.tel::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;pointer-events:none;background:linear-gradient(116deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 22%,rgba(255,255,255,0) 44%)}
.tel .ecran{position:relative;width:100%;height:100%;overflow:hidden;border-radius:5.25cqw;background:#1B2146;isolation:isolate}
.tel .ecran img,.tel .ecran video{width:100%;height:100%;object-fit:cover}
.ilot{position:absolute;z-index:4;top:2.2cqw;left:50%;width:27%;height:2.5cqw;transform:translateX(-50%);border-radius:2cqw;background:#0B1130}
.segments{position:absolute;z-index:4;left:4.4cqw;right:4.4cqw;top:5.9cqw;display:flex;gap:.9cqw}
.segments i{position:relative;flex:1;height:.55cqw;min-height:2px;border-radius:1cqw;background:rgba(255,255,255,.42);overflow:hidden}
.segments i.fait{background:#fff}
.segments b{position:absolute;inset:0;background:#fff;transform-origin:left center;transform:scaleX(0)}
.tel-g{left:3.5cqw;top:27cqw;width:29cqw;height:57cqw;padding:.95cqw;border-radius:5cqw}
.tel-g .ecran{border-radius:4.1cqw}
.tel-d{left:67.5cqw;top:33cqw;width:29cqw;height:57cqw;padding:.95cqw;border-radius:5cqw}
.tel-d .ecran{border-radius:4.1cqw}
.tel-g .ilot,.tel-d .ilot{height:2cqw;top:1.8cqw}
.tel-g .segments,.tel-d .segments{top:4.8cqw;left:3.4cqw;right:3.4cqw}
.tel-c{left:31cqw;top:7cqw;width:38cqw;height:74cqw;z-index:2}
/* Les photos bougent comme dans une vidéo Kappn : un lent travelling */
.tel-g .ecran img{animation:travelling-avant 9s ease-in-out infinite alternate}
.tel-d .ecran img{animation:travelling-arriere 11s ease-in-out infinite alternate}
@keyframes travelling-avant{from{transform:scale(1.03) translate3d(0,1.2%,0)}to{transform:scale(1.17) translate3d(0,-1.6%,0)}}
@keyframes travelling-arriere{from{transform:scale(1.18) translate3d(1.5%,0,0)}to{transform:scale(1.04) translate3d(-1%,0,0)}}
.tel-g .segments b{animation:remplit 9s linear infinite}
.tel-d .segments b{animation:remplit 11s linear infinite}
@keyframes remplit{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.scene.arret .ecran img,.scene.arret .segments b{animation-play-state:paused}
/* Profondeur au survol de la souris */
.scene .tel,.scene .scene-panneau{translate:calc(var(--px,0) * var(--p,0px)) calc(var(--py,0) * var(--p,0px))}
@media (hover:hover) and (pointer:fine){.attente .scene .tel,.attente .scene .scene-panneau{will-change:translate}}
.tel-g{--p:-10px}.tel-d{--p:-12px}.tel-c{--p:-5px}.scene-panneau{--p:4px}

/* Commandes de la vidéo, sous le téléphone central */
.commandes{position:absolute;z-index:3;left:50%;top:84.5cqw;transform:translateX(-50%);display:flex;gap:8px}
.cmd{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.62);background:rgba(255,255,255,.42);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);color:var(--encre);font-size:14px;line-height:1;white-space:nowrap;transition:background-color .3s var(--ease)}
.cmd:hover{background:rgba(255,255,255,.66)}
.cmd svg{width:15px;height:15px;flex:none}
.cmd-rond{width:40px;padding:0;justify-content:center}
.cmd .i-lecture,.cmd[aria-pressed="true"] .i-pause{display:none}
.cmd[aria-pressed="true"] .i-lecture{display:block}


/* ---------- Accueil : un seul écran, sans défilement ---------- */
.attente{min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.attente-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:clamp(62px,9svh,84px)}
.attente-main{display:flex;align-items:center;min-height:0;padding-block:clamp(4px,1.6svh,22px)}
.attente-main .hero-grille{width:100%}
.attente h1.titre{font-size:clamp(40px,min(5.2vw + 22px,10.8svh),122px)}
.attente .chapo{font-size:clamp(16.5px,min(.75vw + 13.5px,2.75svh),24px)}
.attente .titre + .chapo{margin-top:clamp(12px,2.2svh,26px)}
.attente .inscription{margin-top:clamp(16px,3.2svh,36px)}
.attente .inscription .note{margin-top:clamp(8px,1.4svh,14px)}
.attente .preuves{margin-top:clamp(14px,3svh,38px)}
.scene-zone{display:flex;align-items:center;justify-content:flex-end;min-width:0}
.attente .scene{width:min(100%,calc((100svh - 190px) * .9))}
.commandes--zone{display:none}
.attente-pied{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 24px;padding-block:clamp(12px,2.2svh,22px);font-size:13px;color:rgba(244,242,236,.6)}
.attente-liens{display:flex;flex-wrap:wrap;gap:6px 20px}
.attente-liens a{text-decoration:none;color:rgba(244,242,236,.74);transition:color .25s}
.attente-liens a:hover{color:var(--clair)}
@media (max-width:1023px){
  /* Téléphone et tablette : le texte d'abord, les téléphones dépassent du bas de l'écran */
  .attente-main{align-items:stretch;padding-bottom:0}
  .attente .hero-grille{display:flex;flex-direction:column;align-items:stretch;gap:clamp(14px,2.6svh,28px)}
  .attente .preuves{display:none}
  .scene-zone{position:relative;display:block;flex:1 1 auto;min-height:clamp(130px,26svh,460px);margin:0 calc(-1 * var(--gut));overflow:hidden}
  .attente .scene{position:absolute;top:clamp(0px,1.2svh,14px);left:50%;width:min(560px,112vw);margin-left:calc(min(560px,112vw) / -2)}
  .commandes--scene{display:none}
  .commandes--zone{display:flex;top:auto;bottom:14px;z-index:6}
  /* Les téléphones se fondent dans le fond au lieu d'être coupés net */
  .scene-zone::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;z-index:5;pointer-events:none;background:linear-gradient(180deg,rgba(10,16,48,0),rgba(10,16,48,.9))}
  .pied-adresse{display:none}
}
@media (max-width:520px){.chapo-suite{display:none}}

/* ---------- Kappn Agency ---------- */
.agency-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(44px,6vw,96px);align-items:center}
.agency-grille .chapo{margin-bottom:clamp(26px,3vw,34px)}
.preuve-ligne{display:flex;align-items:center;gap:12px;margin-top:clamp(24px,2.6vw,32px);font-size:15px;color:var(--clair-2)}
.preuve-ligne .chiffre{flex:none;white-space:nowrap;font-family:var(--serif);font-weight:400;font-size:40px;line-height:1;letter-spacing:-.02em;color:var(--clair)}
.agency-visuel{position:relative;width:100%;container-type:inline-size;aspect-ratio:100/88}
.agency-panneau{position:absolute;left:12cqw;top:9cqw;right:0;bottom:0;border-radius:4.6cqw;background:linear-gradient(148deg,#6D95F6 0%,#5A86F0 44%,#4571DF 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.24)}
.appareil{position:absolute;margin:0;filter:drop-shadow(0 2cqw 3.2cqw rgba(4,8,24,.40)) drop-shadow(0 6cqw 9cqw rgba(4,8,24,.30))}
.appareil img{width:100%;height:auto}
.appareil-ecran{left:0;top:15cqw;width:72cqw;height:62cqw;overflow:hidden;border-radius:2.4cqw}
.appareil-ecran img{border-radius:2.4cqw}
.appareil-tablette{right:5cqw;top:30cqw;width:33cqw}
.appareil::after{content:"";position:absolute;inset:0;border-radius:2.4cqw;pointer-events:none;background:linear-gradient(116deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.04) 24%,rgba(255,255,255,0) 46%)}
@media (max-width:900px){.agency-grille{grid-template-columns:1fr}.agency-visuel{max-width:560px}}

/* ---------- Liste d'attente finale, sur la trame de points ---------- */
.final{overflow:hidden}
.trame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.final-in{position:relative;z-index:1;max-width:680px}
.final .chapo{margin:clamp(18px,2vw,24px) 0 0}
.suivre{margin-top:clamp(26px,3vw,34px);font-size:15px;color:var(--texte-3)}
.suivre a{color:var(--texte);text-underline-offset:4px;text-decoration-color:rgba(14,21,55,.3)}
.suivre a:hover{text-decoration-color:currentColor}

/* ---------- Pied de page ---------- */
.pied{padding:clamp(48px,5vw,64px) 0 28px;border-top:1px solid rgba(14,21,55,.10);font-size:15px;color:var(--texte-2)}
.pied-grille{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:28px 48px}
.pied .marque{color:var(--encre)}
.pied .marque svg{height:24px}
.pied-texte{margin-top:14px;max-width:26em}
.pied-liens{display:grid;grid-template-columns:repeat(2,auto);gap:10px 44px}
.pied-liens a{text-decoration:none;color:var(--texte-2);transition:color .25s}
.pied-liens a:hover{color:var(--encre)}
.pied-bas{margin-top:clamp(36px,4vw,52px);padding-top:18px;border-top:1px solid rgba(14,21,55,.08);font-size:13px;color:var(--texte-3)}
@media (max-width:560px){.pied-liens{grid-template-columns:1fr}}

/* ---------- Page Kappn Agency ---------- */
.ag-hero{padding:calc(var(--nav) + clamp(34px,6vw,84px)) 0 clamp(72px,8vw,120px);overflow:hidden}
.ag-hero .chapo{margin-bottom:clamp(28px,3vw,36px)}
.ag-hero .preuve-ligne{color:var(--texte-2)}
.ag-hero .preuve-ligne .chiffre{color:var(--encre)}
.offre{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(22px,5vw,88px);padding:clamp(34px,4vw,52px) 0;border-top:1px solid rgba(244,242,236,.14)}
.offre:last-child{border-bottom:1px solid rgba(244,242,236,.14)}
.offre h3{font-family:var(--serif);font-weight:400;font-size:clamp(32px,2vw + 16px,50px);line-height:1.04;letter-spacing:-.02em}
.offre h3 em{font-style:italic;font-weight:600;color:var(--bleu);padding-right:.04em}
.offre p{color:var(--clair-2);font-size:17px;line-height:1.62;max-width:34em}
.offre .lien-fleche{margin-top:20px}
.lien-fleche{display:inline-flex;align-items:center;gap:10px;font-size:16px;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px;transition:gap .35s var(--ease)}
.lien-fleche svg{width:15px;height:15px}
.lien-fleche:hover{gap:14px}
.sombre .lien-fleche{color:var(--clair)}
@media (max-width:820px){.offre{grid-template-columns:1fr}}
.methode{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(40px,4.6vw,64px)}
.methode li{position:relative;padding:0 clamp(18px,2.6vw,40px)}
.methode li:first-child{padding-left:0}
.methode li:last-child{padding-right:0}
.methode li+li::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:linear-gradient(180deg,rgba(14,21,55,0),rgba(14,21,55,.22) 25%,rgba(14,21,55,.22) 75%,rgba(14,21,55,0))}
.methode h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,1.2vw + 15px,34px);line-height:1.1;letter-spacing:-.015em;margin-bottom:12px}
.methode p{color:var(--texte-2);font-size:16.5px}
@media (max-width:760px){
  .methode{grid-template-columns:1fr}
  .methode li,.methode li:first-child,.methode li:last-child{padding:26px 0 0}
  .methode li:first-child{padding-top:0}
  .methode li+li{margin-top:26px;border-top:1px solid rgba(14,21,55,.12)}
  .methode li+li::before{display:none}
}
.note-devis{margin-top:clamp(32px,3.4vw,44px);font-size:16px;color:var(--texte-2)}
.societe{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(22px,5vw,88px);align-items:start}
.societe p{font-size:17.5px;color:var(--texte-2);line-height:1.62;max-width:34em}
.societe p+p{margin-top:16px}
.societe .lien-fleche{margin-top:24px}
@media (max-width:820px){.societe{grid-template-columns:1fr}}

/* Espacements communs */
.titre + .chapo{margin-top:clamp(18px,2vw,26px)}
.titre-bloc{margin-bottom:clamp(30px,3.6vw,52px)}
.actions-final{margin-top:clamp(28px,3vw,36px)}
.section--serree{padding-top:0}
.section--serree .wrap{border-top:1px solid rgba(14,21,55,.12);padding-top:clamp(52px,5.4vw,80px)}

/* ---------- Apparitions ---------- */
@keyframes monte{from{transform:translate3d(0,22px,0)}to{transform:none}}
@keyframes apparait{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:none}}
.entree{animation:monte 1.1s var(--ease) both}
.entree-2{animation:apparait 1.1s .1s var(--ease) both}
.entree-3{animation:apparait 1.1s .2s var(--ease) both}
.entree-4{animation:apparait 1.2s .28s var(--ease) both}
.js .rv{opacity:0;transform:translate3d(0,28px,0);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .rv.vu{opacity:1;transform:none}
.js .rv-2{transition-delay:.09s}
.js .rv-3{transition-delay:.18s}

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