/* ai.reanova.fr : deux mondes (ChatGPT, nuit et menthe ; Claude, crème et argile)
   départagés par le vert Reanova. Police : Archivo variable (graisse + largeur). */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --papier: oklch(0.972 0.008 105);
  --papier-2: oklch(0.945 0.011 105);
  --encre: oklch(0.22 0.018 155);
  --encre-2: oklch(0.45 0.016 155);
  --trait: oklch(0.87 0.012 105);
  --vert: oklch(0.76 0.17 127);
  --vert-fonce: oklch(0.5 0.12 128);
  --orange: oklch(0.68 0.18 50);
  --rouge: oklch(0.52 0.18 28);

  /* Monde ChatGPT */
  --nuit: oklch(0.205 0.028 172);
  --nuit-2: oklch(0.265 0.032 172);
  --nuit-trait: oklch(0.36 0.03 172);
  --nuit-texte: oklch(0.955 0.012 165);
  --nuit-texte-2: oklch(0.8 0.03 170);
  --menthe: oklch(0.85 0.12 168);

  /* Monde Claude */
  --creme: oklch(0.955 0.02 80);
  --creme-2: oklch(0.925 0.028 76);
  --creme-trait: oklch(0.84 0.032 70);
  --creme-texte: oklch(0.25 0.025 50);
  --creme-texte-2: oklch(0.46 0.035 50);
  --argile: oklch(0.67 0.14 42);
  --argile-fonce: oklch(0.52 0.135 38);

  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --rayon: 28px;
  --gouttiere: clamp(16px, 4vw, 56px);
  --largeur: 1280px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--papier); color: var(--encre);
  font: 400 1.0625rem/1.6 "Archivo", "Segoe UI", system-ui, sans-serif;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
