/* landing-claire-blocs.css : les sections sous le premier écran.

   Le socle (palette, polices, barre, boutons) est dans landing-claire.css,
   chargée avant celle-ci. */

.bloc { padding: 6.5rem var(--marge); }
/* UN SEUL FOND POUR TOUTE LA PAGE. Les sections alternaient crème et beige,
   et avec le panneau de l'IA puis la fin en encre, le fond changeait six fois
   en une page. Il ne change plus que deux fois, et les deux fois pour
   l'encre : là où ça veut dire quelque chose. */

/* COMMENT LES SECTIONS SE SÉPARENT, PUISQUE LE FOND NE CHANGE PLUS.
   La page alterne des sections ouvertes (du texte posé sur le fond) et des
   sections en panneau (les cartes d'app, le panneau de l'IA, le mot du
   fondateur, la fin). Un panneau a un bord : il se sépare tout seul de ce
   qui l'entoure. Il ne reste donc qu'un endroit où deux sections ouvertes
   se touchent, et c'est là seulement qu'on tire un trait. Un trait partout
   aurait rayé la page ; un trait à cet endroit dit « autre sujet ».

   Il s'efface aux deux bouts pour ne pas dessiner une boîte avec les marges. */
.bloc--trait { position: relative; }

.bloc--trait::before {
    content: '';
    position: absolute;
    inset: 0 var(--marge) auto;
    max-width: var(--large);
    height: 1px;
    margin: 0 auto;
    background: linear-gradient(90deg, transparent, rgba(26, 23, 18, 0.28) 18%, rgba(26, 23, 18, 0.28) 82%, transparent);
}
.dedans { max-width: var(--large); margin: 0 auto; }

.entete { max-width: 46rem; margin: 0 auto 4rem; text-align: center; }

