/*
 * Page d'accueil publique d'Orchestra (la vitrine, 23/09), servie a la racine.
 *
 * Le parti : le monde du livre plutot que celui du logiciel. Le circuit presse
 * devient une etagere de cinq dos de livre, et le tampon violet « Service de
 * presse », celui qu'on appose sur chaque exemplaire presse, est pose en travers.
 * C'est la seule audace de la page ; tout le reste est typographique et calme.
 *
 * Polices et icones sont celles du produit (_fonts.html.twig, templates/icons),
 * servies en local : aucune adresse IP de visiteur envoyee a un tiers.
 */

:root {
    --paper: #F2F0F6;
    --sheet: #FFFFFF;
    --ink: #1E1446;
    --ink-soft: #544B6E;
    --rule: #D8D2E6;
    --violet: #5125A5;
    --violet-deep: #3B1A80;
    --gold: #CBA35A;

    --lavande: #E6DDF8; --lavande-ink: #4E2FA0;
    --ciel: #D6EAF8;    --ciel-ink: #16557F;
    --peche: #FBDCCB;   --peche-ink: #97401B;
    --sable: #EDE3CF;   --sable-ink: #6A5220;
    --menthe: #D3EFE0;  --menthe-ink: #17684A;

    --display: 'Lora', Georgia, serif;
    --ui: 'Inter', system-ui, -apple-system, sans-serif;
    --wrap: 74rem;
    --gutter: clamp(1.1rem, 4vw, 2.75rem);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
    font-family: var(--ui); font-size: 1.0625rem; line-height: 1.6;
    color: var(--ink); background: var(--paper);
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; letter-spacing: -.015em; }
strong { font-weight: 600; }
.ico { display: inline-flex; flex: 0 0 auto; }
.ico svg { width: 100%; height: 100%; stroke-width: 1.8; }

.skip { position: absolute; left: -999px; top: .5rem; z-index: 50; background: var(--sheet); color: var(--ink); padding: .5rem .8rem; }
.skip:focus { left: .5rem; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }

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

/* --- Boutons : deux, pas davantage. --- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 3rem; padding: 0 1.4rem; border-radius: 4px;
    background: var(--ink); color: var(--paper); border: 1.5px solid var(--ink);
    font-weight: 600; font-size: .98rem; text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.btn:hover { background: var(--violet); border-color: var(--violet); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--small { min-height: 2.5rem; padding: 0 1rem; font-size: .92rem; }
.btn--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--light:hover { background: #fff; border-color: #fff; color: var(--ink); }
.btn--line { background: transparent; color: var(--paper); border-color: rgba(242,240,246,.45); }
.btn--line:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* --- Entete : une ligne de papier, un filet d'encre. --- */
.top { position: sticky; top: 0; z-index: 20; background: rgba(242,240,246,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.top__inner { max-width: var(--wrap); margin: 0 auto; padding: .7rem var(--gutter); display: flex; align-items: center; gap: 2.2rem; }
.brand { font-family: var(--display); font-weight: 600; font-size: 1.5rem; letter-spacing: -.02em; text-decoration: none; }
.brand::after { content: ""; display: block; width: 26px; height: 2px; margin-top: .15rem; background: var(--gold); }
.anchors { display: flex; gap: 1.5rem; margin-right: auto; }
.anchors a { color: var(--ink-soft); text-decoration: none; font-size: .95rem; padding: .3rem 0; border-bottom: 1.5px solid transparent; }
.anchors a:hover { color: var(--ink); }
.anchors a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.top__actions { display: flex; align-items: center; gap: 1.1rem; }
.link-login { text-decoration: none; font-weight: 500; font-size: .95rem; }
.link-login:hover { text-decoration: underline; text-underline-offset: .22em; }

/* --- Accueil --- */
.hero { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 4.5rem); }
.hero__inner {
    max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
    display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}
.hero h1 { font-size: clamp(2.6rem, 5vw, 4.5rem); font-weight: 500; line-height: 1.02; letter-spacing: -.035em; max-width: 13ch; }
.hero__lead { margin-top: 1.6rem; font-size: 1.15rem; color: var(--ink-soft); max-width: 36rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.1rem; }
.hero__note { margin-top: 1rem; font-size: .92rem; color: var(--ink-soft); }

/* --- Sections --- */
.section { max-width: var(--wrap); margin: 0 auto; padding: clamp(4rem, 9vw, 7rem) var(--gutter); }
.section__head { max-width: 42rem; margin-bottom: 3rem; }
.section__head h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 500; letter-spacing: -.025em; }
.section__head p { margin-top: 1rem; color: var(--ink-soft); font-size: 1.1rem; }

