/* oktavia.io : mise en page. Couleurs, polices et formes : tokens.css (aucune couleur en dur hors des SVG). */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--okto-abysse); color: var(--okto-encre); font-family: var(--police-texte); }
img { max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: var(--okto-lagune); }
a:hover { color: var(--okto-petrole); }
h1, h2, h3 { font-family: var(--police-titre); font-weight: 700; margin: 0; }
:focus-visible { outline: var(--focus); outline-offset: 3px; }
[id] { scroll-margin-top: 16px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.evitement { position: absolute; left: 12px; top: -100px; z-index: 10; background: var(--okto-brume); color: var(--okto-encre); padding: 10px 14px; border-radius: var(--rayon-s); font-weight: 700; }
.evitement:focus { top: 12px; }

/* ---------- Animations (coupées si prefers-reduced-motion) ---------- */
@keyframes drift { 0% { transform: translate(0, 0); } 50% { transform: translate(30px, -20px); } 100% { transform: translate(0, 0); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 181, 71, .55); } 70% { box-shadow: 0 0 0 10px rgba(255, 181, 71, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 181, 71, 0); } }
.halo { animation: drift 18s ease-in-out infinite; }
.float, .flotte-a { animation: float 6s ease-in-out infinite; }
.float2, .flotte-b { animation: float 7s ease-in-out 1.2s infinite; }
.flotte-c { animation: float 6.5s ease-in-out 2.4s infinite; }
.pulse { animation: pulse 2.4s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .halo, .float, .float2, .flotte-a, .flotte-b, .flotte-c, .pulse { animation: none; }
  .carte-heros { transition: none; }
}

/* ---------- Boutons (de vrais <a> ou <button>) ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: var(--rayon-s); font-weight: 700; text-decoration: none; }
.btn-grand { min-height: 54px; padding: 0 22px; border-radius: 12px; font-size: 17px; }
.btn-orange, .btn-orange:hover { background: var(--okto-orange); color: var(--okto-encre); }
.btn-orange:hover { filter: brightness(1.06); }
.btn-contour { border: 1px solid var(--ligne-sombre-2); color: var(--okto-brume); font-weight: 600; font-size: 16px; padding: 0 20px; }
.btn-contour:hover { color: var(--okto-blanc); border-color: var(--okto-brume); }
.btn-abysse, .btn-abysse:hover { align-self: flex-start; min-height: 56px; padding: 0 24px; border-radius: 12px; background: var(--okto-abysse); color: var(--okto-brume); font-size: 20px; }
.btn-lagune, .btn-lagune:hover { align-self: flex-start; min-height: 52px; padding: 0 22px; border-radius: 12px; background: var(--okto-lagune); color: var(--okto-blanc); margin-top: auto; }
.btn-lagune:hover { background: var(--okto-petrole); }

/* ---------- Ciel sombre : en-tête et héros ---------- */
.ciel { position: relative; overflow: hidden; }
.halo { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.halo-a { width: 520px; height: 520px; background: var(--okto-lagune); opacity: .35; top: -160px; right: -80px; }
.halo-b { width: 380px; height: 380px; background: var(--oktavia-ambre); opacity: .14; bottom: -140px; left: -60px; }

.entete { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; min-height: 72px; color: var(--okto-brume); }
.marque { display: flex; align-items: center; gap: 10px; color: var(--okto-brume); text-decoration: none; font-family: var(--police-titre); font-weight: 700; font-size: 22px; }
.marque:hover { color: var(--okto-blanc); }
.nav { display: flex; flex-wrap: wrap; gap: 4px 22px; flex: 1 1 auto; font-size: 15px; font-weight: 600; }
.nav a { color: var(--texte-clair-2); text-decoration: none; padding: 10px 0; }
.nav a:hover { color: var(--okto-blanc); text-decoration: underline; text-underline-offset: 4px; }

.heros { position: relative; overflow: hidden; color: var(--okto-brume); }
.heros-corps { position: relative; max-width: 1200px; margin: 0 auto; padding: 48px 16px 88px; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.heros-texte { flex: 1 1 440px; display: flex; flex-direction: column; gap: 22px; }
.sur-titre { align-self: flex-start; font-size: 13px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--okto-abysse); background: var(--oktavia-ambre); border-radius: var(--rayon-pastille); padding: 6px 12px; }
.heros h1 { font-size: clamp(36px, 5vw, 58px); line-height: 1.08; letter-spacing: -.5px; }
.chapo { margin: 0; font-size: 19px; line-height: 1.55; color: var(--texte-clair-2); max-width: 560px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.mention { margin: 0; font-size: 14px; color: var(--texte-clair-3); }

.heros-visuel { flex: 1 1 500px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.heros-photo { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 3 / 2; box-shadow: 0 30px 60px rgba(0, 0, 0, .3); }
.heros-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; display: block; }
/* Voile allégé (retouche du 01/11) : Paul reste net, seul le bas fonce un peu pour l'étiquette */
.voile-heros { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 38, 48, .18) 0%, rgba(6, 38, 48, 0) 28%, rgba(6, 38, 48, 0) 70%, rgba(6, 38, 48, .45) 100%); }