.titre {
    font-family: var(--titre);
    font-weight: 600;
    font-size: clamp(2.1rem, 4.4vw, 3.75rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.chapo {
    margin-top: 1.25rem;
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    line-height: 1.45;
    color: var(--encre-douce);
    text-wrap: pretty;
}

/* ===== Les apps ===== */
.apps-grille {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

/* Chaque app a sa teinte, et c'est la seule chose qui les distingue : même
   châssis, même hiérarchie, pour qu'on lise un produit et non quatre rayons.
   Une app ajoutée au catalogue sans teinte ici tombe sur le crème. */
.app {
    --teinte: var(--creme);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 21rem;
    padding: 2.5rem;
    overflow: hidden;
    border-radius: 2rem;
    background: var(--teinte);
    transition: transform 0.4s var(--detente), box-shadow 0.4s var(--detente);
}

.app--flair { --teinte: #dfeadd; --accent: var(--vert); }
.app--trace { --teinte: #f3e2cd; --accent: var(--orange); }
.app--badge { --teinte: #e6dff0; --accent: var(--violet); }
.app--sonar { --teinte: #dae6f0; --accent: var(--bleu); }

/* Un reflet, pour que la teinte ne soit pas un aplat. Au repos il est dans le
   coin ; landing-claire.js le fait suivre le pointeur en posant `--x` et
   `--y`, et sans script il reste simplement où il est. */
.app::after {
    content: '';
    position: absolute;
    left: var(--x, 85%);
    top: var(--y, 0%);
    width: 30rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.8), transparent);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.app:hover {
    transform: translateY(-0.3rem);
    box-shadow: 0 1.75rem 3rem -1.5rem rgba(26, 23, 18, 0.25);
}

.app > * { position: relative; z-index: 1; }

.app-marque {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: 1.75rem;
    border-radius: 24%;
    font-family: var(--titre);
    font-size: 2rem;
    overflow: hidden;
}

/* Le fond encre ne vaut que pour la lettre de repli. Sous une image, il
   débordait dans ses coins transparents et lui dessinait un liseré noir. */
.app-marque--lettre { background: var(--encre); color: var(--creme); }

.app-marque img { width: 100%; height: 100%; object-fit: cover; }

.app-nom {
    font-family: var(--titre);
    font-weight: 600;
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.app-detail { max-width: 27rem; margin: 0.75rem 0 2rem; color: var(--encre-douce); }
.app-ouvrir { margin-top: auto; }
.app:hover .app-ouvrir { background: var(--accent); border-color: var(--accent); color: var(--carte); }

.apps-savoir {
    margin-top: 2.5rem;
    text-align: center;
    font-size: 0.95rem;
    color: var(--encre-douce);
}

.apps-savoir a {
    margin-left: 0.9rem;
    color: var(--encre);
    text-decoration: underline;
    text-decoration-color: var(--trait);
    text-underline-offset: 0.25em;
}

.apps-savoir a:hover { text-decoration-color: var(--encre); }

/* ===== Les trois étapes ===== */
.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }

/* Le trait du haut est un pseudo-élément et non une bordure : une bordure ne
   se dessine pas de gauche à droite, lui si (landing-claire-mouvement.css). */
.etape { --accent: var(--vert); position: relative; padding-top: 1.75rem; }
.etape:nth-child(2) { --accent: var(--bleu); }
.etape:nth-child(3) { --accent: var(--orange); }

.etape::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--accent);
    transform-origin: 0 50%;
}

/* Chaque étape a la couleur d'un état du produit, sur une pastille claire. */
.etape svg {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.5rem;
    padding: 0.7rem;
    border-radius: 0.9rem;
    background: var(--carte);
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.etape h3 {
    font-family: var(--titre);
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.etape p { margin-top: 0.75rem; color: var(--encre-douce); }

/* ===== L'IA : le seul panneau sombre de la page =====
   Une page entièrement claire n'a aucun point d'arrêt. Celui-ci est posé au
   milieu, et c'est là que se dit la règle du produit : aucun chiffre inventé. */
.ia { padding-top: 0; }

.ia-panneau {
    position: relative;
    max-width: 100rem;
    margin: 0 auto;
    padding: clamp(3.5rem, 8vw, 7rem) clamp(1.5rem, 6vw, 6rem);
    overflow: hidden;
    border-radius: 2.5rem;
    background: var(--encre);
    color: var(--creme);
}

/* Le même halo que derrière la fenêtre du premier écran, repris en sombre.

   LA COUCHE EST PLUS GRANDE QUE LE PANNEAU, ET CHAQUE LUEUR S'ÉTEINT AVANT
   SON BORD. Posée à la taille du panneau, avec des lueurs centrées sur ses
   coins, la couche coupait chaque lueur en deux : immobile ça ne se voyait
   pas, mais dès qu'elle dérive son bord entre dans le cadre et la lueur
   s'arrête sur une ligne droite. À -40 %, le coin du panneau tombe à 22,2 %
   de la couche, et un rayon de 22 % finit donc exactement sur son bord.
   Même calcul pour `.fin::before` et, en clair, pour `.scene::before`. */
.ia-panneau::before {
    content: '';
    position: absolute;
    inset: -40%;
    background:
        radial-gradient(22% 22% at 22.2% 22.2%, rgba(154, 200, 164, 0.22), transparent),
        radial-gradient(22% 22% at 77.8% 77.8%, rgba(143, 184, 217, 0.22), transparent);
    pointer-events: none;
}

.ia-panneau > * { position: relative; }

.ia-sources { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem; }

.ia-sources li {
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(247, 242, 233, 0.22);
    border-radius: 999px;
    font-size: 0.875rem;
    color: rgba(247, 242, 233, 0.8);
}

.ia-titre {
    font-family: var(--titre);
    font-weight: 600;
    font-size: clamp(2.8rem, 8vw, 6.5rem);
    line-height: 0.95;
    letter-spacing: -0.045em;
}

.ia-mots {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
    max-width: 64rem;
    margin-top: 4rem;
}

.ia-mots h3 {
    font-family: var(--titre);
    font-weight: 500;
    font-size: 1.45rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.ia-mots p { margin-top: 0.9rem; color: rgba(247, 242, 233, 0.72); }

/* ===== Les guides ===== */
.guides { display: grid; grid-template-columns: 1fr 1.25fr; gap: 5rem; align-items: start; }

/* L'introduction reste en vue pendant que la liste défile à côté. */
.guides-mot { position: sticky; top: 6rem; }
.guides-mot .chapo { font-size: 1.05rem; }
.guides-mot .bouton { margin-top: 2rem; }

.guide { position: relative; padding: 2rem 0; border-top: 1px solid var(--trait); }
.guide:last-child { border-bottom: 1px solid var(--trait); }

.guide-cat { font-size: 0.85rem; font-weight: 500; color: var(--vert); }
.guide:nth-child(2) .guide-cat { color: var(--bleu); }
.guide:nth-child(3) .guide-cat { color: var(--orange); }

.guide h3 {
    margin-top: 0.5rem;
    font-family: var(--titre);
    font-weight: 600;
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
}

/* Le lien couvre toute la ligne : la cible est l'article, pas son titre. */
.guide h3 a::after { content: ''; position: absolute; inset: 0; }
.guide p { max-width: 38rem; margin-top: 0.6rem; color: var(--encre-douce); }
.guide:hover h3 { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1.5px; }

/* ===== Le mot du fondateur ===== */
/* En panneau clair, le pendant du panneau sombre de l'IA : c'est son bord qui
   le sépare des guides au-dessus et de la fin en dessous. */
.temoin { padding-top: 0; }

.mot {
    max-width: var(--large);
    margin: 0 auto;
    padding: clamp(3rem, 7vw, 6.5rem) clamp(1.5rem, 8vw, 9rem);
    border: 1px solid var(--trait);
    border-radius: 2.5rem;
    background: var(--carte);
    text-align: center;
}

.mot blockquote {
    font-family: var(--titre);
    font-weight: 500;
    font-size: clamp(1.6rem, 3.2vw, 2.75rem);
    line-height: 1.18;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.mot-auteur { margin-top: 2rem; color: var(--encre-douce); }
.mot-auteur span { color: var(--encre); font-weight: 600; }

/* ===== Le contact : la page se termine sur l'encre =====
   L'encre est la couleur de l'intérieur du produit en thème sombre. Finir
   dessus, c'est montrer où mène le bouton. */
.fin {
    position: relative;
    overflow: hidden;
    background: var(--encre);
    color: var(--creme);
}

.contact { text-align: center; }

/* Le halo est sur `.fin`, qui contient aussi le pied : posé sur le contact
   seul, il était coupé net à la jointure. */
.fin::before {
    content: '';
    position: absolute;
    inset: -40%;
    background:
        radial-gradient(22% 22% at 22.2% 77.8%, rgba(217, 160, 106, 0.22), transparent),
        radial-gradient(22% 22% at 77.8% 22.2%, rgba(179, 163, 212, 0.22), transparent);
    pointer-events: none;
}

.contact .dedans, .fin footer { position: relative; }
.contact .bouton { margin-top: 2.25rem; }

.bouton--creme { background: var(--creme); border-color: var(--creme); color: var(--encre); }
.bouton--creme:hover { background: #fff; border-color: #fff; }

.contact-infos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 5.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(247, 242, 233, 0.16);
    text-align: left;
}

.contact-quoi { font-size: 0.875rem; color: rgba(247, 242, 233, 0.6); }
.contact-valeur { margin-top: 0.25rem; font-weight: 500; }
.contact-valeur a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* Le pied va d'un bord à l'autre pour continuer l'encre, et son contenu
   s'aligne sur la boîte commune par le remplissage. */
footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding: 2rem max(var(--marge), calc((100% - var(--large)) / 2)) 3rem;
    font-size: 0.875rem;
    color: rgba(247, 242, 233, 0.6);
}

.pied-liens { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.pied-liens a:hover { color: var(--creme); }

/* ===== Petits écrans ===== */
@media (max-width: 900px) {
    .bloc { padding: 5rem var(--marge); }
    .entete { margin-bottom: 2.75rem; }
    .apps-grille, .etapes, .ia-mots, .guides, .contact-infos { grid-template-columns: 1fr; }
    .etapes, .ia-mots { gap: 2.5rem; }
    .guides { gap: 3rem; }
    .guides-mot { position: static; }
    .app { min-height: 0; padding: 2rem; }
    .ia-panneau, .mot { border-radius: 1.75rem; }
    .contact-infos { margin-top: 4rem; gap: 1.5rem; }
    .apps-savoir a { display: inline-block; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .app, .bouton { transition: none; }
}