/* =========================================================================
   AMELEGAL — feuille de site
   1. Polices auto-hébergées (Inter et Montserrat)
   2. Navigation principale, ajustée à sept entrées
   =========================================================================

   ---------- 1. Polices auto-hébergées
   Inter et Montserrat, exactement les deux familles déjà utilisées par le
   site, servies depuis amelegalconseils.com au lieu de fonts.googleapis.com.
   Aucune requête vers un serveur tiers : l'adresse IP des visiteurs n'est
   plus transmise à Google, et la page se charge sans aller-retour externe.

   Fichiers variables (une graisse continue de 100 à 900) : deux fichiers
   par famille au lieu des quatre à sept requêtes de l'ancien chargement.
   Source : Fontsource (Inter SIL OFL 1.1, Montserrat SIL OFL 1.1).
   ========================================================================= */

/* ---------- Inter (texte courant) ---------- */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(/fonts/inter-latin-wght-normal.woff2) format('woff2-variations');
    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;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(/fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Montserrat (titres, sur-titres, logotype) ---------- */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(/fonts/montserrat-latin-wght-normal.woff2) format('woff2-variations');
    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;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(/fonts/montserrat-latin-ext-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* =========================================================================
   2. NAVIGATION PRINCIPALE
   Le menu compte sept entrées depuis l'ajout de « Publications ».

   La barre horizontale s'affichait à partir de 768 px alors qu'elle a besoin
   d'environ 1 000 px : entre les deux, le bouton « Demander un devis » sortait
   de l'écran. Elle apparaît désormais à partir de 1 024 px, et les tablettes
   plus étroites reçoivent le menu déroulant, qui lui tient sur la largeur.
   Le menu mobile (#mobile-menu) n'est pas touché.
   ========================================================================= */

@media (min-width: 768px) and (max-width: 1023px) {
    header .hidden.md\:flex  { display: none !important; }
    header .flex.md\:hidden  { display: flex !important; }
}

@media (min-width: 1024px) {
    header nav ul:not(#mobile-menu)          { gap: .85rem; }
    header nav ul:not(#mobile-menu) a        { font-size: .92rem; }
    header .hidden.md\:flex > a:first-child  { margin-right: .9rem; }
    header .hidden.md\:flex img              { height: 3rem; }
    header #lang-switch-desktop              { margin-left: .9rem; }
    header .hidden.md\:flex > a[href="/demander-un-devis"],
    header .hidden.md\:flex > a[href="/en/request-a-quote"] {
        margin-left: .9rem;
        padding: .65rem 1.2rem;
        font-size: .95rem;
    }
}

@media (min-width: 1280px) {
    header nav ul:not(#mobile-menu)          { gap: 1.5rem; }
    header nav ul:not(#mobile-menu) a        { font-size: 1.05rem; }
    header .hidden.md\:flex > a:first-child  { margin-right: 1.9rem; }
    header .hidden.md\:flex img              { height: 3.5rem; }
    header #lang-switch-desktop              { margin-left: 1.75rem; }
    header .hidden.md\:flex > a[href="/demander-un-devis"],
    header .hidden.md\:flex > a[href="/en/request-a-quote"] {
        margin-left: 1.75rem;
        padding: .75rem 1.9rem;
        font-size: 1.08rem;
    }
}

/* =========================================================================
   3. PIED DE PAGE : ADRESSE E-MAIL
   L'adresse contact@amelegalconseils.com ne se coupait pas et débordait de
   l'écran sous 900 px, provoquant un défilement horizontal.
   ========================================================================= */

@media (max-width: 900px) {
    footer a[href^="mailto:"] { overflow-wrap: anywhere; }
}

/* =========================================================================
   4. FILIGRANE DE MARQUE
   Reprise du traitement de la plaquette « Offres de services » : seul le
   symbole du logo, sans le mot « amelegal », détouré (cadenas, nœuds et
   trou de serrure se lisent en réserve), posé très en grand et rogné par
   les bords. Dans la plaquette le symbole fait une fois et demie la largeur
   de la page et le cercle central en occupe la moitié : c'est cette échelle
   qui le rend lisible. Le ton reste celui du support, seule l'opacité crée
   la nuance, jamais une autre couleur.

   Le fichier est un SVG : contours nets quelle que soit la taille.
   --fili-l  bord gauche du symbole, en % du bloc porteur
   --fili-w  largeur du symbole, en % du bloc porteur
   ========================================================================= */

.filigrane-marque,
.bandeau-filigrane::before,
footer > .container:first-of-type::before {
    content: "";
    position: absolute;
    background: url("/images/filigrane-amelegal.svg") no-repeat center / contain;
    aspect-ratio: 527 / 311;
    pointer-events: none;
    user-select: none;
}

/* Bandeaux de titre sombres : page Amelegal et page Blog */
.bandeau-filigrane { isolation: isolate; }
.bandeau-filigrane::before {
    left: var(--fili-l, 14%);
    width: var(--fili-w, 116%);
    top: 50%;
    transform: translateY(-50%);
    opacity: .07;
    z-index: -1;
}

/* Bandeau vert « Publications » */
.pub-hero .filigrane-marque { z-index: 1; }
.filigrane-marque--bandeau {
    left: var(--fili-l, 14%);
    width: var(--fili-w, 116%);
    top: 50%;
    transform: translateY(-50%);
    opacity: .12;
}
/* Sur un support vert : nuance plus foncée, comme dans la plaquette */
.filigrane-marque--sombre { filter: brightness(0); opacity: .085; }

/* Pied de page : dans le vide en bas à droite du bandeau. Le filigrane est
   porté par le bloc supérieur, pas par le pied entier : il ne peut donc pas
   déborder sur la ligne « Se désinscrire d'Amenews » du bas. */
footer { position: relative; overflow: hidden; }
footer > .container:first-of-type { position: relative; isolation: isolate; }
footer > .container:first-of-type::before {
    left: var(--fili-l, 44%);
    width: var(--fili-w, 88%);
    bottom: 0;
    opacity: .075;
    z-index: -1;
}

@media (max-width: 900px) {
    .bandeau-filigrane::before,
    .filigrane-marque--bandeau { left: -12%; width: 150%; opacity: .06; }
    footer > .container:first-of-type::before { left: 6%; width: 130%; bottom: 0; opacity: .06; }
}