/* =====================================================================
   Portfolio Stéphan Rocoplan — feuille de style du site public

   Thème sombre, la photographie occupant tout l'espace visuel. L'interface
   se fait discrète : peu de contrastes, pas de bordures inutiles, et une
   mosaïque sans marge où les images se touchent.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Roboto, hébergé localement

   Police variable : un seul fichier de 43 Ko couvre toutes les graisses,
   là où deux fichiers statiques en auraient pesé davantage. Servie depuis
   le serveur et non depuis un CDN, conformément à la règle du projet :
   aucun service tiers, et aucune requête vers Google au chargement.

   `font-display: swap` affiche immédiatement la police de repli plutôt
   que de laisser le texte invisible le temps du téléchargement.
   --------------------------------------------------------------------- */

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/roboto-latin-variable.woff2") format("woff2-variations"),
         url("../fonts/roboto-latin-variable.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --police: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --graisse-titre: 300;  /* Roboto Light — titres */
    --graisse-menu: 400;   /* Roboto Regular — navigation */

    --noir: #000;
    --fond: #0a0a0a;
    --fond-eleve: #141414;
    --texte: #e8e8e8;
    --texte-doux: #9a9a9a;
    --texte-tres-doux: #6a6a6a;
    /* Couleur secondaire : surlignage du menu, liens, boutons, titres de
       forfait. Un seul point à modifier pour la faire varier partout. */
    --accent: #4d9de0;
    --bordure: #232323;

    --largeur-page: 68rem;
    --gouttiere: 1.5rem;

    /* Séparation entre les photos des mosaïques. */
    --espacement-photos: 4px;

    --transition: 180ms ease;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font-family: var(--police);
    font-weight: var(--graisse-menu);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

h1, h2, h3 { font-weight: var(--graisse-titre); line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); letter-spacing: .12em; text-transform: uppercase; }
h2 { font-size: 1.25rem; letter-spacing: .06em; }

/* Masque un élément à l'écran en le laissant lisible par les lecteurs d'écran
   et les moteurs de recherche. `display: none` l'en priverait aussi. */
.visuellement-cache {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Lien d'évitement : invisible tant qu'il n'a pas le focus clavier. */
.saut-contenu {
    position: absolute; left: -9999px;
    background: var(--accent); color: var(--noir);
    padding: .75rem 1.25rem; z-index: 200;
}
.saut-contenu:focus { left: 1rem; top: 1rem; }

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

.entete {
    background: var(--noir);
    border-bottom: 1px solid var(--bordure);
    position: sticky; top: 0; z-index: 100;
}

.entete__barre {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--gouttiere);
    padding: 1rem var(--gouttiere);
}

.logo { display: block; }
.logo img {
    width: auto;
    /* Le logo est un filigrane clair sur fond transparent : il se pose
       directement sur le noir de l'en-tête, sans cartouche. */
    height: clamp(38px, 4.5vw, 52px);
    transition: opacity var(--transition);
}
.logo:hover img { opacity: .8; }

.entete__titre {
    margin: 0; text-align: center;
    font-family: var(--police);
    font-weight: var(--graisse-titre);
    font-size: clamp(.85rem, 2vw, 1.15rem);
    letter-spacing: .42em; text-transform: uppercase;
    color: var(--texte); white-space: nowrap;
}

.reseaux {
    list-style: none; margin: 0; padding: 0;
    display: flex; gap: 1rem; justify-content: flex-end; align-items: center;
}
.reseaux a { color: var(--texte-doux); transition: color var(--transition); display: block; }
.reseaux a:hover { color: var(--accent); }
.icone { width: 20px; height: 20px; }

/* ---------------------------------------------------------------------
   Navigation
   --------------------------------------------------------------------- */

.navigation__bascule {
    display: none;
    background: none; border: 0; color: var(--texte);
    font: inherit; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase;
    padding: .9rem var(--gouttiere); width: 100%;
    align-items: center; gap: .7rem; cursor: pointer;
}

.navigation__bascule-barres,
.navigation__bascule-barres::before,
.navigation__bascule-barres::after {
    display: block; width: 20px; height: 1px; background: currentColor; position: relative;
}
.navigation__bascule-barres::before,
.navigation__bascule-barres::after { content: ""; position: absolute; left: 0; }
.navigation__bascule-barres::before { top: -6px; }
.navigation__bascule-barres::after { top: 6px; }