/* Le circuit : un bordereau. Grand chiffre en marge, filet entre les etapes, et
   la couleur du dos de livre correspondant en pastille. C'est une vraie suite. */
.steps { border-top: 1.5px solid var(--ink); }
.step { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1.25fr); gap: 1.5rem; padding: 1.8rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.step__n { font-family: var(--display); font-size: 3rem; font-weight: 500; line-height: 1; color: var(--ink); }
.step__n::after { content: ""; display: inline-block; width: .6rem; height: .6rem; margin-left: .5rem; border-radius: 50%; vertical-align: .35em; background: var(--dot, var(--rule)); }
.step > div { display: contents; }
.step h3 { font-size: 1.35rem; font-weight: 600; }
.step p { color: var(--ink-soft); }
.step--lavande { --dot: var(--lavande-ink); }
.step--ciel { --dot: var(--ciel-ink); }
.step--peche { --dot: var(--peche-ink); }
.step--sable { --dot: var(--sable-ink); }
.step--menthe { --dot: var(--menthe-ink); }

/* Pour qui : trois colonnes, un filet d'encre au-dessus de chacune. */
.section--tint { max-width: none; background: var(--sheet); }
.section--tint > * { max-width: calc(var(--wrap) - 2 * var(--gutter)); margin-left: auto; margin-right: auto; }
.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.role { border-top: 1.5px solid var(--ink); padding-top: 1.3rem; }
.role__icon { display: inline-flex; color: var(--violet); margin-bottom: .9rem; }
.role__icon .ico { width: 1.5rem; height: 1.5rem; }
.role h3 { font-size: 1.45rem; font-weight: 500; }
.role p { margin-top: .6rem; color: var(--ink-soft); }
.roles__more { margin-top: 3rem; color: var(--ink-soft); }

/* Carnet et equipe : titre a gauche, les trois faits a droite. */
.split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.split .section__head { margin-bottom: 0; position: sticky; top: 6rem; }
.facts > div { padding: 1.5rem 0; border-top: 1px solid var(--rule); }
.facts > div:first-child { border-top: 1.5px solid var(--ink); }
.facts dt { display: flex; align-items: center; gap: .7rem; font-family: var(--display); font-size: 1.3rem; font-weight: 600; }
.facts dt .ico { width: 1.3rem; height: 1.3rem; color: var(--violet); }
.facts dd { margin-top: .45rem; color: var(--ink-soft); }

/* Vos donnees : un encadre d'encre, la seule surface sombre avant la fin. */
.section--night { max-width: none; background: var(--ink); color: var(--paper); }
.section--night > * { max-width: calc(var(--wrap) - 2 * var(--gutter)); margin-left: auto; margin-right: auto; }
.section--night .section__head { margin-bottom: 2.4rem; }
.trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.trust li { border-top: 1px solid rgba(242,240,246,.25); padding-top: 1.3rem; }
.trust .ico { width: 1.4rem; height: 1.4rem; color: var(--gold); margin-bottom: .9rem; }
.trust p { color: rgba(242,240,246,.72); }
.trust strong { display: block; color: var(--paper); font-family: var(--display); font-size: 1.2rem; font-weight: 500; line-height: 1.3; margin-bottom: .4rem; }