main { flex: 1; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
strong { font-weight: 700; }
::selection { background: var(--vert); color: var(--encre); }
:focus-visible { outline: 3px solid var(--vert); outline-offset: 3px; border-radius: 6px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: 16px; top: -60px; z-index: 20; background: var(--encre); color: var(--papier); padding: 10px 16px; border-radius: 8px; }
.evitement:focus { top: 12px; }

/* -- Barre ----------------------------------------------------------------------------- */
.barre {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 12px var(--gouttiere);
}
.marque-reanova img { display: block; height: 46px; width: auto; mix-blend-mode: multiply; }
.barre-titre {
  font-weight: 600; font-stretch: 112%; font-size: .92rem; color: var(--encre-2);
  padding-left: 18px; border-left: 1px solid var(--trait);
}
.barre-actions { margin-left: auto; display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; }
.barre-actions form { margin: 0; }
.lien-barre {
  font-weight: 650; font-stretch: 108%; text-decoration: none; font-size: .95rem;
  padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--encre);
  transition: background-color .25s var(--ease-quart), color .25s var(--ease-quart);
}
.lien-barre:hover { background: var(--encre); color: var(--papier); }
.qui { font-weight: 600; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bouton-discret {
  font: inherit; font-size: .92rem; color: var(--encre-2); background: none; border: 0; cursor: pointer;
  padding: 6px 10px; border-radius: 8px; transition: background-color .2s, color .2s;
}
.bouton-discret:hover { color: var(--encre); background: var(--papier-2); }

/* -- Emblèmes -------------------------------------------------------------------------- */
.marque { display: block; overflow: visible; }
.marque .trace { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.rosace .trace { stroke-width: 5.5; }
.etincelle .trace { stroke-width: 7.5; }
.pause .trace { stroke-width: 6; }
.marque-rot { transform-box: fill-box; transform-origin: center; }
.rosace .marque-rot { animation: tourner 48s linear infinite; }
.etincelle .marque-rot { animation: tourner 72s linear infinite reverse; }
.etincelle .rayon { transform-box: fill-box; transform-origin: 50% 100%; animation: respirer 3.6s ease-in-out infinite alternate; }
.etincelle g:nth-of-type(3n+1) .rayon { animation-delay: -1.2s; }
.etincelle g:nth-of-type(3n+2) .rayon { animation-delay: -2.4s; }

@keyframes tourner { to { transform: rotate(360deg); } }
@keyframes respirer { from { transform: scaleY(.84); } to { transform: scaleY(1.04); } }
@keyframes tracer { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* -- Scène ----------------------------------------------------------------------------- */
.scene {
  --seam: 50; --px: 0; --py: 0;
  position: relative; isolation: isolate; overflow: hidden;
  margin: 0 clamp(8px, 1.4vw, 20px);
  height: clamp(600px, calc(100svh - 84px), 900px);
  border-radius: var(--rayon);
  touch-action: pan-y;
  animation: ouvrir 1.5s var(--ease-expo) .1s both;
}
@keyframes ouvrir {
  from { clip-path: inset(6% 50% 6% 50% round var(--rayon)); }
  to { clip-path: inset(0 0 0 0 round var(--rayon)); }
}
.monde { position: absolute; inset: 0; }
.monde-claude { background: var(--creme); color: var(--creme-texte); }
.monde-chatgpt {
  background: var(--nuit); color: var(--nuit-texte);
  clip-path: inset(0 calc(100% - var(--seam) * 1%) 0 0);
  pointer-events: none;
}

.scene-marque {
  position: absolute; top: 50%; width: clamp(260px, 38vw, 600px); aspect-ratio: 1;
  translate: 0 -50%;
  transform: translate3d(calc(var(--px) * 22px), calc(var(--py) * 16px), 0);
}
.scene-marque.gauche { left: calc(-1 * clamp(90px, 11vw, 200px)); }
.scene-marque.droite { right: calc(-1 * clamp(90px, 11vw, 200px)); transform: translate3d(calc(var(--px) * -22px), calc(var(--py) * -16px), 0); }
.scene-marque .trace { stroke-dasharray: 1; animation: tracer 2.4s var(--ease-quint) .7s both; }
.scene-marque.etincelle .trace { animation: tracer 2s var(--ease-quint) .9s both, respirer 3.6s ease-in-out infinite alternate; }
.scene-marque.etincelle g:nth-of-type(3n+1) .trace { animation-delay: 1s, -1.2s; }
.scene-marque.etincelle g:nth-of-type(3n+2) .trace { animation-delay: 1.1s, -2.4s; }
/* Chaque monde montre son emblème, et l'autre en filigrane. */
.monde-chatgpt .rosace { color: var(--menthe); }
.monde-chatgpt .etincelle { color: var(--nuit-texte); opacity: .07; }
.monde-claude .etincelle { color: var(--argile); }
.monde-claude .rosace { color: var(--creme-texte); opacity: .07; }

.scene-nom {
  position: absolute; top: clamp(20px, 3vw, 36px); display: flex; flex-direction: column; line-height: 1.15;
  animation: fondu 1s var(--ease-expo) 1.3s both;
}
.scene-nom.gauche { left: clamp(20px, 3vw, 40px); }
.scene-nom.droite { right: clamp(20px, 3vw, 40px); text-align: right; }
.scene-nom-titre { font-weight: 800; font-stretch: 125%; font-size: clamp(1.05rem, 1.6vw, 1.3rem); letter-spacing: -.01em; }
.scene-nom-editeur { font-size: .85rem; opacity: .72; }

.scene-texte {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 96px var(--gouttiere) 120px;
}
.surtitre {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .9rem; font-weight: 650; font-stretch: 110%;
  padding: 7px 16px 7px 12px; border-radius: 999px; border: 1.5px solid currentColor;
  margin-bottom: clamp(20px, 3.2vw, 36px);
  animation: monter-doux 1s var(--ease-expo) .55s both;
}
.surtitre .point { width: 8px; height: 8px; border-radius: 50%; background: var(--vert); box-shadow: 0 0 0 4px color-mix(in oklch, var(--vert) 30%, transparent); }
.titre {
  font-size: clamp(3rem, 11.4vw, 11rem); font-weight: 820; font-stretch: 125%;
  line-height: .86; letter-spacing: -.045em; margin: 0;
}
.mot { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .06em; margin-bottom: -.06em; }
.mot > span { display: inline-block; animation: monter 1.2s var(--ease-expo) both; }
.titre .mot:nth-of-type(1) > span { animation-delay: .45s; }
.titre .mot:nth-of-type(2) > span { animation-delay: .55s; }
.titre .mot:nth-of-type(3) > span { animation-delay: .68s; }
.titre .mot:nth-of-type(4) > span { animation-delay: .78s; }
@keyframes monter { from { transform: translateY(108%); } to { transform: none; } }
@keyframes monter-doux { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }

.chapo {
  max-width: 44ch; margin-top: clamp(22px, 3vw, 34px);
  font-size: clamp(1.05rem, 1.55vw, 1.3rem); line-height: 1.5;
  animation: monter-doux 1s var(--ease-expo) 1s both;
}
.monde-claude .chapo { color: var(--creme-texte-2); }
.monde-chatgpt .chapo { color: var(--nuit-texte-2); }
.chapo strong { font-weight: 700; }
.monde-claude .chapo strong { color: var(--creme-texte); }
.monde-chatgpt .chapo strong { color: var(--nuit-texte); }

.cta {
  display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(26px, 3.4vw, 40px);
  padding: 17px 28px 17px 30px; border-radius: 999px;
  background: var(--vert); color: var(--encre); text-decoration: none;
  font-weight: 720; font-stretch: 112%; font-size: 1.08rem;
  box-shadow: 0 10px 30px -12px color-mix(in oklch, var(--vert-fonce) 70%, transparent);
  transition: transform .45s var(--ease-expo), box-shadow .45s var(--ease-expo);
  animation: monter-doux 1s var(--ease-expo) 1.15s both;
}
.cta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease-expo); }
/* La copie du monde ChatGPT recouvre le vrai bouton : elle reflète son survol et son focus. */
.cta:hover, .scene:has(.monde-claude .cta:hover) .monde-chatgpt .cta { transform: translateY(-3px); box-shadow: 0 18px 36px -14px color-mix(in oklch, var(--vert-fonce) 80%, transparent); }
.cta:hover svg, .scene:has(.monde-claude .cta:hover) .monde-chatgpt .cta svg { transform: translateY(3px); }
.scene:has(.monde-claude .cta:focus-visible) .monde-chatgpt .cta { outline: 3px solid var(--menthe); outline-offset: 4px; }
.cta:active { transform: translateY(0) scale(.98); }

.couture {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  transform: translate3d(calc(var(--seam) * 1%), 0, 0);
}
.couture::before {
  content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--vert);
  transform-origin: 50% 50%; animation: tirer 1.3s var(--ease-expo) .15s both;
}
@keyframes tirer { from { transform: scaleY(0); } to { transform: none; } }
.ou {
  position: absolute; left: 0; bottom: clamp(24px, 4vw, 44px); translate: -50% 0;
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: var(--vert); color: var(--encre);
  font-weight: 800; font-stretch: 125%; font-size: 1.1rem; letter-spacing: -.02em;
  animation: poser .9s var(--ease-expo) 1.2s both;
}
.ou::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--vert);
  animation: onde 2.8s var(--ease-quart) 2.2s infinite;
}
@keyframes poser { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes onde { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }

/* -- Révélations au défilement --------------------------------------------------------- */
.js [data-revele] {
  opacity: 0; transform: translateY(32px);
  transition: opacity 1s var(--ease-expo), transform 1.1s var(--ease-expo);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.js [data-revele].visible { opacity: 1; transform: none; }

/* -- Sections : titres ----------------------------------------------------------------- */
h2 {
  font-size: clamp(2.3rem, 5.4vw, 4.6rem); font-weight: 800; font-stretch: 118%;
  line-height: .95; letter-spacing: -.035em; text-wrap: balance;
}

/* -- Offres ---------------------------------------------------------------------------- */
.offres-section { padding: clamp(96px, 13vw, 180px) var(--gouttiere) clamp(72px, 9vw, 120px); }
.section-tete {
  max-width: var(--largeur); margin: 0 auto clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px 48px; align-items: end;
}
.section-tete p { color: var(--encre-2); font-size: 1.12rem; max-width: 46ch; }
.section-tete p strong { color: var(--encre); }

.offres {
  max-width: var(--largeur); margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px);
}
.offre {
  --accent: var(--menthe); --texte-2: var(--nuit-texte-2); --trait-offre: var(--nuit-trait);
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  padding: clamp(28px, 4vw, 56px); border-radius: var(--rayon);
  min-height: 660px;
}
.js .offre[data-revele] { transition: opacity 1s var(--ease-expo), transform 1.1s var(--ease-expo), outline-color .3s; }
.offre-chatgpt { background: var(--nuit); color: var(--nuit-texte); }
.offre-claude {
  --accent: var(--argile); --texte-2: var(--creme-texte-2); --trait-offre: var(--creme-trait);
  background: var(--creme); color: var(--creme-texte);
}
.offres:has(.offre:hover) .offre:not(:hover) { opacity: .78; }
.js .offres:has(.offre:hover) .offre.visible:not(:hover) { opacity: .78; }
.offre:hover, .js .offre.visible:hover { transform: translateY(-6px); }

.offre-marque {
  position: absolute; z-index: -1; width: clamp(220px, 22vw, 320px); aspect-ratio: 1;
  top: calc(-1 * clamp(60px, 6.5vw, 100px)); right: calc(-1 * clamp(60px, 6.5vw, 100px));
  color: var(--accent); opacity: .9;
  transition: transform 1.2s var(--ease-expo), opacity .6s;
}
.offre:hover .offre-marque { transform: scale(1.08) rotate(-8deg); opacity: 1; }
.offre-claude:hover .offre-marque { transform: scale(1.08) rotate(10deg); }
.offre-marque .trace { stroke-dasharray: 1; }
.js .offre-marque .trace { stroke-dashoffset: 1; }
.js .visible .offre-marque .trace { animation: tracer 2.2s var(--ease-quint) .3s both; }
.js .visible .offre-marque.etincelle .trace { animation: tracer 1.8s var(--ease-quint) .3s both, respirer 3.6s ease-in-out infinite alternate; }

.offre-badge {
  position: absolute; top: clamp(20px, 2.6vw, 30px); left: clamp(28px, 4vw, 56px);
  font-size: .82rem; font-weight: 700; font-stretch: 110%;
  padding: 5px 12px 5px 10px; border-radius: 999px; background: var(--accent); color: var(--nuit);
  display: inline-flex; align-items: center; gap: 6px;
  opacity: 0; transform: translateY(-8px); transition: opacity .4s var(--ease-expo), transform .6s var(--ease-expo);
}
.offre-claude .offre-badge { background: var(--argile-fonce); color: var(--creme); }
.offre-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.offre.est-choisie .offre-badge, .offre.selectionnee .offre-badge { opacity: 1; transform: none; }
.offre.est-choisie, .offre.selectionnee { outline: 3px solid var(--accent); outline-offset: 5px; }
.offre-claude.est-choisie, .offre-claude.selectionnee { outline-color: var(--argile-fonce); }

.offre-tete { margin-top: clamp(110px, 11vw, 170px); }
.offre h3 { font-size: clamp(2.8rem, 5.6vw, 4.8rem); font-weight: 820; font-stretch: 125%; line-height: .9; letter-spacing: -.045em; }
.offre-editeur { margin-top: 10px; color: var(--texte-2); font-size: .95rem; }
.offre-accroche {
  margin-top: clamp(28px, 3.4vw, 44px); max-width: 22ch;
  font-size: clamp(1.35rem, 2.1vw, 1.75rem); font-weight: 620; font-stretch: 104%; line-height: 1.2; letter-spacing: -.015em;
}
.offre-texte { margin-top: 14px; max-width: 44ch; color: var(--texte-2); }
.atouts { list-style: none; padding: 0; margin: clamp(26px, 3vw, 36px) 0 clamp(28px, 3.4vw, 40px); border-top: 1px solid var(--trait-offre); }
.atouts li { display: flex; gap: 14px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--trait-offre); }
.atouts li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); transform: translateY(-2px) rotate(45deg); }