/*
 * Cartes du héros, retouche du 01/11 : plus étroites et rangées sur les bords (horloge, mur, pains),
 * pour laisser Paul (au centre droit de la photo) entièrement visible.
 */
.flotte { position: absolute; }
.flotte-a { top: 12px; left: 12px; max-width: 46%; }
.flotte-b { top: 44%; left: 12px; max-width: 40%; }
.flotte-c { bottom: 12px; right: 12px; max-width: 44%; }
.carte-heros { display: flex; flex-direction: column; gap: 5px; background: rgba(255, 255, 255, .97); color: var(--okto-encre); border-radius: 14px; padding: 8px 11px; box-shadow: 0 10px 24px rgba(0, 0, 0, .26); border: 2px solid transparent; opacity: .9; transition: border-color .5s, opacity .5s; }
.carte-heros.est-active { border-color: var(--oktavia-ambre); opacity: 1; }
.carte-heros-ligne { flex-direction: row; align-items: center; gap: 10px; }
.carte-texte { font-size: 13px; line-height: 1.4; }

.ligne-equipier { display: flex; align-items: center; gap: 8px; }
.ligne-equipier strong { font-size: 14px; }
.pastille-ia, .pastille-humain, .avatar-ia { flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--police-titre); font-weight: 700; }
.pastille-ia { width: 28px; height: 28px; font-size: 13px; background: var(--oktavia-ambre); color: var(--okto-encre); }
.pastille-ia-30 { width: 30px; height: 30px; font-size: 14px; }
.pastille-humain { width: 28px; height: 28px; background: var(--okto-lagune); color: var(--okto-blanc); }
.badge-ia { font-size: 10px; font-weight: 700; letter-spacing: .5px; background: var(--oktavia-ambre); color: var(--okto-encre); border-radius: 5px; padding: 2px 5px; }
.canal { margin-left: auto; font-size: 12px; color: var(--texte-3); }
.canal-vert { font-weight: 600; color: var(--vert-en-ligne); }

.etiquette-humain { position: absolute; top: 14px; left: 14px; font-size: 12px; font-weight: 700; color: var(--okto-abysse); background: var(--okto-brume); border-radius: var(--rayon-pastille); padding: 5px 10px; }
.etiquette-bas { top: auto; bottom: 14px; }

.equipe-resume { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.equipe-resume p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--texte-clair-2); }
.equipe-resume .humains { color: var(--okto-brume); }
.equipe-resume .ias { color: var(--oktavia-ambre); }
.avatars { display: flex; align-items: center; }
.avatars picture { display: contents; }
.avatars img, .avatar-ia { width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--okto-abysse); }
.avatars img { object-fit: cover; display: block; }
.avatars img, .avatar-ia { margin-left: -10px; }
.avatars picture:first-child img { margin-left: 0; }
.avatar-ia { background: var(--oktavia-ambre); color: var(--okto-encre); font-size: 18px; }