/* Licences : deux fiches, la principale bordee d'encre. */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; max-width: 56rem; }
.plan { background: var(--sheet); border: 1px solid var(--rule); border-radius: 4px; padding: 2rem; display: flex; flex-direction: column; }
.plan--main { border: 1.5px solid var(--ink); box-shadow: 6px 6px 0 var(--lavande); }
.plan h3 { font-size: 1.6rem; font-weight: 500; }
.plan__price { margin-top: .25rem; color: var(--violet); font-weight: 600; }
.plan ul { margin: 1.3rem 0 1.8rem; flex: 1 1 auto; border-top: 1px solid var(--rule); }
.plan li { padding: .6rem 0; border-bottom: 1px solid var(--rule); color: var(--ink-soft); }
.plan .btn { align-self: flex-start; }
.plans__note { margin-top: 1.4rem; color: var(--ink-soft); font-size: .95rem; }

/* La fin : l'encre, et une grande phrase. */
.closing { background: var(--ink); color: var(--paper); padding: clamp(4rem, 9vw, 6.5rem) var(--gutter); }
.closing > * { max-width: calc(var(--wrap) - 2 * var(--gutter)); margin-left: auto; margin-right: auto; }
.closing h2 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); font-weight: 500; letter-spacing: -.03em; }
.closing p { margin-top: 1rem; color: rgba(242,240,246,.72); }
.closing .hero__cta { margin-top: 2rem; }

.foot { background: var(--ink); color: rgba(242,240,246,.6); border-top: 1px solid rgba(242,240,246,.15); }
.foot__inner { max-width: var(--wrap); margin: 0 auto; padding: 1.8rem var(--gutter); display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 2rem; font-size: .92rem; }
.brand--foot { color: var(--paper); font-size: 1.25rem; }
.brand--foot::after { display: none; }
.foot__copy { margin-left: auto; }

/* --- Ecrans etroits --- */
@media (max-width: 980px) {
    .top__inner { flex-wrap: wrap; gap: .5rem 1.2rem; }
    .anchors { order: 3; width: 100%; overflow-x: auto; gap: 1.2rem; margin-right: 0; }
    .anchors a { white-space: nowrap; }
    .top__actions { margin-left: auto; }
    .hero__inner { grid-template-columns: 1fr; }
    .step { grid-template-columns: 4rem minmax(0, 1fr); }
    .step p { grid-column: 2; }
    .roles, .trust { grid-template-columns: 1fr; gap: 2rem; }
    .split { grid-template-columns: 1fr; }
    .split .section__head { position: static; }
}
@media (max-width: 640px) {
    .link-login { display: none; }
    .plans { grid-template-columns: 1fr; }
    .foot__copy { margin-left: 0; }
}

/* ------------------------------------------------------------------
   LE MUR DE COUVERTURES (23/09) : trois colonnes de livres inventes qui
   defilent lentement, en sens alternes, legerement inclinees.
   ------------------------------------------------------------------ */

/* Une couverture d'album de BD : format a l'italienne des albums (3/4), titre
   en lettrage gras en haut, grande illustration, auteurs en pied. */
.cover {
    position: relative; aspect-ratio: 3 / 4; border-radius: 2px 4px 4px 2px;
    padding: 9% 8% 7%; display: flex; flex-direction: column; gap: 6%;
    box-shadow: inset 4px 0 0 rgba(30,20,70,.16), 0 1px 0 rgba(30,20,70,.08);
    overflow: hidden; isolation: isolate;
    --art-ink: #1E1446;
}
.cover__head { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: .4rem; }
.cover__t {
    font-family: var(--ui); font-weight: 900; font-size: 1.02rem; line-height: .98;
    letter-spacing: -.02em; text-transform: uppercase; color: var(--art-ink);
}
.cover__tome {
    flex: 0 0 auto; min-width: 1.5rem; height: 1.5rem; padding: 0 .3rem; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--art-ink); color: var(--paper-art); font-family: var(--ui); font-weight: 800; font-size: .75rem;
}
.cover__art {
    position: relative; z-index: 0; flex: 1 1 auto; width: 100%; min-height: 0;
    border: 2px solid var(--art-ink); border-radius: 2px; background: var(--paper-art);
}
.cover__a { position: relative; z-index: 2; font-size: .7rem; font-weight: 600; color: var(--art-ink); opacity: .85; }