.form-choix { margin: auto 0 0; }
.choisir {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font: inherit; font-weight: 720; font-stretch: 112%; font-size: 1.1rem; cursor: pointer;
  padding: 19px 24px 19px 28px; border: 0; border-radius: 999px;
  background: var(--menthe); color: var(--nuit);
  transition: transform .5s var(--ease-expo), background-color .3s;
}
.offre-claude .choisir { background: var(--argile-fonce); color: var(--creme); }
.choisir svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease-expo); }
.choisir:hover svg { transform: translateX(5px); }
.choisir:active { transform: scale(.985); }
.choisir[disabled] { opacity: .6; cursor: progress; }
.offre-chatgpt .choisir:focus-visible { outline-color: var(--menthe); }

.commun {
  max-width: var(--largeur); margin: clamp(28px, 3.4vw, 40px) auto 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 32px;
}
.commun-titre { font-weight: 750; font-stretch: 112%; }
.commun ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; color: var(--encre-2); }
.commun li { display: inline-flex; align-items: baseline; gap: 9px; }
.commun li::before {
  content: ""; flex: none; width: 13px; height: 7px; border-left: 2.2px solid var(--vert-fonce); border-bottom: 2.2px solid var(--vert-fonce);
  transform: translateY(-3px) rotate(-45deg);
}
.aucune {
  max-width: var(--largeur); margin: 18px auto 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  color: var(--encre-2);
}
.lien-bouton {
  font: inherit; font-weight: 650; color: var(--encre); background: none; border: 0; padding: 2px 0; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
  transition: text-decoration-color .2s, color .2s;
}
.lien-bouton:hover { color: var(--vert-fonce); }

