/* ========== Mise en page ========== */
.section {
    padding-block: var(--espace-section);
}

.contenu-limite {
    width: 100%;
    max-width: var(--largeur-max);
    margin-inline: auto;
    /* En paysage, l'encoche mange un bord de l'écran : la marge s'élargit d'autant. */
    padding-inline: var(--marge-laterale);
}

/* ========== Lien d'évitement ========== */
/* Hors écran tant qu'il n'a pas le focus : il n'existe que pour le clavier. */
.lien-evitement {
    position: fixed;
    top: calc(var(--marge-haute) + 0.5rem);
    left: 50%;
    z-index: 1200;
    padding: 0.7rem 1.2rem;
    border-radius: var(--r-pilule);
    background: var(--surface-haute);
    border: 1px solid var(--bordure-forte);
    color: var(--texte);
    font-size: var(--t-petit);
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--ombre-2);
    transform: translate(-50%, -200%);
    transition: transform var(--transition);
}

.lien-evitement:focus-visible {
    transform: translate(-50%, 0);
}

.titre-section {
    display: flex;
    align-items: center;
    gap: var(--e3);
    margin-bottom: var(--e6);
}

.titre-section::after {
    content: "";
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, var(--bordure-forte), transparent);
}

.mesure {
    max-width: var(--mesure);
}

/* ========== Boutons ========== */
.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e2);
    /* 2.9rem de haut minimum : confortable au pouce. */
    min-height: 2.9rem;
    padding: 0.6rem 1.4rem;
    border: 1px solid transparent;
    border-radius: var(--r-pilule);
    font-size: var(--t-petit);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition),
                background-color var(--transition), border-color var(--transition);
}

.bouton--plein {
    background: var(--gradient-bouton);
    color: #fff;
    box-shadow: var(--ombre-1);
}

.bouton--contour {
    background: transparent;
    border-color: var(--bordure-forte);
    color: var(--texte);
}

.bouton--discret {
    background: var(--surface);
    border-color: var(--bordure);
    color: var(--texte);
}

.bouton:hover {
    color: #fff;
}

@media (hover: hover) {
    .bouton:hover {
        transform: translateY(-2px);
        box-shadow: var(--ombre-2);
    }

    .bouton--contour:hover {
        border-color: var(--accent);
    }
}

.bouton:active {
    transform: translateY(0);
}

/* Au doigt, il n'y a pas de survol : l'appui doit donc se voir lui-même,
   sinon le site paraît ne pas répondre le temps que la page suivante arrive. */
@media (hover: none) {
    .bouton:active,
    .contact:active,
    .adresse:active {
        transform: scale(0.97);
        background-color: var(--surface-haute);
    }

    .puce:active {
        border-color: var(--bordure-forte);
        background: var(--surface-haute);
        color: var(--texte);
    }
}

.bouton--petit {
    min-height: 2.4rem;
    padding: 0.4rem 1rem;
    font-size: var(--t-petit);
}