/* Le dessin : encre epaisse, aplats du ton, trame de points. */
.a-ink { stroke: var(--art-ink); stroke-width: 2.4; stroke-linejoin: round; }
.a-ink-fill { fill: var(--art-ink); }
.a-paper { fill: var(--paper-art); }
.a-tint { fill: var(--art); }
.a-line { fill: none; stroke: var(--art-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.a-light { stroke: #F6D36B; stroke-width: 2; }
.a-stripe { stroke: var(--art); stroke-width: 5; }
.a-beam { fill: #F6D36B; opacity: .55; }
.a-flame { fill: #F29A5C; }
.a-shout { font-family: var(--ui); font-weight: 900; font-size: 30px; fill: var(--art-ink); letter-spacing: -1px; }
.a-shout--small { font-size: 17px; }
.a-dots-bg { fill: var(--paper-art); }
.a-dots { fill: var(--art); opacity: .55; }

/* Le grain : un bruit fractal gris pose en lumiere douce (soft-light), comme le
   papier non couche d'une vraie couverture. Il eclaircit et fonce a parts
   egales : la texture apparait sans ternir les teintes, ce que faisait un grain
   en multiplication. Le contraste du bruit est pousse, sans quoi la lumiere
   douce ne se voit pas sur des teintes aussi claires. Genere en SVG, donc sans image a charger ni a heberger. */
.cover::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.6' intercept='-.8'/%3E%3CfeFuncG type='linear' slope='2.6' intercept='-.8'/%3E%3CfeFuncB type='linear' slope='2.6' intercept='-.8'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    mix-blend-mode: soft-light; opacity: .9;
}
/* Chaque ton : le fond de la couverture, la teinte vive du dessin, le papier. */
.cover--lavande { background: var(--lavande); --art: #8B6FD6; --paper-art: #FBF9FF; }
.cover--ciel { background: var(--ciel); --art: #3E8FC9; --paper-art: #F7FBFE; }
.cover--peche { background: var(--peche); --art: #E0663A; --paper-art: #FFF9F5; }
.cover--sable { background: var(--sable); --art: #C79A3E; --paper-art: #FFFCF4; }
.cover--menthe { background: var(--menthe); --art: #2F9E6E; --paper-art: #F6FDF9; }
.cover--nuit { background: var(--ink); --art: #8B6FD6; --paper-art: #2E2260; --art-ink: #F2F0F6; }
.cover--nuit .cover__art { border-color: var(--art-ink); }

.wall { position: relative; }
.wall__tilt {
    height: 32rem; overflow: hidden; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
            mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
/* La rotation part du SOMMET de la colonne : autour de son centre, a des
   milliers de pixels plus bas, la partie visible serait rejetee sur le cote. */
.wall__col { min-width: 0; transform: rotate(-6deg) translateY(-2rem); transform-origin: 50% 0; }
.wall__track { display: grid; gap: 1rem; }
@media (prefers-reduced-motion: no-preference) {
    .wall__track { animation: wall-up 48s linear infinite; }
    .wall__col--1 .wall__track { animation-name: wall-down; animation-duration: 56s; }
    .wall__col--2 .wall__track { animation-duration: 42s; }
}
@keyframes wall-up { from { transform: translateY(0); } to { transform: translateY(calc(-50% - .5rem)); } }
@keyframes wall-down { from { transform: translateY(calc(-50% - .5rem)); } to { transform: translateY(0); } }
@media (max-width: 640px) {
    .wall__tilt { height: 22rem; }
    .cover__t { font-size: .8rem; }
    .cover__tome { min-width: 1.2rem; height: 1.2rem; font-size: .65rem; }
}