/* ====== Accueil ====== */

/* --- Présentation --- */
.hero { padding-block: clamp(40px, 7vw, 96px) clamp(16px, 3vw, 40px); }
.hero h1 { font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4.1rem); }
.hero__grille {
    display: grid;
    gap: clamp(40px, 6vw, 72px);
    align-items: center;
}
.hero__texte { display: flex; flex-direction: column; gap: 24px; }
.hero__texte .annotation { margin-bottom: 0; }
.hero__intro { font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem); color: var(--texte-doux); }
.hero__faits {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    color: var(--texte-doux);
}
.hero__faits li::before { content: "+ "; color: var(--violet-500); font-weight: 600; }

/* --- fig. 1 : vue éclatée des 3 cubes --- */
.hero__figure { margin: 0; }
.gamme { width: 100%; max-width: 560px; margin-inline: auto; overflow: visible; }
.gamme__axes line {
    stroke: var(--bleu-300);
    stroke-width: 1;
    stroke-dasharray: 14 4 2 4; /* trait d'axe */
}
.gamme__cube .ombre { fill: var(--bleu-800); opacity: 0.18; }
.gamme__cube rect:not(.ombre):not(.filet) { stroke: var(--bleu-600); stroke-width: 2.5; }
.gamme__cube .filet { fill: none; stroke: var(--bleu-600); stroke-width: 1.5; opacity: 0.9; }
.gamme__rappels polyline { fill: none; stroke: var(--bleu-800); stroke-width: 1.25; }
.gamme__rappels .point { fill: var(--bleu-800); }
.gamme__reperes circle { fill: #fff; stroke: var(--bleu-800); stroke-width: 1.5; }
.gamme__reperes text {
    font-size: 14px;
    font-weight: 600;
    text-anchor: middle;
    fill: var(--bleu-950);
}
.gamme__cote line { stroke: var(--violet-500); stroke-width: 1; }
.gamme__cote polygon { fill: var(--violet-500); }

/* Les cubes de la figure « respirent » légèrement */
@media (prefers-reduced-motion: no-preference) {
    .gamme__cube { animation: cube_flotte 6s ease-in-out infinite; }
    .gamme__cube:nth-of-type(2) { animation-delay: -2s; }
    .gamme__cube:nth-of-type(3) { animation-delay: -4s; }
    @keyframes cube_flotte {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-5px); }
    }
}

.gamme__legende-titre {
    margin: 14px 0 10px;
    padding-top: 10px;
    border-top: 1px solid var(--trait);
    color: var(--texte-doux);
}
.legende { list-style: none; padding: 0; display: grid; gap: 8px; }
.legende li { display: flex; align-items: center; gap: 12px; }
.legende .repere { font-size: 0.75rem; }
.legende li:nth-child(1) .repere { color: var(--bleu-600); background: var(--bleu-100); }
.legende li:nth-child(2) .repere { color: var(--orange-800); background: var(--orange-100); }
.legende li:nth-child(3) .repere { color: var(--violet-700); background: var(--violet-100); }
.legende a { font-weight: 700; }

@media (min-width: 960px) {
    .hero__grille { grid-template-columns: 1.3fr 0.7fr; }
}

/* --- Produits --- */
.produits {
    display: grid;
    gap: clamp(32px, 4vw, 48px);
}
.statut {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    white-space: nowrap;
}
.statut::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}
@media (min-width: 820px) {
    /* Quinconce : même hauteur pour les deux cartes (étirées par la grille), la seconde
       décalée de 64px vers le bas ; le padding réserve la place du décalage. */
    .produits { grid-template-columns: 1fr 1fr; padding-bottom: 64px; }
    .produits .fiche:nth-child(2) { top: 64px; }
}

/* Katz : la mascotte « sort » du coin de la fiche */
.fiche__titre-katz {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}
.fiche__mascotte {
    width: clamp(88px, 22vw, 128px);
    margin: -44px -8px -10px 0;
}

/* --- Méthode --- */
.methode { display: grid; gap: 40px; }
.methode__intro p:last-child { color: var(--texte-doux); margin-top: 18px; }
.principes {
    list-style: none;
    padding: 0;
    counter-reset: principe;
    display: grid;
    gap: 0;
}
.principes li {
    counter-increment: principe;
    display: grid;
    grid-template-columns: 3.2rem 1fr;
    column-gap: 16px;
    padding: 22px 0;
    border-top: 1px solid var(--trait);
}
.principes li:last-child { border-bottom: 1px solid var(--trait); }
.principes li::before {
    content: counter(principe, decimal-leading-zero);
    grid-row: span 2;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.1;
    color: var(--violet-500);
}
.principes h3 { font-size: 1.25rem; margin-bottom: 6px; }
.principes p { color: var(--texte-doux); }

@media (min-width: 960px) {
    .methode { grid-template-columns: 0.8fr 1.2fr; gap: 72px; align-items: start; }
    .methode__intro { position: sticky; top: calc(var(--en-tete) + 32px); }
}

/* --- Contact : une note épinglée sur le plan --- */
.contact {
    position: relative;
    max-width: 760px;
    padding: clamp(28px, 5vw, 48px);
    background: #fff;
    border: 2px solid var(--ardoise);
    border-radius: var(--cadre-rayon);
    box-shadow: 6px 6px 0 var(--violet-500);
}
.contact h2 { margin-bottom: 12px; }
.contact > p:not(.annotation) { color: var(--texte-doux); margin-bottom: 24px; }
.contact .groupe-btn a { overflow-wrap: anywhere; }
.contact__signature {
    margin: 24px 0 0 !important;
    font-size: 0.875rem;
}

/* --- Style katz-ia.fr : figure épurée sur une lueur bleue floue --- */
.gamme__axes, .gamme__cote { display: none; }
.hero__figure { position: relative; }
.hero__figure::before {
    content: "";
    position: absolute;
    inset: 5% 10% 30%;
    z-index: -1;
    border-radius: 50%;
    background: rgba(82, 123, 204, 0.22);
    filter: blur(70px);
}
.gamme__legende-titre { font-weight: 600; color: var(--texte); border-top-color: var(--trait); }