.menu {
    list-style: none; margin: 0;
    padding: 0 var(--gouttiere) .85rem;
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: 1.6rem;
}

.menu > li > a {
    font-family: var(--police);
    font-weight: var(--graisse-menu);
    font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--texte-doux);
    padding: .3rem 0;
    display: inline-flex; align-items: center; gap: .4rem;
    border-bottom: 1px solid transparent;
    transition: color var(--transition), border-color var(--transition);
}
.menu > li > a:hover,
.menu > li > a[aria-current="page"] { color: var(--texte); border-bottom-color: var(--accent); }

.menu__fleche {
    width: 0; height: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 4px solid currentColor;
}

/* Sous-menu Portfolio : alimenté par les galeries publiées depuis Lightroom. */
.menu__deroulant { position: relative; }

.sous-menu {
    list-style: none; margin: 0; padding: .5rem 0;
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(-6px);
    min-width: 15rem;
    background: var(--noir);
    border: 1px solid var(--bordure);
    opacity: 0; visibility: hidden;
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index: 110;
}

.menu__deroulant:hover .sous-menu,
.menu__deroulant:focus-within .sous-menu,
.sous-menu.est-ouvert {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

.sous-menu a {
    display: block; padding: .5rem 1.2rem;
    font-family: var(--police);
    font-weight: var(--graisse-menu);
    font-size: .8rem; letter-spacing: .08em;
    color: var(--texte-doux);
    transition: color var(--transition), background var(--transition);
}
.sous-menu a:hover,
.sous-menu a[aria-current="page"] { color: var(--texte); background: var(--fond-eleve); }

/* =====================================================================
   Mosaïque

   Colonnes CSS plutôt que JavaScript : la disposition est calculée par le
   navigateur avant le premier rendu, donc aucun saut de mise en page au
   chargement — ce qui compte d'autant plus que les images sont nombreuses.
   ===================================================================== */

.mosaique {
    column-count: 4;
    /* Fine séparation entre les images, comme sur le site d'origine : elle
       délimite les photos sans les isoler. `--espacement-photos` la pilote
       horizontalement et verticalement d'un seul endroit. */
    column-gap: var(--espacement-photos);
    padding: var(--espacement-photos);
}

@media (max-width: 1200px) { .mosaique { column-count: 3; } }
@media (max-width: 800px)  { .mosaique { column-count: 2; } }
@media (max-width: 480px)  { .mosaique { column-count: 1; } }

.mosaique__element {
    margin: 0 0 var(--espacement-photos);
    break-inside: avoid;
    page-break-inside: avoid; /* anciens moteurs */
}

.mosaique__declencheur {
    display: block; width: 100%;
    padding: 0; border: 0; background: none;
    cursor: zoom-in;
    position: relative;
    overflow: hidden;
}

.mosaique__declencheur img {
    width: 100%; height: auto;
    transition: opacity var(--transition), transform 400ms ease;
}
.mosaique__declencheur:hover img { opacity: .55; transform: scale(1.015); }
.mosaique__declencheur:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Loupe au survol : indique que la photo s'ouvre en plein écran. Elle est
   dessinée en CSS plutôt qu'en image — une requête de moins, et elle suit la
   couleur du texte. */
.mosaique__loupe {
    position: absolute;
    top: 50%; left: 50%;
    width: 46px; height: 46px;
    margin: -23px 0 0 -23px;
    opacity: 0;
    transform: scale(.7);
    transition: opacity 250ms ease, transform 250ms ease;
    pointer-events: none;
    color: #fff;
}

.mosaique__declencheur:hover .mosaique__loupe,
.mosaique__declencheur:focus-visible .mosaique__loupe {
    opacity: 1;
    transform: scale(1);
}

.mosaique__loupe svg {
    width: 100%; height: 100%;
    /* Ombre portée discrète : sans elle, la loupe disparaît sur une photo
       claire. */
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6));
}

/* =====================================================================
   Lightbox
   ===================================================================== */

.lightbox {
    position: fixed; inset: 0; z-index: 300;
    background: rgba(0, 0, 0, .96);
    display: flex; align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none; }

.lightbox__cadre {
    margin: 0;
    max-width: 92vw; max-height: 88vh;
    display: flex; flex-direction: column; align-items: center; gap: .9rem;
}

