/* Couche d'interface commune : boutons et cadres.
   Inspiration Apple (rayons genereux, profondeur en couches, verre depoli,
   ressort a l'appui) croisee One UI (grands rayons, surfaces teintees plutot
   que bordures, cibles larges). La palette reste celle du site :
   bleu #0070F2, violet #A100FF, navy #0A2145.

   Chargee en DERNIER : elle affine styles.css et sapfx-styles.css sans les
   remplacer. */

:root {
    --r-sm: 12px;
    --r-md: 18px;
    --r-lg: 24px;
    --r-xl: 30px;
    --r-pill: 999px;

    /* Ombres en couches : un contact net, puis une diffusion large. */
    --shadow-1: 0 1px 2px rgba(10, 33, 69, 0.05), 0 3px 10px rgba(10, 33, 69, 0.05);
    --shadow-2: 0 2px 6px rgba(10, 33, 69, 0.07), 0 14px 30px rgba(10, 33, 69, 0.09);
    --shadow-3: 0 10px 24px rgba(10, 33, 69, 0.13), 0 34px 68px rgba(10, 33, 69, 0.22);

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --spring: cubic-bezier(0.34, 1.4, 0.64, 1);

    --tint-blue: rgba(0, 112, 242, 0.09);
    --tint-blue-hover: rgba(0, 112, 242, 0.15);
    --surface: #F3F6FC;
    --hairline: rgba(10, 33, 69, 0.09);

    /* Gabarit unique des boutons du site : une seule taille, declaree ici,
       reprise par .cta-button, .cf-btn et les pastilles .try-links. Changer
       ces quatre valeurs suffit a redimensionner tous les boutons. */
    --btn-height: 40px;
    --btn-padding: 9px 24px;
    --btn-font-size: 0.95em;
    --btn-font-weight: 500;
}

/* ============================================================ boutons

   Dessin volontairement fin : hauteur basse, graisse moyenne et ombre
   discrete. Un bouton epais attire l'oeil avant le texte ; ici c'est le
   propos qui porte, le bouton se contente d'etre lisible et cliquable.
   La hauteur reste au-dessus de 40px, seuil de confort tactile. */

.cta-button,
.cf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--btn-height);
    padding: var(--btn-padding);
    font: inherit;
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    letter-spacing: -0.005em;
    border: none;
    border-radius: var(--r-pill);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.22s var(--ease), color 0.22s var(--ease),
                box-shadow 0.22s var(--ease), transform 0.16s var(--spring);
}

.cta-button,
.cf-btn-primary {
    background: #0070F2;
    color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 61, 133, 0.18), 0 4px 10px rgba(0, 112, 242, 0.16);
}

.cta-button:hover,
.cf-btn-primary:hover {
    background: #0A63CE;
    color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 61, 133, 0.22), 0 6px 16px rgba(0, 112, 242, 0.22);
    transform: translateY(-1px);
}

/* Le ressort a l'appui : le geste tactile d'iOS et de One UI. */
.cta-button:active,
.cf-btn:active {
    transform: scale(0.965);
    transition-duration: 0.08s;
}

.cf-btn-primary:disabled {
    background: #A9C4E8;
    box-shadow: none;
    cursor: default;
    transform: none;
}

/* Secondaire : surface teintee, sans bordure (One UI). */
.cf-btn-ghost {
    background: var(--tint-blue);
    color: #0A63CE;
}

.cf-btn-ghost:hover {
    background: var(--tint-blue-hover);
    color: #0A63CE;
}

.cf-btn-ghost.is-done {
    background: #0070F2;
    color: #FFFFFF;
}

/* Deux exceptions assumees au gabarit ci-dessus, parce qu'elles ne sont pas
   des boutons d'action mais des micro-commandes posees dans du texte :
   la pastille « copier » de la bande contact (elle suit une adresse en
   0.86em, la mettre a 40px casserait la ligne) et l'index du glossaire
   (plusieurs dizaines de termes, qui deviendraient un mur de pastilles).
   Elles gardent la meme forme, le meme rayon et les memes couleurs. */

/* Sur fond navy, la version claire du bouton secondaire. */
.cta-band .copy-mail {
    min-height: 26px;
    /* L'espacement vient du `gap` de .cta-alt, qui est en flex. */
    margin-left: 0;
    padding: 4px 13px;
    font: inherit;
    font-size: 0.85em;
    font-weight: 500;
    color: #D6E4FA;
    background: rgba(255, 255, 255, 0.11);
    border: none;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: background 0.22s var(--ease), color 0.22s var(--ease),
                transform 0.16s var(--spring);
}

