/*
 * commun.css — socle partagé par ateliermutel.com et acidairlines.com.
 * Source unique : Didier Mutel/Commun/commun.css. deploy.sh en pose une copie dans assets/ de chaque site :
 * ne jamais éditer ces copies. Principes : Didier Mutel/00 - Resources/principes-design.md
 */

:root {
    /* Couleurs : du noir franc, du blanc, un seul gris */
    --noir: #000;
    --blanc: #fff;
    --gris: #595959;            /* texte secondaire sur blanc, contraste 7:1 */
    --gris-sur-noir: #a6a6a6;   /* texte secondaire sur aplat noir */
    --fond-image: #f1f1f1;      /* réserve d'une image pas encore chargée */
    --gris-discret: #8c8c8c;    /* mentions de service (crédit du site), volontairement en retrait */

    /* Trait : l'épaisseur du cadre du pictogramme à l'écran. Tous les filets, tous les bords. */
    --trait: 2px;

    /* Polices (kit Adobe Fonts dku4drp) */
    --mono: "ibm-plex-mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --sans: "ibm-plex-sans", "Helvetica Neue", Arial, sans-serif;
    --titre: "novecento-sans-condensed", "Arial Narrow", sans-serif;

    /* Largeurs : un seul cadre de contenu, et la pleine page */
    --largeur: 1360px;
    --marge: clamp(1rem, 4vw, 3rem);
    --col-cartel: 17rem;

    /* Espacements */
    --esp-1: 0.5rem;
    --esp-2: 1rem;
    --esp-3: 1.5rem;
    --esp-4: 2.5rem;
    --esp-section: clamp(2.5rem, 6vw, 5rem);
    --gap-colonnes: clamp(2rem, 4vw, 3.5rem);
    --gap-images: 1rem;

    /* Étiquettes (mono capitales) */
    --etiquette-corps: 0.75rem;
    --etiquette-chasse: 0.04em;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--blanc);
    color: var(--noir);
}

body {
    overflow-x: clip;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img, video {
    display: block;
    max-width: 100%;
    height: auto;
}

picture {
    display: block;
}

/* ---------- Mise en page ---------- */

/* Le cadre : la seule largeur de contenu. Les filets posés sur un cadre ont donc tous la même longueur. */
.cadre {
    width: min(100% - 2 * var(--marge), var(--largeur));
    margin-inline: auto;
}

/* Pleine page (aplats noirs, bandeau défilant) : l'élément est posé hors du cadre, sur toute la largeur,
   et son contenu est remis dans un .cadre intérieur. Jamais de 100vw ni de marge négative. */

.filet {
    border-top: var(--trait) solid var(--noir);
}

/* Grille cartel + contenu : fiche à gauche, texte ou images à droite */
.grille-cartel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--esp-4);
}

@media (min-width: 760px) {
    .grille-cartel {
        grid-template-columns: var(--col-cartel) minmax(0, 1fr);
        gap: var(--gap-colonnes);
        align-items: start;
    }
}

/* ---------- Liens ---------- */

/* Lien courant : souligné ; au survol, un petit aplat noir avec de l'air autour du texte */
a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    padding: 0.12em 0.3em;
    margin: 0 -0.3em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

a:hover,
a:focus-visible {
    background: var(--noir);
    color: var(--blanc);
    text-decoration: none;
    outline: none;
}

/* ---------- Boutons ---------- */

/* Une seule forme de bouton : boîte rognée à la hauteur des capitales, même air au-dessus et en dessous */
.bouton {
    display: inline-block;
    margin: 0;
    padding: 0.6em 0.7em;
    font-family: var(--mono);
    font-weight: 800;
    font-size: 0.9rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-box: trim-both cap alphabetic;
}

@supports not (text-box: trim-both cap alphabetic) {
    /* Sans rognage, les capitales de Plex Mono ont 0,18 em de plus au-dessus : on compense */
    .bouton {
        padding-top: 0.51em;
        padding-bottom: 0.69em;
    }
}