/* Transition d'une photo à l'autre.

   Fondu enchaîné avec un léger retrait d'échelle, plutôt qu'un glissement
   latéral. Le glissement supposait de deviner un sens de lecture, et se
   lisait mal : l'image sortait d'un côté puis la suivante surgissait sans
   transition d'entrée. Le fondu reste juste quel que soit le sens, et
   convient mieux à la consultation posée d'un portfolio.

   La nouvelle image n'est posée qu'une fois chargée — sans quoi le fondu
   d'entrée jouerait sur un cadre vide. */
.lightbox__image {
    max-width: 92vw; max-height: 82vh;
    width: auto; height: auto;
    object-fit: contain;
    transition: opacity 260ms ease, transform 260ms ease;
}

.lightbox__image.en-transition {
    opacity: 0;
    transform: scale(.965);
}

.lightbox__legende {
    color: var(--texte-doux); font-size: .85rem; letter-spacing: .06em; text-align: center;
    transition: opacity 260ms ease;
}

.lightbox__legende.en-transition { opacity: 0; }

.lightbox__fermer,
.lightbox__precedent,
.lightbox__suivant {
    position: absolute;
    background: none; border: 0; color: var(--texte-doux);
    cursor: pointer; line-height: 1;
    transition: color var(--transition);
    padding: 1rem;
}
.lightbox__fermer:hover,
.lightbox__precedent:hover,
.lightbox__suivant:hover { color: var(--texte); }

.lightbox__fermer { top: .5rem; right: 1rem; font-size: 2.6rem; }
.lightbox__precedent { left: .5rem; top: 50%; transform: translateY(-50%); font-size: 4rem; }
.lightbox__suivant  { right: .5rem; top: 50%; transform: translateY(-50%); font-size: 4rem; }

.lightbox__compteur {
    position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
    margin: 0; color: var(--texte-tres-doux); font-size: .75rem; letter-spacing: .2em;
}

@media (max-width: 640px) {
    .lightbox__precedent, .lightbox__suivant { font-size: 2.4rem; padding: .5rem; }
}

/* =====================================================================
   Sommaire du portfolio
   ===================================================================== */

.galerie-entete {
    text-align: center;
    padding: 3rem var(--gouttiere) 2rem;
}
.galerie-entete__description {
    max-width: 42rem; margin: 0 auto;
    color: var(--texte-doux);
}

/* Les albums adoptent la même mosaïque que les photos : chaque couverture
   garde son rapport d'aspect, ce qui évite le rythme mécanique d'une grille
   à cases identiques. */
.mosaique-albums {
    column-count: 3;
    column-gap: 2px;
    padding: 0 0 3rem;
}

@media (max-width: 1100px) { .mosaique-albums { column-count: 2; } }
@media (max-width: 680px)  { .mosaique-albums { column-count: 1; } }

.album {
    position: relative;
    display: block;
    overflow: hidden;
    margin-bottom: 2px;
    break-inside: avoid;
    page-break-inside: avoid;
}
.album:hover { color: inherit; }

.album__image {
    width: 100%; height: auto;
    transition: transform 500ms ease, opacity 600ms ease;
}
.album:hover .album__image { transform: scale(1.04); opacity: .72; }

.album__vide { display: block; width: 100%; aspect-ratio: 4 / 3; background: var(--fond-eleve); }

.album__legende {
    position: absolute; inset: auto 0 0 0;
    padding: 3rem 1.2rem 1.1rem;
    background: linear-gradient(to top, rgba(0, 0, 0, .9), transparent);
    display: flex; flex-direction: column; gap: .15rem;
}
.album__nom {
    font-weight: var(--graisse-menu);
    font-size: .95rem; letter-spacing: .14em; text-transform: uppercase;
}
.album__compte { font-size: .72rem; letter-spacing: .1em; color: var(--texte-doux); }

/* ---------------------------------------------------------------------
   Apparition en fondu

   Les images arrivent en fondu une fois chargées, plutôt que de surgir
   brutalement. L'état initial est posé par le CSS, la classe `est-chargee`
   par le JavaScript au chargement de chaque image.

   Le repli `no-js` est indispensable : sans lui, un visiteur dont le
   JavaScript ne s'exécute pas ne verrait jamais aucune image.
   --------------------------------------------------------------------- */