.cta-band .copy-mail:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
}

.cta-band .copy-mail:active {
    transform: scale(0.94);
}

.cta-band .copy-mail.is-done {
    background: #5AA6FF;
    color: #06172F;
}

/* --- Rangees d'actions du site (SAPFX, tutoriel) : des pastilles teintees
       plutot que des liens nus. La premiere de la rangee est l'action
       principale, en bleu plein. */
.try-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}

.try-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--btn-height);
    margin: 0;
    padding: var(--btn-padding);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    letter-spacing: -0.005em;
    color: #0A63CE;
    background: var(--tint-blue);
    border-radius: var(--r-pill);
    text-decoration: none;
    transition: background 0.2s var(--ease), color 0.2s var(--ease),
                transform 0.16s var(--spring);
}

.try-links a:hover {
    background: var(--tint-blue-hover);
    color: #0A63CE;
}

.try-links a:active {
    transform: scale(0.965);
}

.try-links a:first-child {
    color: #FFFFFF;
    background: #0070F2;
    box-shadow: 0 1px 2px rgba(0, 61, 133, 0.16), 0 4px 10px rgba(0, 112, 242, 0.16);
}

.try-links a:first-child:hover {
    background: #0A63CE;
    color: #FFFFFF;
}

/* --- Index du glossaire : petites pastilles de navigation. */
.glossary-index a {
    display: inline-block;
    padding: 7px 15px;
    font-size: 0.93em;
    font-weight: 500;
    color: #35435E;
    background: var(--surface);
    border-bottom: none;
    border-radius: var(--r-pill);
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.glossary-index a:hover {
    background: var(--tint-blue);
    color: #0A63CE;
    border-bottom: none;
}

/* --- Liens de carte : pas de pastille (un separateur les relie), mais un
       lien affirme dont la fleche avance au survol. */
.project-highlight a {
    display: inline-block;
    font-weight: 600;
    color: #0070F2;
    transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}

.project-highlight a:hover {
    color: #0A63CE;
    transform: translateX(2px);
}

/* Anneau de focus unique, visible sur clair comme sur navy. */
.cta-button:focus-visible,
.cf-btn:focus-visible,
.copy-mail:focus-visible,
.cf-close:focus-visible,
.cf-chip:focus-within,
.try-links a:focus-visible,
.glossary-index a:focus-visible {
    outline: 2px solid #5AA6FF;
    outline-offset: 3px;
}

/* ============================================================= cadres */

/* La bande d'appel a l'action est definie entierement dans cta.css :
   layout et fond au meme endroit, pour eviter deux sources de verite. */

.project-highlight {
    border: none;
    border-radius: var(--r-lg);
    background: var(--surface);
    padding: 22px 26px;
    box-shadow: var(--shadow-1);
    transition: transform 0.24s var(--ease), box-shadow 0.24s var(--ease);
}

.project-highlight:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
}

.band {
    border-radius: var(--r-xl);
    background: var(--surface);
    padding: 32px 34px 26px;
}

.code-sample {
    border: none;
    border-radius: var(--r-md);
    background: #0E2547;
    padding: 20px 24px;
    box-shadow: var(--shadow-1);
}

.code-sample pre {
    color: #E6EEFB;
}

.code-sample .comment {
    color: #8AA6CE;
}

.band .code-sample {
    background: #0E2547;
}

.figures-band {
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-2);
    background:
        radial-gradient(120% 130% at 85% 0%, rgba(161, 0, 255, 0.2) 0%, rgba(161, 0, 255, 0) 60%),
        linear-gradient(140deg, #0C2851 0%, #0A2145 60%, #081B39 100%);
}

.inline-figure img,
.video-block video {
    border: none;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
}

hr.separator {
    border-top: 1px solid var(--hairline);
}

/* En-tete : le verre depoli, un peu plus prononce. */
.site-header {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border-bottom: 1px solid var(--hairline);
}

@media (max-width: 768px) {
    .cta-band {
        padding: 32px 20px 28px;
        border-radius: var(--r-lg);
    }

    .band {
        padding: 24px 20px 20px;
        border-radius: var(--r-lg);
    }

    .cta-button,
    .cf-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cta-button,
    .cf-btn,
    .copy-mail,
    .project-highlight {
        transition: none;
    }

    .cta-button:active,
    .cf-btn:active,
    .copy-mail:active {
        transform: none;
    }
}