/* -- Au quotidien ---------------------------------------------------------------------- */
.quotidien {
  max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin: 0 auto;
  padding: clamp(72px, 10vw, 150px) var(--gouttiere);
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 96px); align-items: start;
  border-top: 1px solid var(--trait);
}
.quotidien h2 { font-size: clamp(2.2rem, 3.9vw, 3.6rem); }
.quotidien-texte p { margin-top: 22px; color: var(--encre-2); max-width: 40ch; font-size: 1.1rem; }
.demo { --teinte: var(--vert-fonce); padding-top: 8px; }
.demo[data-teinte="menthe"] { --teinte: oklch(0.58 0.12 168); }
.demo[data-teinte="argile"] { --teinte: var(--argile-fonce); }
.demo-barre { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; }
.demo-metier {
  font-size: .88rem; font-weight: 700; font-stretch: 110%; color: var(--teinte);
  padding: 6px 14px; border-radius: 999px; border: 1.5px solid currentColor;
  transition: color .5s var(--ease-quart);
}
.demo-compteur { font-size: .88rem; font-weight: 600; font-stretch: 90%; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.demo-saisie {
  min-height: 4.2em; /* réserve 3 lignes : pas de saut de mise en page pendant la frappe */
  font-size: clamp(1.6rem, 3vw, 2.7rem); font-weight: 520; font-stretch: 100%; line-height: 1.3; letter-spacing: -.02em;
  transition: opacity .4s var(--ease-quart), transform .4s var(--ease-quart);
}
.demo.efface .demo-saisie { opacity: 0; transform: translateY(-10px); }
.curseur {
  display: inline-block; width: .08em; height: 1em; margin-left: .06em; vertical-align: -0.12em;
  background: var(--teinte); animation: clignoter 1s steps(1) infinite;
}
.demo.tape .curseur { animation-duration: 1.1s; }
@keyframes clignoter { 50% { opacity: 0; } }
.demo-reponse { display: grid; gap: 12px; margin-top: clamp(24px, 3vw, 36px); max-width: 780px; }
.demo-reponse span {
  height: 12px; border-radius: 6px; background: color-mix(in oklch, var(--teinte) 22%, var(--papier));
  transform: scaleX(0); transform-origin: left center; transition: transform .9s var(--ease-expo), opacity .4s;
}
.demo-reponse span:nth-child(2) { width: 92%; }
.demo-reponse span:nth-child(3) { width: 97%; }
.demo-reponse span:nth-child(4) { width: 58%; }
.demo-reponse.visible span { transform: none; }
.demo-reponse.visible span:nth-child(2) { transition-delay: .12s; }
.demo-reponse.visible span:nth-child(3) { transition-delay: .24s; }
.demo-reponse.visible span:nth-child(4) { transition-delay: .36s; }
.demo.efface .demo-reponse span { opacity: 0; }

/* -- Connexion / statut ---------------------------------------------------------------- */
.rejoindre {
  max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin: 0 auto;
  padding: clamp(72px, 10vw, 140px) var(--gouttiere) clamp(80px, 10vw, 150px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: start;
  border-top: 1px solid var(--trait);
  scroll-margin-top: 8px;
}
.etapes ol { list-style: none; margin: clamp(32px, 4vw, 52px) 0 0; padding: 0; display: grid; gap: clamp(22px, 3vw, 34px); }
.etapes li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(18px, 2.4vw, 32px); align-items: start; }
.num {
  font-size: clamp(4.2rem, 8vw, 7rem); font-weight: 800; font-stretch: 62%; line-height: .78;
  color: var(--vert-fonce); min-width: .5em; font-variant-numeric: tabular-nums;
}
.etapes li p { font-size: 1.12rem; color: var(--encre-2); max-width: 40ch; padding-top: 4px; }
.etapes li strong { color: var(--encre); }

.guichet {
  --fond-g: oklch(0.99 0.004 105); --texte-g: var(--encre); --texte-g2: var(--encre-2);
  --accent-g: var(--vert); --sur-accent-g: var(--encre); --trait-g: var(--trait);
  background: var(--fond-g); color: var(--texte-g);
  border: 1px solid var(--trait-g); border-radius: var(--rayon);
  padding: clamp(28px, 4vw, 52px);
  display: flex; flex-direction: column;
  transition: background-color .6s var(--ease-quart), color .6s var(--ease-quart), border-color .6s var(--ease-quart);
  scroll-margin-top: 24px;
}
.guichet[data-offre="chatgpt"] {
  --fond-g: var(--nuit); --texte-g: var(--nuit-texte); --texte-g2: var(--nuit-texte-2);
  --accent-g: var(--menthe); --sur-accent-g: var(--nuit); --trait-g: var(--nuit-trait);
}
.guichet[data-offre="claude"] {
  --fond-g: var(--creme); --texte-g: var(--creme-texte); --texte-g2: var(--creme-texte-2);
  --accent-g: var(--argile-fonce); --sur-accent-g: var(--creme); --trait-g: var(--creme-trait);
}
.connexion-offre { font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 620; font-stretch: 104%; line-height: 1.25; letter-spacing: -.01em; margin-bottom: 18px; }
.connexion label { font-weight: 650; font-size: .95rem; margin: 16px 0 7px; }
.connexion input[type=text], .connexion input[type=password] {
  font: inherit; color: var(--texte-g); background: color-mix(in oklch, var(--texte-g) 4%, var(--fond-g));
  padding: 14px 16px; border-radius: 14px; border: 1.5px solid color-mix(in oklch, var(--texte-g) 22%, transparent);
  transition: border-color .25s, box-shadow .25s, background-color .6s var(--ease-quart);
}
.connexion input:focus-visible { outline: none; border-color: var(--accent-g); box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent-g) 28%, transparent); }
.bouton-principal {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 26px; padding: 17px 26px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent-g, var(--vert)); color: var(--sur-accent-g, var(--encre));
  font: inherit; font-weight: 720; font-stretch: 112%; font-size: 1.08rem; text-decoration: none; text-align: center;
  transition: transform .5s var(--ease-expo), background-color .6s var(--ease-quart), color .6s var(--ease-quart);
}
.bouton-principal:hover { transform: translateY(-2px); }
.bouton-principal:active { transform: scale(.985); }
.bouton-principal[disabled] { opacity: .65; cursor: progress; }
.note { margin-top: 16px; font-size: .9rem; color: var(--texte-g2, var(--encre-2)); }
.alerte {
  padding: 12px 16px; border-radius: 12px; font-weight: 650;
  background: color-mix(in oklch, var(--rouge) 12%, var(--fond-g)); color: var(--rouge);
  animation: secouer .5s var(--ease-quart);
}
.guichet[data-offre="chatgpt"] .alerte { color: oklch(0.8 0.12 28); }
@keyframes secouer { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

.statut { align-items: flex-start; }
.statut-marque { position: relative; width: 112px; height: 112px; margin-bottom: 26px; color: var(--accent-g); }
.statut[data-offre="claude"] .statut-marque { color: var(--argile); }
.statut-marque .marque { width: 100%; height: 100%; }
.statut-marque .trace { stroke-dasharray: 1; }
.js .statut-marque .trace { stroke-dashoffset: 1; }
.js .visible .statut-marque .trace { animation: tracer 1.8s var(--ease-quint) .5s both; }
.js .visible .statut-marque .etincelle .trace { animation: tracer 1.6s var(--ease-quint) .5s both, respirer 3.6s ease-in-out infinite alternate; }
.statut-bonjour { color: var(--texte-g2); font-size: 1.05rem; }
.statut-choix { margin-top: 6px; font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 800; font-stretch: 118%; line-height: 1.02; letter-spacing: -.035em; }
.statut .note { max-width: 46ch; }
.lien-fleche { margin-top: 22px; font-weight: 650; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }

/* Célébration après un choix : l'emblème éclot et projette des éclats. */
.celebrer.visible .statut-marque .marque { animation: eclore 1.4s var(--ease-expo) .25s both; }
@keyframes eclore { from { transform: scale(.3) rotate(-60deg); opacity: 0; } to { transform: none; opacity: 1; } }
.eclats { position: absolute; inset: 0; pointer-events: none; }
.eclats i {
  position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 3px;
  background: var(--vert); opacity: 0;
}
.celebrer.visible .eclats i { animation: eclater 1.4s var(--ease-expo) .45s both; }
.eclats i:nth-child(odd) { background: currentColor; border-radius: 50%; }
.eclats i:nth-child(1) { --a: 0deg; } .eclats i:nth-child(2) { --a: 30deg; } .eclats i:nth-child(3) { --a: 60deg; }
.eclats i:nth-child(4) { --a: 90deg; } .eclats i:nth-child(5) { --a: 120deg; } .eclats i:nth-child(6) { --a: 150deg; }
.eclats i:nth-child(7) { --a: 180deg; } .eclats i:nth-child(8) { --a: 210deg; } .eclats i:nth-child(9) { --a: 240deg; }
.eclats i:nth-child(10) { --a: 270deg; } .eclats i:nth-child(11) { --a: 300deg; } .eclats i:nth-child(12) { --a: 330deg; }
.eclats i:nth-child(3n) { --d: 118px; } .eclats i:nth-child(3n+1) { --d: 92px; } .eclats i:nth-child(3n+2) { --d: 140px; }
@keyframes eclater {
  0% { opacity: 1; transform: rotate(var(--a)) translateX(20px) scale(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(.3); }
}

/* -- Pied ------------------------------------------------------------------------------ */
.pied {
  padding: 36px var(--gouttiere) 44px; border-top: 1px solid var(--trait);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; font-size: .92rem; color: var(--encre-2);
}
.pied a { color: var(--encre); font-weight: 650; text-underline-offset: 3px; }
.pied-legal { font-size: .82rem; }

/* -- Page d'erreur --------------------------------------------------------------------- */
.erreur-page { max-width: 640px; margin: clamp(48px, 10vw, 120px) auto; padding: 0 var(--gouttiere); }
.erreur-page p { margin-top: 18px; color: var(--encre-2); font-size: 1.12rem; }
.erreur-page .bouton-principal { margin-top: 28px; }

/* -- Adaptation ------------------------------------------------------------------------ */
@media (max-width: 980px) {
  .section-tete, .quotidien, .rejoindre { grid-template-columns: minmax(0, 1fr); }
  .offres { grid-template-columns: minmax(0, 1fr); }
  .offre { min-height: 0; }
}
@media (max-width: 640px) {
  .barre { flex-wrap: nowrap; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  .marque-reanova img { height: 40px; }
  .barre-titre, .qui { display: none; }
  .barre-actions { gap: 4px; flex-wrap: nowrap; }
  .lien-barre { padding: 7px 14px; font-size: .9rem; }
  .scene { height: clamp(600px, calc(100svh - 70px), 760px); }
  .scene-texte { padding: 84px 20px 120px; }
  .titre { font-size: clamp(2.6rem, 13.4vw, 4.4rem); font-stretch: 108%; }
  .scene-marque { top: auto; bottom: -96px; width: 230px; translate: none; }
  .scene-marque.gauche { left: -96px; }
  .scene-marque.droite { right: -96px; }
  .monde-chatgpt .scene-marque.gauche, .monde-claude .scene-marque.droite { opacity: .55; }
  .surtitre { font-size: .82rem; }
  .surtitre .long { display: none; }
  .cta { padding: 15px 22px 15px 24px; }
  .offre-marque { width: 200px; }
  .demo-saisie { min-height: 5.4em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js [data-revele] { opacity: 1; transform: none; }
}