.image-fondu {
    opacity: 0;
    transform: scale(1.02);
    transition: opacity 700ms ease, transform 700ms ease;

    /* Filet de sécurité : si le JavaScript n'ajoute jamais `est-chargee`
       — erreur d'exécution, navigateur exotique —, l'image apparaît malgré
       tout au bout de quelques secondes. Sur un site de photographe, des
       images définitivement invisibles seraient bien pires qu'un fondu
       imparfait. */
    animation: revelation-secours 400ms ease 5s forwards;
}

@keyframes revelation-secours {
    to { opacity: 1; transform: none; }
}

.image-fondu.est-chargee,
html.sans-js .image-fondu {
    opacity: 1;
    transform: none;
    /* Le fondu normal a eu lieu : le filet n'a plus lieu d'être. */
    animation: none;
}

/* Le survol d'un album ne doit pas être contrarié par la transformation
   résiduelle du fondu. */
.album:hover .album__image.est-chargee { transform: scale(1.04); }

/* =====================================================================
   Pages de contenu
   ===================================================================== */

.page {
    max-width: var(--largeur-page);
    margin: 0 auto;
    padding: 3.5rem var(--gouttiere) 4rem;
}

.page__entete { text-align: center; margin-bottom: 2.5rem; }

.page__chapeau {
    font-size: 1.1rem; color: var(--texte);
    max-width: 44rem; margin: 0 auto 2rem;
    text-align: center;
}

.page__corps p { color: var(--texte-doux); max-width: 44rem; margin: 0 auto 1.2rem; }
.page__corps strong { color: var(--texte); font-weight: 500; }

.page__section { margin-top: 3rem; }
.page__section h2 { text-align: center; color: var(--texte); }

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

.bouton {
    display: inline-block;
    padding: .8rem 2rem;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
    background: none; cursor: pointer; font-family: inherit;
    transition: background var(--transition), color var(--transition);
}
.bouton:hover { background: var(--accent); color: var(--noir); }
.bouton--discret { border-color: var(--bordure); color: var(--texte-doux); }
.bouton--discret:hover { border-color: var(--accent); background: none; color: var(--accent); }

/* Formules ---------------------------------------------------------- */

/* Deux offres seulement : elles occupent chacune la moitié de la largeur et
   sont traitées comme des propositions, non comme des lignes de tarif. */
.formules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 1px;
    background: var(--bordure);
    border: 1px solid var(--bordure);
    margin: 2.5rem 0;
}

.formule {
    background: var(--fond);
    padding: 2.4rem 2rem;
    display: flex; flex-direction: column; gap: .6rem;
}

/* La formule principale se distingue par un liseré haut et un fond légèrement
   relevé, sans rompre l'unité de la page. */
.formule--principale {
    background: var(--fond-eleve);
    border-top: 2px solid var(--accent);
}

.formule__etiquette {
    margin: 0;
    font-size: .7rem; letter-spacing: .24em; text-transform: uppercase;
    color: var(--texte-tres-doux);
}

.formule__nom { color: var(--texte); margin: 0 0 .4rem; font-size: 1.6rem; }
.formule--principale .formule__nom { color: var(--accent); }

.formule__prix { margin: 0 0 .2rem; display: flex; align-items: baseline; gap: .4rem; }
.formule__montant { font-size: 2.4rem; font-weight: var(--graisse-titre); color: var(--texte); }
.formule__mention { font-size: .8rem; letter-spacing: .16em; color: var(--texte-doux); }

.formule__duree {
    margin: 0 0 1rem;
    font-size: .85rem; letter-spacing: .1em;
    color: var(--texte-doux);
}

.formule__points { list-style: none; padding: 0; margin: 0; color: var(--texte-doux); }
.formule__points li { padding-left: 1.4rem; position: relative; margin-bottom: .5rem; font-size: .95rem; }
.formule__points li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }

.formule__action { margin: auto 0 0; padding-top: 1.6rem; }

/* Types de prise de vue --------------------------------------------- */

.types-shooting {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.type-shooting { margin: 0; }
.type-shooting__image { width: 100%; height: auto; }
.type-shooting__nom {
    margin: .9rem 0 .3rem;
    font-size: .95rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--accent);
}
.type-shooting__texte { color: var(--texte-doux); font-size: .9rem; margin: 0; }

/* Supports de diffusion --------------------------------------------- */

