/* pages-claires.css : « Qui sommes-nous », la FAQ et la confidentialité.

   Ces trois pages portaient chacune 250 lignes de style recopiées dans leur
   en-tête. Elles chargent maintenant les feuilles de la landing (palette,
   barre, titres, fin en encre) et celle-ci, qui ne contient que ce qui leur
   est propre : un en-tête plus court, une colonne de lecture, la liste des
   questions. */

/* ===== L'en-tête de page : le premier écran de la landing, en plus court ===== */
.hero--page { padding-bottom: 4rem; }

.hero--page h1 {
    max-width: 20ch;
    font-size: clamp(2.4rem, 5.6vw, 4.5rem);
}

/* Le même halo que sous la fenêtre de la landing, en plus discret. Chaque
   lueur s'éteint avant le bord de la couche : elle dérive, et un bord coupé
   entrerait dans le cadre. */
.hero--page::before {
    content: '';
    position: absolute;
    inset: 0 5% -10%;
    z-index: -1;
    background:
        radial-gradient(28% 42% at 32% 55%, rgba(47, 125, 79, 0.24), transparent),
        radial-gradient(28% 42% at 68% 48%, rgba(61, 106, 143, 0.24), transparent);
    filter: blur(2rem);
}

.page { padding: 1rem var(--marge) 7rem; }

/* La colonne de lecture. Elle se compte en `ch` et non en pixels : elle suit
   la taille du texte, donc une ligne garde sa longueur sur un écran 4K. */
.page-colonne { max-width: 68ch; margin: 0 auto; }

/* ===== Le texte courant ===== */
.prose p {
    margin-top: 1.15rem;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--encre-douce);
    text-wrap: pretty;
}

.prose strong { color: var(--encre); font-weight: 600; }

.prose a {
    color: var(--encre);
    text-decoration: underline;
    text-decoration-color: rgba(26, 23, 18, 0.3);
    text-underline-offset: 0.22em;
}

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

.prose h2 {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--trait);
    font-family: var(--titre);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.prose ul {
    margin-top: 1rem;
    padding-left: 1.25rem;
    list-style: disc;
    color: var(--encre-douce);
    font-size: 1.0625rem;
    line-height: 1.6;
}

.prose li + li { margin-top: 0.45rem; }

/* La phrase qui dit ce qu'est le produit, en grand : c'est celle qu'un moteur
   cite et qu'un lecteur pressé lit seule. */
.prose .accroche {
    margin-top: 0;
    font-family: var(--titre);
    font-weight: 500;
    font-size: clamp(1.35rem, 2.3vw, 1.8rem);
    line-height: 1.28;
    letter-spacing: -0.02em;
    color: var(--encre);
}

.prose .accroche strong { font-weight: 600; }

/* ===== Les panneaux clairs ===== */
.panneau {
    margin: 3rem 0;
    padding: 2rem 2.25rem;
    border: 1px solid var(--trait);
    border-radius: 1.75rem;
    background: var(--carte);
}

.panneau > p:first-child { margin-top: 0; }

/* Les deux fondateurs. Le panneau déborde de la colonne : c'est la seule
   image de la page, elle prend la place d'une image. */
.fondateurs {
    position: relative;
    display: grid;
    place-items: center;
    margin: 3.5rem -4rem;
    padding: 3.5rem 2rem;
    overflow: hidden;
    border-radius: 2.5rem;
    background: var(--carte);
    border: 1px solid var(--trait);
}

.fondateurs::before {
    content: '';
    position: absolute;
    inset: -40%;
    background:
        radial-gradient(20% 22% at 40% 50%, rgba(164, 99, 42, 0.22), transparent),
        radial-gradient(20% 22% at 60% 50%, rgba(113, 94, 147, 0.22), transparent);
}

.fondateurs svg {
    position: relative;
    width: min(100%, 16rem);
    height: auto;
    fill: none;
    stroke: var(--encre);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-geste { margin-top: 3rem; text-align: center; }

/* ===== La FAQ : la question à gauche, la réponse en face =====
   Tout est ouvert, sans accordéon : une réponse qui demande un clic pour
   s'afficher pèse moins au référencement, et il n'y a que six questions. */
.faq-liste { max-width: 66rem; margin: 0 auto; }

.faq-ligne {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 1.5rem 4rem;
    padding: 2.5rem 0;
    border-top: 1px solid var(--trait);
}

.faq-ligne:last-child { border-bottom: 1px solid var(--trait); }

.faq-ligne h2 {
    font-family: var(--titre);
    font-weight: 600;
    font-size: clamp(1.3rem, 1.9vw, 1.6rem);
    line-height: 1.18;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.faq-ligne p {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--encre-douce);
}

@media (max-width: 900px) {
    .page { padding-bottom: 5rem; }
    .faq-ligne { grid-template-columns: 1fr; padding: 2rem 0; }
    .fondateurs { margin: 2.5rem 0; padding: 2.5rem 1.5rem; border-radius: 1.75rem; }
    .panneau { padding: 1.5rem; border-radius: 1.25rem; }
}

/* Le premier article de la confidentialité n'a rien au-dessus de lui à
   séparer : son trait doublerait le bas de l'en-tête. */
.prose--articles > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* Les deux silhouettes flottent chacune à son rythme. Le mouvement passe par
   `translate`, hors de portée de `transform`, et il est sous la même garde
   que le reste : rien ne bouge pour qui a demandé moins d'animations. */
@media (prefers-reduced-motion: no-preference) {
    .fondateur { animation: flotter-peu 5s ease-in-out infinite alternate; }
    .fondateur--2 { animation-duration: 6.5s; animation-delay: -2s; }
}