.bouton-cadre {
    border: var(--trait) solid var(--noir);
    text-decoration: none;
    padding-inline: 1.2em;
}

.bouton[aria-current="page"],
.bouton-actif {
    background: var(--noir);
    color: var(--blanc);
    text-decoration: none;
}

.bouton-secondaire {
    color: var(--gris);
}

/* ---------- En-tête ---------- */

.officiel {
    margin: 0;
    padding: 0.55em var(--marge);
    background: var(--noir);
    color: var(--blanc);
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
}

.bandeau {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-2) var(--esp-4);
    padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    margin: 0;
    padding: 0;
    font-family: var(--titre);
    font-weight: 600;
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

.logo-titre {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

.logo:hover,
.logo:focus-visible {
    background: none;
    color: inherit;
}

.logo-picto {
    display: block;
    width: 0.85em;
    height: auto;
}

.menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--esp-1) var(--esp-3);
    margin-right: -0.63rem; /* le dernier bouton s'aligne sur le bord du cadre par son texte (0,7 em × 0,9 rem) */
}

/* Menu passé à la ligne (mobile) : le texte du premier bouton s'aligne sur le bord gauche du cadre */
@media (max-width: 559px) {
    .menu {
        margin-left: -0.63rem;
    }
}

.menu-sep {
    width: var(--trait);
    height: 1.4em;
    background: var(--noir);
}

/* ---------- Étiquettes ---------- */

.etiquette {
    font-family: var(--mono);
    font-size: var(--etiquette-corps);
    font-weight: 400;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: var(--etiquette-chasse);
}

/* ---------- Images ---------- */

.planche {
    margin: 0;
}

/* La largeur fait référence ; une image trop haute est réduite pour tenir entière à l'écran */
.planche img {
    width: auto;
    max-width: 100%;
    max-height: 85vh;
    max-height: 85svh;
}

/* ---------- Pied de page ---------- */

.pied {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--esp-2) var(--gap-colonnes);
    margin-top: var(--esp-section);
    padding-block: var(--esp-3) var(--esp-4);
    border-top: var(--trait) solid var(--noir);
    font-family: var(--mono);
    font-size: var(--etiquette-corps);
    line-height: 1.6;
    text-transform: uppercase;
    letter-spacing: var(--etiquette-chasse);
}

@media (min-width: 560px) {
    .pied {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 960px) {
    .pied {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.pied p {
    margin: 0;
}

.pied a {
    text-transform: none;
}

.pied-nom {
    font-weight: 800;
}

/* Intitulé d'une colonne du pied (« Commandes ») */
.pied-etiquette {
    color: var(--gris);
}

.pied-credit {
    color: var(--gris-discret);
    font-size: 0.65rem;
}

.pied-credit a {
    white-space: nowrap;
}

/* ---------- Pages de texte (mentions légales, CGV) ---------- */

.texte-legal {
    padding-block: var(--esp-section);
}

.texte-legal h1 {
    margin: 0 0 var(--esp-4);
    font-family: var(--titre);
    font-weight: 600;
    text-transform: uppercase;
    font-size: clamp(2.4rem, 7vw, 5rem);
    line-height: 0.9;
}

.texte-legal h2 {
    margin: var(--esp-4) 0 var(--esp-2);
    padding-top: var(--esp-2);
    border-top: var(--trait) solid var(--noir);
    font-family: var(--mono);
    font-size: var(--etiquette-corps);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: var(--etiquette-chasse);
}

.texte-legal p,
.texte-legal ul {
    max-width: 46rem;
    margin: 0 0 1em;
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.55;
}

.texte-legal ul {
    padding-left: 1.2em;
}

.texte-legal .maj {
    color: var(--gris);
    font-family: var(--mono);
    font-size: var(--etiquette-corps);
}

/* Liens de service du pied (mentions légales, CGV) */
.pied-legal a + a {
    margin-left: 0.8em;
}