.supports {
    list-style: none; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1px;
    background: var(--bordure);
    border: 1px solid var(--bordure);
    margin: 2rem 0;
    max-width: none;
}

.support { background: var(--fond); padding: 1.6rem 1.3rem; }
.support__nom {
    margin: 0 0 .5rem;
    font-size: .85rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--accent);
}
.support__texte { margin: 0; color: var(--texte-doux); font-size: .9rem; }

/* Démarche créative -------------------------------------------------- */

.animations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}
.animation { margin: 0; }
.animation img { width: 100%; height: auto; }

/* Comparatifs avant / après ------------------------------------------

   L'image retouchée est posée en premier, l'originale par-dessus. C'est cette
   dernière qui s'efface au survol : le résultat final reste donc affiché par
   défaut, et l'on découvre le fichier de départ.

   `tabindex` sur la figure rend la bascule accessible au clavier, et la classe
   posée en JavaScript la rend utilisable au doigt — le survol n'existant pas
   sur un écran tactile. */

.comparatifs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.comparatif {
    position: relative;
    margin: 0;
    overflow: hidden;
    cursor: help;
}

.comparatif img { width: 100%; height: auto; display: block; }

.comparatif__resultat {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: opacity 350ms ease;
}

.comparatif:hover .comparatif__resultat,
.comparatif:focus-visible .comparatif__resultat,
.comparatif.montre-origine .comparatif__resultat { opacity: 0; }

.comparatif__etiquette {
    position: absolute; left: 0; bottom: 0;
    padding: .45rem .9rem;
    background: rgba(0, 0, 0, .75);
    font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--texte-doux);
}

.comparatif__etat::before { content: "Après retouche"; }
.comparatif:hover .comparatif__etat::before,
.comparatif:focus-visible .comparatif__etat::before,
.comparatif.montre-origine .comparatif__etat::before { content: "Avant retouche"; color: var(--accent); }

/* Le texte servant de repli sans CSS est masqué une fois la feuille chargée. */
.comparatif__etat { font-size: 0; }
.comparatif__etat::before { font-size: .7rem; }

/* Foire aux questions ------------------------------------------------ */

.faq { max-width: 44rem; margin: 2rem auto 0; }

.faq__item { border-bottom: 1px solid var(--bordure); }

.faq__question {
    cursor: pointer;
    padding: 1rem 2rem 1rem 0;
    position: relative;
    color: var(--texte);
    font-size: 1rem; letter-spacing: .04em;
    list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }

.faq__question::after {
    content: "+";
    position: absolute; right: .3rem; top: 50%;
    transform: translateY(-50%);
    color: var(--accent); font-size: 1.3rem; line-height: 1;
    transition: transform var(--transition);
}
.faq__item[open] .faq__question::after { content: "−"; }

.faq__question:hover { color: var(--accent); }

.faq__reponse {
    margin: 0 0 1.2rem;
    color: var(--texte-doux);
    font-size: .95rem;
}

/* Listes ------------------------------------------------------------ */

.liste-check, .liste-sujets, .references {
    list-style: none; padding: 0;
    max-width: 44rem; margin: 0 auto;
    color: var(--texte-doux);
}
.liste-check li { padding-left: 1.6rem; position: relative; margin-bottom: .5rem; }
.liste-check li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }

.liste-sujets { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .4rem 1.5rem; }
.liste-sujets li { padding-left: 1.2rem; position: relative; }
.liste-sujets li::before { content: "·"; position: absolute; left: 0; color: var(--accent); font-size: 1.4em; line-height: 1; }

.fiche { max-width: 34rem; margin: 0 auto; }
.fiche__ligne { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--bordure); }
.fiche__ligne dt { color: var(--texte-doux); font-size: .85rem; letter-spacing: .08em; }
.fiche__ligne dd { margin: 0; text-align: right; }
.fiche__note { font-size: .82rem; color: var(--texte-tres-doux); text-align: center; margin-top: 1.2rem; }

/* Logos clients.

   Fond clair, à rebours du reste du site : un logo est presque toujours dessiné
   pour du papier blanc, et beaucoup sont en noir. Sur le fond sombre des pages,
   ils seraient tout simplement invisibles. */
.references {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 1px;
    background: var(--bordure);
    border: 1px solid var(--bordure);
    max-width: none;
    margin: 2.5rem 0;
}