/* ---------- Corps de page (Brume) ---------- */
.page { background: var(--okto-brume); color: var(--okto-encre); }
.bloc { max-width: 1200px; margin: 0 auto; padding: 72px 16px; display: flex; flex-direction: column; gap: 28px; }
.intro { display: flex; flex-direction: column; gap: 10px; max-width: 780px; }
.intro h2, .journee-intro h2, .bloc-faq h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; }
.intro p, .journee-intro p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--texte-2); }

/* Duos humain + IA, retouche du 01/11 : la carte IA passe sous la photo et n'en mord que le bas */
.bloc-duos { padding: 80px 16px 8px; }
.duos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 20px; }
.duo { margin: 0; display: flex; flex-direction: column; }
.duo-photo { position: relative; border-radius: var(--rayon-l); overflow: hidden; aspect-ratio: 4 / 3; background: var(--okto-petrole); }
.duo-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.duo:first-child .duo-photo img { object-position: 40% 35%; }
.duo:last-child .duo-photo img { object-position: 45% 35%; }
.carte-duo { position: relative; margin: -40px 14px 0; background: var(--okto-blanc); color: var(--okto-encre); border-radius: var(--rayon-m); padding: 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 12px 30px rgba(6, 38, 48, .18); }
.carte-texte-duo { font-size: 14px; line-height: 1.5; }
.faux-boutons { display: flex; gap: 8px; }
.faux-envoyer { font-size: 13px; font-weight: 700; color: var(--okto-blanc); background: var(--okto-lagune); border-radius: 8px; padding: 6px 12px; }
.faux-modifier { font-size: 13px; font-weight: 600; color: var(--okto-petrole); border: 1px solid var(--ligne-forte); border-radius: 8px; padding: 5px 12px; }

/* Cartes génériques */
.bloc-outils { padding: 72px 16px 24px; gap: 32px; }
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 16px; }
.carte { background: var(--okto-blanc); border: 1px solid var(--ligne); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.carte h3 { font-size: 19px; line-height: 1.3; }
.bloc-main .carte h3 { font-size: 18px; }
.carte p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--texte-2); }
.carte-sur-titre { font-size: 13px; font-weight: 700; letter-spacing: .6px; color: var(--okto-lagune); text-transform: uppercase; }
.exemple { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--okto-petrole); background: var(--surface-douce); border-radius: var(--rayon-s); padding: 8px 10px; overflow-wrap: anywhere; }