/* ========== Étiquettes ========== */
.etiquette {
    display: inline-block;
    padding: 0.35rem 0.95rem;
    border: 1px solid var(--bordure-forte);
    border-radius: var(--r-pilule);
    background: rgba(255, 255, 255, 0.06);
    color: var(--accent-doux);
    font-size: var(--t-petit);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

/* ===== Puces de technos ===== */
.puces {
    /* Repère de position des bulles : elles se calent sous la liste entière,
       donc elles ne débordent jamais de la carte. */
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: var(--e1);
    /* Place réservée sous la liste pour que la bulle ne cache pas les boutons. */
    margin-bottom: var(--e4);
}

.puce {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--bordure);
    border-radius: var(--r-pilule);
    background: rgba(255, 255, 255, 0.05);
    font-size: var(--t-petit);
    color: var(--texte-doux);
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

/* Au doigt, rien n'annonce qu'une puce s'ouvre : un signe le dit. */
@media (hover: none) {
    .puce::after {
        content: "+";
        color: var(--texte-discret);
        font-weight: 600;
    }

    .puce[aria-expanded="true"]::after {
        content: "\2212";
    }
}

.puce img {
    width: 1.05rem;
    height: 1.05rem;
    object-fit: contain;
}

.puce:focus-visible,
.puce[aria-expanded="true"] {
    background: var(--surface-haute);
    border-color: var(--bordure-forte);
    color: var(--texte);
}

/* Le survol seul ne suffit pas au toucher : sur iOS il reste collé après l'appui, et la
   puce ne pourrait plus se refermer. Il est donc réservé aux appareils qui savent survoler. */
@media (hover: hover) {
    .puce:hover {
        background: var(--surface-haute);
        border-color: var(--bordure-forte);
        color: var(--texte);
    }
}

/* La bulle de description */
.puce__role {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    z-index: 5;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--bordure-forte);
    border-radius: var(--r-s);
    background: var(--surface-haute);
    box-shadow: var(--ombre-2);
    color: var(--texte-doux);
    font-size: var(--t-petit);
    line-height: 1.5;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    pointer-events: none;
}

.puce:focus-visible .puce__role,
.puce[aria-expanded="true"] .puce__role {
    opacity: 1;
    visibility: visible;
    transform: none;
}

@media (hover: hover) {
    .puce:hover .puce__role {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
}

/* Cibles tactiles : 44 px minimum, là où l'on vise avec un doigt. */
@media (pointer: coarse) {
    .puce,
    .bouton--petit,
    .adresse {
        min-height: 2.75rem;
    }
}

/* ========== Entrée du haut de page ========== */
/* Le haut de page s'anime en CSS seul : il démarre dès la première image, sans attendre
   que le script soit chargé. Avec l'observateur JS, il s'affichait, disparaissait puis
   revenait, le temps que le script arrive. */
@keyframes entree {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

[data-entree] {
    animation: entree 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) both;
    animation-delay: calc(var(--retard, 0) * 80ms);
}

@media (prefers-reduced-motion: reduce) {
    [data-entree] {
        animation: none;
    }
}

/* ========== Apparition au défilement ========== */
/* Le masquage n'est actif que si le JS a pu installer l'observateur : sans lui,
   le contenu reste visible plutôt que de disparaître. */
.reveal-actif [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
    transition-delay: calc(var(--retard, 0) * 90ms);
}

.reveal-actif [data-reveal].visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal-actif [data-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* ========== Progression de lecture ========== */
.progression {
    position: fixed;
    top: var(--marge-haute);
    left: 0;
    right: 0;
    z-index: 1050;
    height: 3px;
    background: var(--gradient-accent);
    /* Mise à l'échelle plutôt que largeur : le navigateur l'anime sans recalculer la mise en page. */
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
}

/* ========== Retour en haut ========== */
.retour-haut {
    position: fixed;
    right: clamp(0.75rem, 3vw, 1.5rem);
    bottom: calc(clamp(0.75rem, 3vw, 1.5rem) + var(--marge-basse));
    z-index: 900;
    width: 2.9rem;
    height: 2.9rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--bordure-forte);
    border-radius: 50%;
    background: var(--surface-haute);
    color: var(--texte);
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: var(--ombre-1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.retour-haut.visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* ========== Message de confirmation ========== */
.toast {
    position: fixed;
    left: 50%;
    bottom: calc(clamp(1rem, 4vw, 2rem) + var(--marge-basse));
    z-index: 1100;
    transform: translate(-50%, 12px);
    padding: 0.7rem 1.2rem;
    border: 1px solid var(--bordure-forte);
    border-radius: var(--r-pilule);
    background: var(--surface-haute);
    color: var(--texte);
    font-size: var(--t-petit);
    box-shadow: var(--ombre-2);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.toast.visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* ========== Impression ========== */
@media print {
    .nav,
    .retour-haut,
    .toast,
    .progression,
    .lien-evitement {
        display: none !important;
    }
}