.reference {
    background: #f4f4f4;
    aspect-ratio: 3 / 2;
    padding: 1.6rem;
    display: flex; align-items: center; justify-content: center;
}

.reference__logo {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.reference__nom { font-size: 1.1rem; letter-spacing: .16em; text-transform: uppercase; color: var(--texte-doux); }

/* =====================================================================
   Formulaire de contact
   ===================================================================== */

.page--contact { max-width: 48rem; }

.formulaire { display: flex; flex-direction: column; gap: 1.3rem; }
.formulaire__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
@media (max-width: 600px) { .formulaire__ligne { grid-template-columns: 1fr; } }

.champ { margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.champ label, .champ legend {
    font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--texte-doux);
}
.champ__requis { color: var(--accent); }

.champ input, .champ textarea {
    background: var(--fond-eleve);
    border: 1px solid var(--bordure);
    color: var(--texte);
    font: inherit; font-size: .95rem;
    padding: .7rem .85rem;
    transition: border-color var(--transition);
}
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--accent); }
.champ textarea { resize: vertical; }

.champ--choix { border: 0; padding: 0; }
.champ--choix legend { padding: 0 0 .5rem; }
.choix { display: inline-flex; align-items: center; gap: .45rem; margin-right: 1.4rem; text-transform: none; letter-spacing: normal; }
.choix span { font-size: .9rem; color: var(--texte); }

.champ__erreur { color: #e07a5f; font-size: .82rem; margin: 0; }

/* Le piège à robots doit rester invisible sans être `display:none`, que
   certains automates savent détecter. */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formulaire__actions { margin: .5rem 0 0; }
.formulaire__mention { font-size: .78rem; color: var(--texte-tres-doux); margin: 0; }

.alerte { padding: 1rem 1.2rem; border: 1px solid var(--bordure); margin-bottom: 2rem; }
.alerte p { margin: 0; }
.alerte--succes { border-color: var(--accent); color: var(--texte); }
.alerte--erreur { border-color: #e07a5f; color: #e0a08f; }

.contact-direct { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--bordure); text-align: center; }
.contact-direct a { color: var(--accent); }
.contact-direct__zone { color: var(--texte-tres-doux); font-size: .85rem; }

/* =====================================================================
   États vides et pied de page
   ===================================================================== */

.message-vide { text-align: center; padding: 6rem var(--gouttiere); color: var(--texte-doux); }
.message-vide__aide { font-size: .88rem; color: var(--texte-tres-doux); }
.message-vide a { color: var(--accent); }

.pied {
    border-top: 1px solid var(--bordure);
    padding: 2.5rem var(--gouttiere);
    text-align: center;
}
.pied__mention { margin: 0 0 .5rem; font-size: .8rem; letter-spacing: .1em; color: var(--texte-doux); }
.pied__liens { margin: 0; font-size: .82rem; color: var(--texte-tres-doux); }
.pied__liens a { color: var(--texte-tres-doux); }
.pied__liens a:hover { color: var(--accent); }

/* =====================================================================
   Navigation repliée sur petit écran
   ===================================================================== */

@media (max-width: 900px) {
    .entete__barre { grid-template-columns: 1fr auto; grid-template-areas: "logo reseaux" "titre titre"; }
    .logo { grid-area: logo; }
    .reseaux { grid-area: reseaux; }
    .entete__titre { grid-area: titre; text-align: center; letter-spacing: .3em; }

    .navigation__bascule { display: flex; justify-content: center; border-top: 1px solid var(--bordure); }

    .menu { display: none; flex-direction: column; align-items: center; gap: 0; padding-bottom: 0; }
    .menu.est-ouvert { display: flex; }
    .menu > li { width: 100%; text-align: center; border-top: 1px solid var(--bordure); }
    .menu > li > a { display: flex; justify-content: center; padding: .85rem 0; width: 100%; }

    .sous-menu {
        position: static; transform: none; opacity: 1; visibility: visible;
        display: none; border: 0; border-top: 1px solid var(--bordure);
        background: var(--fond-eleve); min-width: 0;
    }
    .sous-menu.est-ouvert { display: block; }
    .menu__deroulant:hover .sous-menu { display: none; }
    .menu__deroulant:hover .sous-menu.est-ouvert { display: block; }
}

/* Respect de la préférence système : pas d'animation pour qui n'en veut pas. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}