/* Rôles */
.bloc-roles { padding: 56px 16px; }
.onglets-roles { display: flex; flex-wrap: wrap; gap: 10px; }
.onglet-role { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px 0 8px; border-radius: var(--rayon-pastille); font-weight: 600; font-size: 15px; border: 1px solid var(--ligne); background: var(--okto-blanc); color: var(--okto-petrole); }
.onglet-role:hover { border-color: var(--okto-lagune); }
.onglet-role[aria-pressed="true"] { border-color: var(--okto-abysse); background: var(--okto-abysse); color: var(--okto-brume); }
.onglet-role .pastille-ia { width: 30px; height: 30px; font-size: 14px; }
.role { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.role[hidden] { display: none; }
.role-fiche { flex: 1 1 320px; background: var(--okto-abysse); color: var(--okto-brume); border-radius: 20px; padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.role-sur-titre { font-size: 13px; font-weight: 700; letter-spacing: .6px; color: var(--oktavia-ambre); }
.role-fiche h3 { font-size: 26px; line-height: 1.2; }
.role-fiche p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--texte-clair-2); }
.outils { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.outils li { font-size: 13px; font-weight: 600; border: 1px solid var(--ligne-sombre); border-radius: var(--rayon-pastille); padding: 5px 11px; color: var(--texte-clair-2); }
.dialogue { flex: 999 1 480px; min-width: 0; background: var(--okto-blanc); border: 1px solid var(--ligne); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.replique { display: flex; justify-content: flex-start; }
.replique-vous { justify-content: flex-end; }
.bulle { margin: 0; max-width: 82%; font-size: 16px; line-height: 1.55; padding: 12px 16px; border-radius: var(--rayon-m); }
.bulle .qui { display: block; font-size: 12px; font-weight: 700; letter-spacing: .4px; margin-bottom: 4px; }
.replique-client .bulle { background: var(--okto-blanc); color: var(--okto-encre); border: 1px solid var(--ligne); border-bottom-left-radius: 4px; }
.replique-client .qui, .replique-vous .qui { color: var(--texte-2); }
.replique-ia .bulle { background: var(--okto-abysse); color: var(--okto-brume); border-bottom-left-radius: 4px; }
.replique-ia .qui { color: var(--oktavia-ambre); }
.replique-vous .bulle { background: var(--surface-bulle); color: var(--okto-encre); border-bottom-right-radius: 4px; }
.bientot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 15px; color: var(--texte-2); }
.bientot-titre { font-weight: 600; color: var(--okto-encre); }
.bientot-role { border: 1px dashed var(--ligne-forte); border-radius: var(--rayon-pastille); padding: 6px 12px; }

/* Une journée */
.bande-blanche { background: var(--okto-blanc); border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); }
.bloc-journee { flex-direction: row; flex-wrap: wrap; gap: 40px; }
.journee-intro { flex: 1 1 320px; display: flex; flex-direction: column; gap: 14px; }
.legende { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; margin-top: 6px; }
.legende > span { display: inline-flex; align-items: center; gap: 8px; }
.point { width: 12px; height: 12px; border-radius: 50%; }
.point-humain { background: var(--okto-lagune); }
.point-ia { background: var(--oktavia-ambre); border: 1px solid var(--oktavia-ambre-bord); }
.frise { flex: 999 1 560px; min-width: 0; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.frise li { display: flex; gap: 16px; }
.heure { width: 64px; flex: none; font-weight: 700; color: var(--okto-petrole); padding-top: 14px; }
.rail { display: flex; flex-direction: column; align-items: center; flex: none; }
.rail .point { width: 14px; height: 14px; margin-top: 18px; flex: none; background: var(--okto-lagune); border: 2px solid var(--okto-petrole); }
.frise .ia .rail .point { background: var(--oktavia-ambre); border-color: var(--oktavia-ambre-bord); }
.trait { flex: 1; width: 2px; background: var(--surface-bulle); }
.evenement { padding: 10px 0 22px; font-size: 16px; line-height: 1.55; }

/* Vous gardez la main */
.reglage { background: var(--okto-blanc); border: 1px solid var(--ligne); border-radius: 18px; padding: 18px 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.reglage-titre { font-weight: 600; flex: 1 1 240px; }
.segments { display: inline-flex; border: 1px solid var(--ligne); border-radius: 12px; padding: 3px; gap: 3px; background: var(--surface-creuse); }
.segment { min-height: 44px; padding: 0 14px; border: 0; border-radius: 9px; font-size: 14px; font-weight: 600; background: transparent; color: var(--okto-petrole); }
.segment:hover { background: var(--surface-bulle); }
.segment[data-niveau="auto"][aria-pressed="true"] { background: var(--okto-lagune); color: var(--okto-blanc); }
.segment[data-niveau="valider"][aria-pressed="true"] { background: var(--oktavia-ambre); color: var(--okto-encre); }
.segment[data-niveau="interdit"][aria-pressed="true"] { background: var(--gris-interdit); color: var(--okto-blanc); }
.reglage-aide { flex: 1 1 100%; margin: 0; font-size: 14px; color: var(--texte-2); }

/* Prix */
.bande-sombre { background: var(--okto-abysse); color: var(--okto-brume); }
.bande-sombre .intro p { color: var(--texte-clair-2); }
.prix { border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 8px; background: var(--okto-petrole); border: 1px solid var(--ligne-sombre); color: var(--okto-brume); }
.prix-role { font-size: 14px; font-weight: 700; color: var(--oktavia-ambre); }
.prix-montant { font-family: var(--police-titre); font-weight: 700; font-size: 30px; }
.prix-detail { font-size: 14px; line-height: 1.5; color: var(--texte-clair-2); }
.prix-vedette { background: var(--okto-brume); border-color: var(--okto-brume); color: var(--okto-encre); }
.prix-vedette .prix-role { color: var(--okto-lagune); }
.prix-vedette .prix-detail { color: var(--texte-2); }

/* Démo + composer */
.bloc-composer { flex-direction: row; flex-wrap: wrap; gap: 24px; }
.encart-appel, .encart-etapes { flex: 1 1 420px; border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.encart-appel { background: var(--okto-orange); color: var(--okto-encre); }
.encart-etapes { background: var(--okto-blanc); border: 1px solid var(--ligne); }
.encart-appel h2, .encart-etapes h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.2; }
.encart-appel p { margin: 0; font-size: 17px; line-height: 1.55; }
.encart-mention { font-size: 14px; }
.etapes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.etapes li { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; line-height: 1.5; }
.numero { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--okto-petrole); color: var(--okto-blanc); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.etape-texte { color: var(--texte-2); }

/* FAQ */
.bloc-faq { max-width: 860px; padding: 24px 16px 80px; gap: 16px; }
.bloc-faq h2 { font-size: clamp(28px, 3.4vw, 38px); }
.question { background: var(--okto-blanc); border: 1px solid var(--ligne); border-radius: var(--rayon-m); }
.question h3 { font-family: var(--police-texte); font-size: 17px; font-weight: 600; }
.question button { width: 100%; min-height: 60px; padding: 16px 20px; border: 0; border-radius: var(--rayon-m); background: transparent; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; font-weight: 600; color: var(--okto-encre); }
.signe::before { content: "+"; font-size: 22px; color: var(--okto-lagune); font-weight: 400; }
.question button[aria-expanded="true"] .signe::before { content: "−"; }
.reponse p { margin: 0; padding: 0 20px 20px; font-size: 16px; line-height: 1.6; color: var(--texte-2); }
.reponse[hidden] { display: none; }

/* Pied de page */
.pied { background: var(--okto-abysse); color: var(--texte-clair-3); }
.pied-corps { max-width: 1200px; margin: 0 auto; padding: 32px 16px; display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; font-size: 14px; }
.pied-marque { font-family: var(--police-titre); font-weight: 700; font-size: 18px; color: var(--okto-brume); }
.pied-espace { flex: 1; }
.pied a { color: var(--texte-clair-2); }
.pied a:hover { color: var(--okto-blanc); }
.pied-credits { flex: 1 1 100%; margin: 0; font-size: 12px; color: var(--texte-clair-4); }
.pied-credits a { color: inherit; }

/* Pages légales */
.legal { max-width: 760px; margin: 0 auto; padding: 48px 16px 72px; display: flex; flex-direction: column; gap: 18px; line-height: 1.6; }
.legal h1 { font-size: clamp(30px, 4vw, 40px); line-height: 1.15; }
.legal h2 { font-size: 20px; margin-top: 12px; }
.legal p, .legal ul { margin: 0; }
.legal .retour { font-weight: 600; }

/* ---------- Petits écrans ---------- */
@media (max-width: 640px) {
  .cache-sm { display: none; }
  /* En-tête compact : marque et bouton sur une ligne, sommaire défilant dessous */
  .entete { gap: 4px 12px; padding-top: 8px; }
  .btn-entete { margin-left: auto; padding: 0 14px; font-size: 15px; }
  .nav { order: 3; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; gap: 20px; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
  .nav a { white-space: nowrap; }
  /* Cartes du héros : à gauche (horloge, pains), Paul reste dégagé à droite */
  .flotte-c { right: auto; left: 12px; }
  .canal-heros { display: none; }
  .heros-corps { padding: 28px 16px 64px; gap: 36px; }
  .chapo { font-size: 17px; }
  .btn-grand { font-size: 16px; padding: 0 18px; }
  .flotte-a { max-width: 54%; }
  .flotte-c { max-width: 50%; }
  .carte-heros { padding: 6px 9px; }
  .carte-texte { font-size: 12px; }
  .bloc { padding-top: 56px; padding-bottom: 56px; }
  .bloc-duos { padding: 56px 16px 8px; }
  .bloc-faq { padding: 16px 16px 64px; }
  .encart-appel, .encart-etapes { padding: 24px; }
  .dialogue, .role-fiche { padding: 20px; }
  .bulle { max-width: 92%; }
  .frise li { gap: 10px; }
  .heure { width: 52px; }
}