/* =========================================================================
   Must Computer — feuille de style unique
   =========================================================================

   Direction : « atelier de precision ». Le sujet n est pas le cloud abstrait,
   c est un comptoir ou l on entre, deux magasins dans deux pays, du materiel
   qu on peut prendre en main. La typographie industrielle et les etiquettes en
   caracteres a chasse fixe (prix, horaires, telephones) viennent de ce monde-la.

   Palette DERIVEE DE LA MARQUE REELLE, pas d un generateur :
   le bleu #2E92CF et le ciel #6BBDE8 du site actuel sont l actif reconnaissable,
   le rouge #E51400 son accent. Deux corrections de contraste (mesurees) :
     - #2E92CF sur blanc ne donne que 3,43:1 -> reserve au graphique et au
       grand corps ; le texte utilise #1B6E9E (5,57:1, AA).
     - le rouge est legerement fonce a #D81E05 (5,11:1) pour la marge.

   Ordre du fichier : polices, tokens, socle, mise en page, composants dans
   l ordre d apparition, mouvement, responsive.
   ========================================================================= */

/* ---------- 1. Polices auto-hebergees -----------------------------------
   Aucun appel a fonts.googleapis.com : pas de transfert d IP des visiteurs
   vers un tiers (societe belge et luxembourgeoise, RGPD).
   Archivo = titrage industriel (variable, 500-800).
   IBM Plex Sans = texte courant, heritage d ingenierie.
   IBM Plex Mono = DONNEES : prix, horaires, telephones, references.
------------------------------------------------------------------------ */
@font-face {
  font-family: "Archivo";
  src: url("../polices/archivo-latin-500-800.woff2") format("woff2");
  font-weight: 500 800;
  /* Archivo est une variable a DEUX axes et la fonte telechargee contient bien
     l axe de largeur. Sans cette ligne le navigateur ne l expose pas, et les
     titres restaient a la largeur normale : c est une des raisons pour
     lesquelles le titrage manquait de caractere. Il est desormais legerement
     resserre (92 %), ce qui donne des titres plus denses et plus fermes sans
     changer de police. */
  font-stretch: 75% 112%;
  font-style: normal;
  font-display: swap;
  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: "Archivo";
  src: url("../polices/archivo-latin-ext-500-800.woff2") format("woff2");
  font-weight: 500 800;
  font-stretch: 75% 112%;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Plex Sans";
  src: url("../polices/plexsans-latin-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Sans";
  src: url("../polices/plexsans-latin-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Sans";
  src: url("../polices/plexsans-latin-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../polices/plexmono-latin-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../polices/plexmono-latin-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../polices/plexmono-latin-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- 2. Tokens --------------------------------------------------- */
:root {
  /* Couleurs */
  --encre:        #0b1b2b;
  --encre-2:      #12293d;
  --encre-3:      #1c3d57;
  --bleu:         #1b6e9e;   /* texte et aplats : AA sur blanc */
  --bleu-clair:   #2e92cf;   /* bleu d origine : graphique et grand corps */
  --ciel:         #6bbde8;
  --ciel-pale:    #e8f4fb;
  --rouge:        #d81e05;
  --papier:       #f1f6fa;
  --papier-2:     #e7f0f7;
  --blanc:        #ffffff;
  --ardoise:      #55677a;
  --ardoise-pale: #8fa6bc;
  --trait:        #d3e2ec;

  /* Typographie */
  --f-titre:  "Archivo", "Arial Narrow", system-ui, sans-serif;
  --f-texte:  "Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-donnee: "Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Echelle relevee : les titres etaient corrects mais timides, et un ecart
     trop faible entre h1, h2 et h3 fait lire la page comme une suite de
     paragraphes de meme importance. */
  --t-geant:  clamp(2.75rem, 7.2vw, 5.75rem);
  --t-h1:     clamp(2.25rem, 5.2vw, 4rem);
  --t-h2:     clamp(1.9rem, 3.8vw, 3rem);
  --t-h3:     clamp(1.15rem, 1.6vw, 1.4rem);
  --t-texte:  1.0625rem;
  --t-petit:  0.9375rem;
  --t-micro:  0.75rem;

  /* Rythme */
  --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;  --e-4: 1rem;
  --e-5: 1.5rem;   --e-6: 2rem;     --e-7: 3rem;     --e-8: 4rem;
  --e-9: 6rem;     --e-10: 8rem;

  --largeur: 74rem;
  --marge-laterale: clamp(1.25rem, 5vw, 3rem);

  /* Rayons concentriques : l enveloppe et son contenu partagent un centre */
  --r-enveloppe: 1.25rem;
  --r-interieur: calc(1.25rem - 0.375rem);
  --r-pastille:  999px;

  /* Ombres teintees encre — jamais de noir pur.
     Elles sont volontairement PLUS marquees qu au premier jet : les cartes
     etaient posees a plat, delimitees par un filet gris 1 px, c est-a-dire
     exactement le motif generique qu il fallait eviter. Ce sont desormais les
     ombres et un degrade qui detachent les cartes du fond, le filet n etant
     plus qu un lisere teinte de bleu. */
  --ombre-1: 0 1px 2px rgba(11, 27, 43, 0.06), 0 3px 10px rgba(27, 110, 158, 0.07);
  --ombre-2: 0 2px 6px rgba(11, 27, 43, 0.07), 0 14px 32px rgba(27, 110, 158, 0.12);
  --ombre-3: 0 6px 14px rgba(11, 27, 43, 0.08), 0 28px 64px rgba(27, 110, 158, 0.18);
  --ombre-relief: 0 20px 48px rgba(27, 110, 158, 0.2), 0 2px 6px rgba(11, 27, 43, 0.08);

  /* Surfaces de carte : un degre de blanc a peine descendu, plus un lisere
     interieur clair en haut, qui simule la lumiere tombant sur une plaque. */
  --carte-fond: linear-gradient(180deg, #ffffff 0%, #fafcfe 58%, #f4f8fb 100%);
  --carte-lisere: rgba(27, 110, 158, 0.14);
  --carte-lumiere: inset 0 1px 0 rgba(255, 255, 255, 0.9);

  /* Mouvement : masse et ressort, jamais linear ni ease-in-out */
  --sortie:  cubic-bezier(0.32, 0.72, 0, 1);
  --entree:  cubic-bezier(0.16, 1, 0.3, 1);
  --v-court: 180ms;
  --v-moyen: 320ms;
  --v-long:  620ms;
}

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

/* L attribut hidden gagne sur TOUT display pose par une classe. La regle du
   navigateur (display:none) n a aucune specificite face a `.bouton
   { display:inline-flex }` : sans ce garde-fou, un element cache par script
   restait visible — vide — des qu une classe lui donnait un display. */
[hidden]:not([hidden="until-found"]) { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--f-texte);
  font-size: var(--t-texte);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--f-titre);
  font-weight: 700;
  /* Largeur resserree et interlettrage negatif : deux reglages fins qui
     distinguent un titrage compose d un titrage par defaut. */
  font-stretch: 92%;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-stretch: 88%; letter-spacing: -0.038em; }
/* Aux grandes tailles, l interlettrage doit se resserrer davantage : c est
   l ajustement optique qu un titrage non travaille laisse toujours de cote. */
.heros h1 { font-stretch: 86%; letter-spacing: -0.042em; }
p { margin: 0; text-wrap: pretty; }

a { color: var(--bleu); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--encre); }

:focus-visible {
  outline: 3px solid var(--bleu-clair);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--ciel); color: var(--encre); }

.saut-contenu {
  position: absolute; left: var(--e-4); top: var(--e-4);
  z-index: 100; transform: translateY(-200%);
  background: var(--encre); color: var(--blanc);
  padding: var(--e-3) var(--e-5); border-radius: var(--r-pastille);
  font-size: var(--t-petit); text-decoration: none;
  transition: transform var(--v-court) var(--sortie);
}
.saut-contenu:focus { transform: translateY(0); color: var(--blanc); }

.lecteur-seul {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. Mise en page --------------------------------------------- */
.enveloppe {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--marge-laterale);
}

/* Une seule classe porte l espacement vertical des sections. Aucun composant
   ne redefinit ce padding : c est la source des annulations de specificite. */
/* Le rythme etait uniforme d un bout a l autre de la page, ce qui la faisait
   defiler comme une seule longue colonne. Trois densites au lieu d une. */
.section { padding-block: var(--e-9); }
.section--vaste { padding-block: var(--e-10); }
.section--serree { padding-block: var(--e-7); }
.section--encre { background: var(--encre); color: var(--blanc); }
/* Le fond « papier » etait a #f6f8fa, soit un blanc a peine sali : la
   difference avec les sections blanches ne se voyait pas et la page semblait
   uniforme. Il est desormais franchement bleute, et porte un halo. */
.section--papier {
  background:
    radial-gradient(60rem 28rem at 85% 0%, rgba(46, 146, 207, 0.1), transparent 65%),
    linear-gradient(180deg, var(--papier) 0%, var(--papier-2) 100%);
}
.section--filet { border-top: 1px solid var(--trait); }

.section--encre h1, .section--encre h2, .section--encre h3 { color: var(--blanc); }
.section--encre .etiquette { color: var(--ciel); }
.section--encre .plomb { color: var(--ardoise-pale); }

/* Etiquette : eyebrow qui porte une DONNEE vraie (pays, code postal, regime
   de TVA, annee), jamais un mot decoratif. */
.etiquette {
  font-family: var(--f-donnee);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bleu);
  margin: 0 0 var(--e-4);
}
.etiquette--rouge { color: var(--rouge); }

.entete-section { max-width: 46rem; margin-bottom: var(--e-7); }
.section--vaste .entete-section { margin-bottom: var(--e-8); }
.plomb {
  color: var(--ardoise);
  font-size: 1.125rem;
  margin-top: var(--e-4);
  max-width: 54ch;
}

/* ---------- 4. Boutons -------------------------------------------------- */
.bouton {
  --fond: var(--encre);
  --texte: var(--blanc);
  display: inline-flex; align-items: center; gap: var(--e-3);
  min-height: 2.875rem;
  padding: var(--e-3) var(--e-3) var(--e-3) var(--e-5);
  background: var(--fond); color: var(--texte);
  border: 0; border-radius: var(--r-pastille);
  font-family: var(--f-texte); font-size: var(--t-petit); font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: transform var(--v-court) var(--sortie),
              background-color var(--v-court) var(--sortie),
              box-shadow var(--v-moyen) var(--sortie);
}
.bouton:hover { color: var(--texte); transform: translateY(-2px); box-shadow: var(--ombre-2); }
.bouton:active { transform: translateY(0); }
.bouton--bleu { --fond: var(--bleu); }
.bouton--bleu:hover { --fond: var(--encre-3); }
.bouton--clair {
  --fond: transparent; --texte: var(--encre);
  box-shadow: inset 0 0 0 1px var(--trait);
  padding-right: var(--e-5);
}
.bouton--clair:hover { --fond: var(--papier); box-shadow: inset 0 0 0 1px var(--bleu-clair); }
/* TOUS les fonds sombres, pas seulement .section--encre.
   Le heros porte la classe `heros` et non `section--encre` : le bouton
   « Nous joindre » y ecrivait donc en var(--encre) sur un fond var(--encre),
   soit un contraste de 1,00 — invisible. Il n apparaissait qu au survol, quand
   le fond passe au clair. Mesure faite, puis corrigee.
   Tout nouveau bloc sombre doit etre ajoute a cette liste. */
/* UNE seule liste de fonds sombres, en :is(). L en-tete d administration en
   manquait : ses boutons « Voir l ecran » et « Se deconnecter » ecrivaient en
   encre sur fond encre — des pastilles vides. Meme bug, troisieme contexte :
   d ou la liste unique plutot que des regles paralleles a maintenir. */
:is(.section--encre, .heros, .bandeau-frontiere, .bandeau-atelier, .admin-entete) .bouton--clair {
  --texte: var(--blanc);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
:is(.section--encre, .heros, .bandeau-frontiere, .bandeau-atelier, .admin-entete) .bouton--clair:hover {
  --fond: rgba(255, 255, 255, 0.08);
  --texte: var(--blanc);
  box-shadow: inset 0 0 0 1px var(--ciel);
}

/* Fleche encapsulee dans sa propre pastille, jamais nue a cote du texte. */
.bouton__fleche {
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: var(--r-pastille);
  background: rgba(255, 255, 255, 0.16);
  transition: transform var(--v-moyen) var(--sortie);
}
.bouton--clair .bouton__fleche { display: none; }
.bouton:hover .bouton__fleche { transform: translateX(2px); }
.bouton__fleche svg { width: 0.75rem; height: 0.75rem; }

.groupe-boutons { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* ---------- 5. En-tete ------------------------------------------------- */
.entete {
  /* La barre pleine largeur collee en haut de l ecran est le reflexe par
     defaut, et c est ce qui donnait au site son air ordinaire. L en-tete est
     desormais une PASTILLE DETACHEE qui flotte au-dessus du contenu : elle
     laisse voir le heros passer derriere elle et donne immediatement une
     impression de profondeur. */
  position: sticky; top: 0; z-index: 50;
  padding-top: var(--e-4);
  padding-bottom: var(--e-2);
  background: transparent;
  transition: padding var(--v-moyen) var(--sortie);
}
.entete[data-defile="oui"] { padding-top: var(--e-2); }

.entete__interieur {
  display: flex; align-items: center; gap: var(--e-4);
  /* PLUS LARGE que la colonne de lecture (74rem). Une barre flottante n a pas a
     obeir a la largeur de lecture, et avec la marque, l assistance, cinq
     entrees de menu et deux numeros, 74rem ne suffisait pas : le flex comprimait
     alors le logo a 52 px de large au lieu de 132, rapport 0,97 contre 2,10. */
  max-width: 84rem;
  min-height: 4.25rem;
  padding-inline: var(--e-5);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px) saturate(1.7);
  /* Bordure TEINTEE et non blanche : sur le heros sombre une bordure claire
     fonctionne, mais sur les pages a fond blanc elle disparaissait et la
     pastille n avait plus de contour. Un liseré bleute se voit sur les deux. */
  border: 1px solid rgba(27, 110, 158, 0.18);
  border-radius: var(--r-pastille);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 10px 30px rgba(11, 27, 43, 0.14),
    0 2px 6px rgba(11, 27, 43, 0.06);
  transition: min-height var(--v-moyen) var(--sortie), box-shadow var(--v-moyen) var(--sortie);
}
.entete[data-defile="oui"] .entete__interieur {
  min-height: 3.5rem;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 14px 36px rgba(11, 27, 43, 0.2);
}
@supports not (backdrop-filter: blur(2px)) {
  .entete__interieur { background: var(--blanc); }
}

/* flex: 0 0 auto — sans cela le navigateur choisit de rétrécir l image plutot
   que de laisser deborder, et le logo se deforme sans que rien ne le signale.
   Un element d identite ne se comprime jamais : c est le contenu accessoire qui
   doit ceder, et c est le role des paliers responsive plus bas. */
.marque { display: flex; align-items: center; gap: var(--e-3); text-decoration: none; flex: 0 0 auto; }
.marque img { flex: 0 0 auto; }
/* Le logo est pose sur une PLAQUE ENCRE a l interieur de la pastille claire.
   Sans elle, 68 % de ses pixels tombaient sous 2:1 de contraste — la pastille
   en verre depoli etait, de tous les fonds testes, le pire pour ce logo. La
   plaque lui rend le fond sombre pour lequel il a ete dessine, et se lit comme
   un cartouche de marque volontaire. */
.marque img {
  width: 132px; height: 54px;
  padding: 0.3rem 0.55rem;
  object-fit: contain;
  background: var(--encre);
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(11, 27, 43, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: height var(--v-moyen) var(--sortie), padding var(--v-moyen) var(--sortie);
}
.entete[data-defile="oui"] .marque img { height: 44px; padding: 0.2rem 0.45rem; }

.navigation { margin-left: auto; }
.navigation ul { display: flex; align-items: center; gap: var(--e-2); list-style: none; margin: 0; padding: 0; }
.navigation a {
  display: block; padding: var(--e-2) var(--e-3);
  border-radius: var(--r-pastille);
  color: var(--encre); font-size: var(--t-petit); font-weight: 500;
  text-decoration: none;
  transition: background-color var(--v-court) var(--sortie), color var(--v-court) var(--sortie);
}
.navigation a:hover { background: var(--papier); color: var(--bleu); }
.navigation a[aria-current="page"] { color: var(--bleu); background: var(--ciel-pale); }

/* ---------- Assistance a distance -------------------------------------
   Le bouton porte le NOM du produit en texte, pas son logo : TeamViewer est une
   marque deposee et je n ai pas de fichier dont la licence d utilisation soit
   verifiable. Nommer l outil qu on emploie est un usage nominatif legitime ;
   reproduire un logo sans autorisation ne l est pas. Le jour ou le logo
   officiel est fourni, il remplace le contenu de .entete__assistance-icone.

   Place a GAUCHE, contre la marque, et non parmi les numeros : c est une action
   de depannage, pas un element de navigation. Un client deja au telephone avec
   le magasin doit le trouver du premier coup d oeil.
--------------------------------------------------------------------- */
.entete__assistance {
  display: inline-flex; align-items: center; gap: var(--e-3);
  padding: 0.3rem var(--e-4) 0.3rem var(--e-3);
  min-height: 2.75rem;
  border-radius: var(--r-pastille);
  background: linear-gradient(150deg, var(--bleu-clair) 0%, var(--bleu) 60%, var(--encre-3) 100%);
  color: var(--blanc); text-decoration: none;
  box-shadow: 0 4px 12px rgba(27, 110, 158, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  flex: 0 0 auto;
  transition: transform var(--v-court) var(--sortie), box-shadow var(--v-moyen) var(--sortie);
}
.entete__assistance:hover {
  color: var(--blanc);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(27, 110, 158, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.entete__assistance-icone {
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem; flex: 0 0 auto;
  border-radius: var(--r-pastille);
  background: rgba(255, 255, 255, 0.18);
}
.entete__assistance-icone svg { width: 1.05rem; height: 1.05rem; }
.entete__assistance-texte { display: grid; line-height: 1.15; }
.entete__assistance-titre { font-size: var(--t-micro); font-weight: 500; white-space: nowrap; }
.entete__assistance-outil {
  font-family: var(--f-donnee); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

/* ---------- Appels : un bouton par magasin ---------------------------- */
.entete__appels { display: flex; align-items: center; gap: var(--e-2); flex: 0 0 auto; }
.entete__appel {
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: var(--e-2) var(--e-4); min-height: 2.5rem;
  border-radius: var(--r-pastille);
  background: var(--encre); color: var(--blanc);
  font-family: var(--f-donnee); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.02em; text-decoration: none; white-space: nowrap;
  transition: background-color var(--v-court) var(--sortie);
}
.entete__appel:hover { background: var(--bleu); color: var(--blanc); }
.entete__appel svg { width: 0.875rem; height: 0.875rem; flex: 0 0 auto; }
/* Le pays d abord : deux numeros cote a cote ne se distinguent pas au premier
   regard, alors que BE et LU se lisent instantanement. */
.entete__appel-pays { font-weight: 600; letter-spacing: 0.1em; color: var(--ciel); }

/* ---------- Numeros dans le panneau mobile ----------------------------
   SELECTEUR ENFANT DIRECT, et non `.navigation__appels` seul : la regle
   `.navigation ul { display: flex }` de l en-tete a une specificite de (0,1,1)
   et battait un simple (0,1,0). Resultat, cette liste destinee au seul panneau
   mobile s affichait au MILIEU de l en-tete sur grand ecran, avec des icones
   geantes puisque leur taille n etait definie que dans la media query.

   Le style est donc entierement defini ICI, sans condition, et le palier
   mobile ne fait plus que basculer l affichage. Une fuite de ce genre ne peut
   plus produire un element non stylé.
--------------------------------------------------------------------- */
.navigation > .navigation__appels { display: none; }
.navigation__appels {
  gap: var(--e-2);
  list-style: none; margin: var(--e-3) 0 0; padding: var(--e-3) 0 0;
  border-top: 1px solid var(--trait);
}
.navigation__appels a {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: 2.75rem; padding: var(--e-2) var(--e-3);
  border-radius: 0.75rem;
  color: var(--encre); text-decoration: none; font-size: var(--t-petit);
}
.navigation__appels a:hover { background: var(--ciel-pale); }
.navigation__appels svg { width: 1rem; height: 1rem; color: var(--bleu); flex: 0 0 auto; }
.navigation__appels strong {
  margin-left: auto;
  font-family: var(--f-donnee); font-size: var(--t-micro); font-weight: 600;
  color: var(--bleu);
}

.bascule-menu {
  display: none;
  width: 2.75rem; height: 2.75rem; margin-left: auto;
  background: transparent; border: 1px solid var(--trait);
  border-radius: 0.75rem; cursor: pointer;
  align-items: center; justify-content: center;
}
.bascule-menu span {
  display: block; position: relative;
  width: 1.125rem; height: 1.5px; background: var(--encre);
  transition: transform var(--v-moyen) var(--sortie), opacity var(--v-court) var(--sortie);
}
.bascule-menu span::before, .bascule-menu span::after {
  content: ""; position: absolute; left: 0;
  width: 100%; height: 1.5px; background: var(--encre);
  transition: transform var(--v-moyen) var(--sortie);
}
.bascule-menu span::before { top: -5px; }
.bascule-menu span::after { top: 5px; }
.bascule-menu[aria-expanded="true"] span { background: transparent; }
.bascule-menu[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.bascule-menu[aria-expanded="true"] span::after { transform: translateY(-5px) rotate(-45deg); }

/* ---------- 6. Heros et signature « comptoir » -------------------------
   L element signature du site. Le fait le plus caracteristique de Must
   Computer n est pas un slogan, c est qu on peut pousser une porte : deux
   magasins, deux pays, et un indicateur ouvert/ferme calcule sur les horaires
   reels. Toute l audace du site est depensee ici ; le reste reste discipline.
------------------------------------------------------------------------ */
.heros { position: relative; overflow: hidden; background: var(--encre); color: var(--blanc); }
.heros::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(52rem 30rem at 8% -8%, rgba(46, 146, 207, 0.3), transparent 62%),
    radial-gradient(38rem 26rem at 92% 6%, rgba(107, 189, 232, 0.16), transparent 60%);
  pointer-events: none;
}
/* Trame technique tres discrete : un plan, pas une decoration. */
.heros::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  mask-image: radial-gradient(70% 60% at 30% 20%, #000 20%, transparent 78%);
  pointer-events: none;
}
/* GRAIN. Un aplat numerique parfait parait plat ; un bruit tres faible lui
   donne une matiere, comme un papier. Genere en SVG, donc sans image a
   telecharger, et pose au-dessus de tout sans intercepter les clics. */
.heros > .grain-calque,
.section--encre > .grain-calque,
.bandeau-frontiere > .grain-calque {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22%3E%3Cfilter id=%22g%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.85%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22160%22 height=%22160%22 filter=%22url(%23g)%22 opacity=%220.5%22/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
.heros__interieur {
  position: relative; z-index: 1;
  /* Colonnes DESEQUILIBREES et non plus presque egales : le texte domine, le
     panneau vient en appui. Deux colonnes de meme poids donnent toujours une
     composition molle. */
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
  padding-block: clamp(4.5rem, 10vw, 8rem) clamp(3.5rem, 8vw, 6.5rem);
}
.heros h1 { font-size: var(--t-geant); letter-spacing: -0.03em; }
.heros h1 em {
  font-style: normal;
  color: var(--ciel);
  /* Le soulignement suit la ligne de base du mot, comme un trait de crayon. */
  background: linear-gradient(var(--ciel), var(--ciel)) no-repeat 0 100% / 100% 3px;
  padding-bottom: 0.08em;
}
.heros__plomb {
  margin-top: var(--e-5);
  font-size: 1.1875rem; color: var(--ardoise-pale); max-width: 46ch;
}
.heros .groupe-boutons { margin-top: var(--e-6); }
.heros__appui {
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5);
  margin-top: var(--e-6); padding-top: var(--e-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--f-donnee); font-size: var(--t-micro);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ardoise-pale);
}

/* Le comptoir : enveloppe exterieure + coeur interieur, rayons concentriques. */
.comptoir {
  padding: var(--e-2);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-enveloppe);
  box-shadow: 0 40px 80px rgba(3, 10, 18, 0.55), 0 2px 0 rgba(255, 255, 255, 0.08) inset;
  /* Legere rotation et debord : le panneau cesse d etre une boite alignee sur
     la grille et devient un objet POSE sur la page. Annule sous 60rem, ou une
     rotation genererait des zones de clic de travers. */
  transform: rotate(-1.1deg);
  transition: transform var(--v-long) var(--sortie);
}
.comptoir:hover { transform: rotate(0deg) translateY(-4px); }
.comptoir__coeur {
  background: rgba(255, 255, 255, 0.035);
  border-radius: var(--r-interieur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.comptoir__chapeau {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--f-donnee); font-size: var(--t-micro);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ardoise-pale);
}
.comptoir__heure { color: var(--blanc); font-variant-numeric: tabular-nums; }

.magasin {
  /* UNE seule colonne. La version a deux colonnes (`1fr auto`) laissait la
     pastille d etat prendre toute sa largeur en nowrap, et la colonne `1fr` ne
     pouvait pas descendre sous la largeur du nom : la ligne reclamait 389 px
     dans un panneau de 373, et tout ce qui suivait — pastille, adresse,
     courriel — etait coupe par le `overflow: hidden`. */
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--e-2);
  padding: var(--e-5);
}
/* Le nom pousse la pastille a droite tant qu il y a la place ; sinon elle
   passe a la ligne et retrouve toute la largeur du panneau. */
.magasin__entete {
  display: flex; flex-wrap: wrap; align-items: center;
  /* space-between et NON `margin-right: auto` sur le nom : une marge auto
     absorbe tout l espace libre du conteneur flex et forcerait le retour a la
     ligne en toutes circonstances.
     Mesure faite : la zone utile du panneau fait 328 px, et « Bastogne BE »
     (127) plus la pastille la plus COURTE (199) plus l ecart en reclament 350.
     La pastille passe donc systematiquement sous le nom aux largeurs actuelles,
     et c est tres bien ainsi : elle y dispose de toute la largeur, ce qui
     supprime la troncature. space-between est conserve pour le jour ou le
     panneau s elargirait. */
  justify-content: space-between;
  gap: var(--e-2) var(--e-4);
}
.magasin + .magasin { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.magasin__nom {
  font-family: var(--f-titre); font-size: 1.375rem; font-weight: 700;
  letter-spacing: -0.02em; color: var(--blanc);
}
.magasin__pays {
  font-family: var(--f-donnee); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.12em; color: var(--ciel); margin-left: var(--e-3);
}
.magasin__etat {
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: 0.25rem var(--e-3);
  border-radius: var(--r-pastille);
  font-family: var(--f-donnee); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.06em; white-space: nowrap;
  background: rgba(255, 255, 255, 0.08); color: var(--ardoise-pale);
}
.magasin__etat[data-etat="ouvert"] { background: rgba(107, 189, 232, 0.16); color: var(--ciel); }
.magasin__etat[data-etat="ferme"] { background: rgba(255, 255, 255, 0.07); color: var(--ardoise-pale); }
/* La pastille ne clignote pas : sur un ecran de magasin allume 10 h par jour,
   une animation infinie est une nuisance. Elle respire, tres lentement. */
.magasin__temoin { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: currentColor; }
.magasin__etat[data-etat="ouvert"] .magasin__temoin { animation: respire 3.2s var(--entree) infinite; }
@keyframes respire { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

.magasin__adresse { color: var(--ardoise-pale); font-size: var(--t-petit); }
.magasin__donnees {
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4);
  margin-top: var(--e-2);
  font-family: var(--f-donnee); font-size: var(--t-petit);
}
.magasin__donnees a {
  color: var(--blanc); text-decoration: none;
  border-bottom: 1px solid rgba(107, 189, 232, 0.5);
  /* Un courriel de 26 caracteres ne doit pas imposer sa largeur au panneau. */
  overflow-wrap: anywhere; min-width: 0;
}
.magasin__donnees a:hover { color: var(--ciel); border-bottom-color: var(--ciel); }
.magasin__horaire { margin-top: var(--e-2); font-size: var(--t-micro); color: var(--ardoise-pale); }

/* ---------- 7. Competences ---------------------------------------------
   Pas de numerotation 01/02/03 : ces cinq metiers ne forment pas une
   sequence, les numeroter mentirait sur le contenu.
------------------------------------------------------------------------ */
/* Grille ASYMETRIQUE. La version precedente etait un 3+2 regulier, c est-a-dire
   un tableau : cinq cartes de meme taille se lisent comme cinq lignes d une
   liste. Ici la premiere competence occupe une grande tuile sur deux rangees,
   deux se posent a cote, deux ferment en dessous. La hierarchie devient
   visible, et « Service oriente client » — ce qui distingue vraiment Must
   Computer — occupe la place qui lui revient. */
.grille-competences {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--e-4);
}
.competence {
  position: relative;
  grid-column: span 2;
  display: flex; flex-direction: column;
  padding: var(--e-6) var(--e-5);
  background: var(--carte-fond);
  border: 1px solid var(--carte-lisere);
  border-radius: var(--r-enveloppe);
  box-shadow: var(--ombre-1), var(--carte-lumiere);
  overflow: hidden;
  transition: transform var(--v-moyen) var(--sortie),
              box-shadow var(--v-moyen) var(--sortie),
              border-color var(--v-moyen) var(--sortie);
}
/* Filet de couleur en haut de carte, revele au survol : la carte reagit sans
   qu il faille lui ajouter une bordure permanente. */
.competence::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--bleu-clair), var(--ciel));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--v-moyen) var(--sortie);
}
.competence:hover::before { transform: scaleX(1); }
.competence:nth-child(1) { grid-column: span 3; grid-row: span 2; }
.competence:nth-child(2), .competence:nth-child(3) { grid-column: span 3; }
.competence:nth-child(4), .competence:nth-child(5) { grid-column: span 3; }

/* La grande tuile respire davantage et porte un titre plus grand : sans cela
   elle ne serait qu une carte etiree. */
.competence:nth-child(1) {
  padding: var(--e-7) var(--e-6);
  justify-content: flex-start;
}
.competence:nth-child(1) :is(h2, h3) { font-size: var(--t-h2); }
.competence:nth-child(1) .competence__resume { font-size: 1.125rem; margin-top: var(--e-4); }
.competence:nth-child(1) .competence__detail { font-size: var(--t-texte); }
.competence:nth-child(1) .competence__icone { width: 4.25rem; height: 4.25rem; border-radius: 1.25rem; }
.competence:nth-child(1) .competence__icone svg { width: 2.25rem; height: 2.25rem; }
.competence:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-relief), var(--carte-lumiere);
  border-color: rgba(46, 146, 207, 0.35);
}
/* L icone n est plus un trait fin flottant sur du blanc : elle est posee dans
   une TUILE pleine. C est ce qui donne son rythme visuel a la grille. */
.competence__icone {
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem; margin-bottom: var(--e-5);
  color: var(--blanc);
  background: linear-gradient(150deg, var(--bleu-clair) 0%, var(--bleu) 55%, var(--encre-3) 100%);
  border-radius: 1rem;
  box-shadow: 0 8px 18px rgba(27, 110, 158, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform var(--v-moyen) var(--sortie), box-shadow var(--v-moyen) var(--sortie);
}
.competence:hover .competence__icone {
  transform: translateY(-2px) rotate(-3deg);
  box-shadow: 0 12px 26px rgba(27, 110, 158, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.competence__icone svg { width: 1.75rem; height: 1.75rem; }
.competence :is(h2, h3) { font-size: var(--t-h3); }
.competence__resume { margin-top: var(--e-3); color: var(--encre); font-weight: 500; }
.competence__detail { margin-top: var(--e-3); color: var(--ardoise); font-size: var(--t-petit); }

/* ---------- 8. Promotions ---------------------------------------------- */
.barre-filtres {
  display: flex; flex-wrap: wrap; gap: var(--e-2);
  margin-bottom: var(--e-6);
}
.filtre {
  min-height: 2.5rem; padding: var(--e-2) var(--e-4);
  background: var(--blanc); color: var(--encre);
  border: 1px solid var(--trait); border-radius: var(--r-pastille);
  font-family: var(--f-donnee); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
  transition: background-color var(--v-court) var(--sortie),
              border-color var(--v-court) var(--sortie),
              color var(--v-court) var(--sortie);
}
.filtre:hover { border-color: var(--bleu-clair); color: var(--bleu); }
.filtre[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--blanc); }

.grille-promos {
  display: grid; gap: var(--e-4);
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.promo {
  display: flex; flex-direction: column;
  background: var(--carte-fond);
  border: 1px solid var(--carte-lisere);
  border-radius: var(--r-enveloppe);
  box-shadow: var(--ombre-1), var(--carte-lumiere);
  overflow: hidden;
  transition: transform var(--v-moyen) var(--sortie), box-shadow var(--v-moyen) var(--sortie),
              border-color var(--v-moyen) var(--sortie);
}
.promo:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-relief), var(--carte-lumiere);
  border-color: rgba(46, 146, 207, 0.35);
}
.promo__vignette {
  display: grid; place-items: center;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(14rem 9rem at 50% 30%, #ffffff 0%, transparent 70%),
    linear-gradient(160deg, #eaf3f9 0%, #dceaf4 100%);
  border-bottom: 1px solid var(--carte-lisere);
  padding: var(--e-5);
}
/* Les photos d origine ne font que 120 px : on ne les etire pas, on les pose
   comme sur une etiquette de rayon. image-rendering ameliore le rendu a
   l echelle exacte, sans lissage baveux. */
.promo__vignette img {
  max-height: 100%; width: auto; object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  mix-blend-mode: multiply;
}
.promo__vignette--vide {
  font-family: var(--f-donnee); font-size: var(--t-micro);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ardoise-pale);
}
.promo__corps { display: flex; flex-direction: column; flex: 1; padding: var(--e-5); }
.promo__categorie {
  font-family: var(--f-donnee); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--bleu);
  margin-bottom: var(--e-3);
}
.promo :is(h2, h3) { font-size: 1.0625rem; letter-spacing: -0.01em; line-height: 1.25; }
.promo__description {
  margin-top: var(--e-3); flex: 1;
  color: var(--ardoise); font-size: var(--t-petit);
}
.promo__pied {
  display: flex; align-items: center; justify-content: flex-start; gap: var(--e-3);
  margin-top: var(--e-5); padding-top: var(--e-4);
  border-top: 1px solid var(--carte-lisere);
}
/* Le prix etait du simple texte rouge. C est desormais une PLAQUE, le meme
   objet que sur les televiseurs : le langage visuel du magasin devient le meme
   sur l ecran du client et sur l ecran du rayon. */
.promo__plaque {
  display: inline-flex; align-items: baseline; gap: var(--e-2);
  padding: 0.45rem var(--e-4);
  /* L extremite claire etait a #e8330f : le libelle HTVA n y donnait plus que
     3,60:1. Le degrade demarre desormais a #de2508 (4,80:1 en blanc plein). */
  background: linear-gradient(165deg, #de2508 0%, var(--rouge) 55%, #b81703 100%);
  border-radius: 0.625rem;
  box-shadow: 0 6px 16px rgba(216, 30, 5, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.promo__prix {
  font-family: var(--f-donnee); font-size: 1.375rem; font-weight: 600;
  color: var(--blanc); letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.promo__regime {
  font-family: var(--f-donnee); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.1em; color: #ffffff;   /* plein, pas 88% : voir ci-dessus */
}
.promo__mention { margin-top: var(--e-3); font-size: var(--t-micro); color: var(--ardoise-pale); }
.promo[hidden] { display: none; }

.avis-vide {
  padding: var(--e-8) 0; text-align: center; color: var(--ardoise);
  font-family: var(--f-donnee); font-size: var(--t-petit);
}

/* ---------- 9. Marques et certifications ------------------------------- */
.bandeau-logos {
  display: grid; gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  align-items: center;
}
.bandeau-logos figure {
  display: grid; place-items: center;
  margin: 0; padding: var(--e-4);
  background: var(--carte-fond);
  border: 1px solid var(--carte-lisere);
  border-radius: var(--r-interieur);
  box-shadow: var(--ombre-1), var(--carte-lumiere);
  aspect-ratio: 3 / 2;
  transition: transform var(--v-court) var(--sortie), box-shadow var(--v-moyen) var(--sortie);
}
.bandeau-logos figure:hover { transform: translateY(-2px); box-shadow: var(--ombre-2), var(--carte-lumiere); }
/* Desaturation nettement plus legere : a 62 % d opacite et en gris total, la
   rangee de marques ressemblait a une zone desactivee. */
.bandeau-logos img {
  max-height: 3.25rem; width: auto;
  filter: grayscale(0.35) contrast(1.05); opacity: 0.9;
  transition: filter var(--v-moyen) var(--sortie), opacity var(--v-moyen) var(--sortie);
}
/* Les mots-symboles SVG (UniFi : 53x16 natif) recoivent une hauteur FIXE :
   max-height ne fait que reduire, jamais agrandir, et le logo s affichait a
   16 px de haut a cote de vignettes de 52 px. 1,4rem aligne son poids optique
   sur celui des autres mots-symboles du bandeau. */
.bandeau-logos img[src$=".svg"] { height: 1.4rem; width: auto; }
.bandeau-logos figure:hover img { filter: none; opacity: 1; }
.bandeau-logos figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- 10. Histoire -----------------------------------------------
   Ici la numerotation EST legitime : ce sont des dates, l ordre porte
   l information.
------------------------------------------------------------------------ */
.frise { display: grid; gap: 0; margin-top: var(--e-6); }
.frise__etape {
  display: grid; grid-template-columns: 9rem 1fr; gap: var(--e-5);
  padding-block: var(--e-5);
  border-top: 1px solid var(--trait);
}
.frise__etape:last-child { border-bottom: 1px solid var(--trait); }
.frise__date {
  font-family: var(--f-donnee); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--bleu);
  padding-top: 0.35rem;
}
.frise__titre { font-family: var(--f-titre); font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.02em; }
.frise__texte { margin-top: var(--e-2); color: var(--ardoise); }

.citation {
  position: relative;
  margin: var(--e-7) 0 0;
  padding: var(--e-6) var(--e-6) var(--e-6) calc(var(--e-6) + 6px);
  background:
    linear-gradient(90deg, var(--bleu-clair) 0 6px, transparent 6px),
    linear-gradient(150deg, var(--ciel-pale) 0%, #dcecf7 100%);
  border-radius: var(--r-enveloppe);
  box-shadow: var(--ombre-1);
  font-family: var(--f-titre); font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; color: var(--encre);
}

/* ---------- 11. Contact ------------------------------------------------ */
.grille-contact { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-5); }
.fiche-magasin {
  padding: var(--e-2);
  background: linear-gradient(150deg, rgba(46, 146, 207, 0.18), rgba(107, 189, 232, 0.08));
  border: 1px solid var(--carte-lisere);
  border-radius: var(--r-enveloppe);
  box-shadow: var(--ombre-2);
}
.fiche-magasin__coeur {
  padding: var(--e-6);
  background: var(--carte-fond);
  border-radius: var(--r-interieur);
  box-shadow: var(--ombre-1), var(--carte-lumiere);
}
.fiche-magasin h2 { font-size: var(--t-h2); }
.fiche-magasin__pays {
  font-family: var(--f-donnee); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--bleu);
  margin-bottom: var(--e-3);
}
.liste-donnees { margin: var(--e-5) 0 0; padding: 0; list-style: none; display: grid; gap: var(--e-3); }
.liste-donnees > li { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--e-4); align-items: baseline; }
.liste-donnees dt, .liste-donnees__cle {
  font-family: var(--f-donnee); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ardoise);
}
.liste-donnees__valeur { font-family: var(--f-donnee); font-size: var(--t-petit); }
.liste-donnees__valeur a { display: inline-block; min-height: 1.5rem; }
.liste-donnees__valeur--texte { font-family: var(--f-texte); font-size: var(--t-petit); }

/* ---------- 12. Pied de page ------------------------------------------- */
.pied { background: var(--encre); color: var(--ardoise-pale); padding-block: var(--e-8) var(--e-6); }
.pied a { color: var(--ardoise-pale); text-decoration: none; }
.pied a:hover { color: var(--ciel); }
.pied__grille {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--e-6);
  padding-bottom: var(--e-7); border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* AUCUN filtre. Le `brightness(0) invert(1)` qui etait ici ecrasait toutes les
   couleurs du logo en une silhouette blanche illisible — c est ce qu on voyait
   dans le pied de page.
   Mesure faite sur le fichier : 23 % de sa surface est quasi blanche, 11 % bleu
   clair, et seuls 19 % sont sombres. Sur le navy du pied, 8 % seulement des
   pixels tombent sous 2:1 de contraste ; sur blanc, 56 %. Ce logo est donc fait
   pour un fond SOMBRE, et le pied de page est son meilleur emplacement. */
.pied__logo { width: 132px; height: 63px; object-fit: contain; }
.pied__baseline { margin-top: var(--e-4); font-size: var(--t-petit); max-width: 28ch; }
.pied h2 {
  font-family: var(--f-donnee); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--blanc);
  margin-bottom: var(--e-4);
}
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-1); }
.pied li { font-size: var(--t-petit); }
/* Les liens d une LISTE ne beneficient pas de l exception « lien dans une
   phrase » : ils doivent faire au moins 24x24 px (WCAG 2.2, 2.5.8). Sans ce
   min-height, ils tombaient a 19 px de haut. */
.pied li a {
  display: inline-flex; align-items: center;
  min-height: 1.625rem;
  padding-block: 0.125rem;
}
.pied__mono { font-family: var(--f-donnee); font-size: var(--t-micro); }
.pied__bas {
  display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-5);
  align-items: center; justify-content: flex-start;
  padding-top: var(--e-5); font-size: var(--t-micro); font-family: var(--f-donnee);
}

/* ---------- 12 bis. Bandeau « deux pays » -----------------------------
   Ajoute apres un premier retour : la page enchainait blanc, gris tres clair,
   blanc, et paraissait sans relief. Ce bandeau est la SEULE grande surface
   coloree du corps de page ; il tombe au milieu du defilement et coupe la
   monotonie. Il porte une information vraie — les deux adresses et l annee —
   plutot qu un slogan.
------------------------------------------------------------------------ */
.bandeau-frontiere {
  position: relative;
  overflow: hidden;
  padding-block: var(--e-8);
  background:
    radial-gradient(48rem 26rem at 12% 0%, rgba(107, 189, 232, 0.35), transparent 62%),
    linear-gradient(135deg, var(--encre-3) 0%, var(--bleu) 48%, #14587f 100%);
  color: var(--blanc);
}
.bandeau-frontiere::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  mask-image: radial-gradient(80% 70% at 80% 30%, #000 10%, transparent 75%);
  pointer-events: none;
}
.bandeau-frontiere__interieur {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.bandeau-frontiere h2 { color: var(--blanc); font-size: var(--t-h2); }
/* PAS --ciel ici : mesure faite, #6bbde8 sur le bleu du bandeau ne donne que
   2,67:1, sous le minimum meme pour du grand corps. Ce bleu tres pale donne
   4,57:1 au point le plus defavorable du degrade. */
.bandeau-frontiere .etiquette { color: #d6ecf9; }
.bandeau-frontiere .plomb { color: rgba(255, 255, 255, 0.95); margin-top: var(--e-4); }

.bandeau-frontiere__reperes {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--e-3);
}
.bandeau-frontiere__reperes li {
  display: flex; align-items: baseline; gap: var(--e-3);
  padding: var(--e-4);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-interieur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  font-family: var(--f-donnee); font-size: var(--t-petit);
}
.bandeau-frontiere__reperes span {
  flex: 0 0 auto;
  font-weight: 600; font-size: var(--t-micro); letter-spacing: 0.14em;
  color: #d6ecf9;   /* meme raison que ci-dessus */
}

/* Lien discret vers l administration, dans la derniere ligne du pied.
   Il n est pas dans une liste, donc la regle `.pied li a` ne l atteint pas :
   sans ce min-height il retombait a 20 px de haut, sous le minimum de 24 px
   (WCAG 2.2, 2.5.8). */
.pied__admin {
  display: inline-flex; align-items: center;
  min-height: 1.625rem;
  padding-block: 0.125rem;
  margin-left: auto;
  opacity: 0.55;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: opacity var(--v-court) var(--sortie);
}
.pied__admin:hover { opacity: 1; }

/* ---------- 13. Page 404 ----------------------------------------------- */
.page-erreur { min-height: 70vh; display: grid; place-items: center; text-align: center; }
.page-erreur__code {
  font-family: var(--f-donnee); font-size: clamp(4rem, 14vw, 9rem); font-weight: 600;
  color: var(--ciel); line-height: 1; letter-spacing: -0.04em;
}

/* ---------- 14. Mouvement ---------------------------------------------
   Une seule sequence orchestree au chargement du heros, puis des reveals au
   defilement en amelioration progressive : sans prise en charge, le contenu
   est simplement la, aucun repli JavaScript n est necessaire.
------------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .sequence > * {
    animation: monte var(--v-long) var(--entree) both;
    animation-delay: calc(var(--rang, 0) * 90ms);
  }
  @keyframes monte {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }

  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .reveler {
      animation: monte 1s var(--entree) both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- 15. Responsive -------------------------------------------- */
@media (max-width: 60rem) {
  .heros__interieur { grid-template-columns: 1fr; }
  .bandeau-frontiere__interieur { grid-template-columns: 1fr; }
  .grille-competences { grid-template-columns: repeat(2, 1fr); }
  /* TOUTES les cartes sont remises a une colonne, pas seulement certaines.
     En n en reinitialisant que trois sur cinq, les deux oubliees gardaient
     « span 3 » : la grille creait alors trois colonnes fantomes et produisait
     des cartes de 50 px de large. Le selecteur global evite que l oubli se
     reproduise si une competence est ajoutee. */
  .grille-competences > * { grid-column: span 1 !important; grid-row: auto !important; }
  .competence:nth-child(1) { padding: var(--e-6) var(--e-5); }
  .competence:nth-child(1) :is(h2, h3) { font-size: var(--t-h3); }
  /* Une carte de travers sur un ecran tactile pose des zones de clic
     penchees : la rotation ne survit pas au format telephone. */
  .comptoir, .comptoir:hover { transform: none; }
  .grille-contact { grid-template-columns: 1fr; }
  .pied__grille { grid-template-columns: 1fr 1fr; }
}

/* Palier intermediaire. La barre contient desormais la marque, l assistance,
   cinq entrees de menu et DEUX numeros : mesure faite, cela ne tient plus sous
   ~1200 px. On retire d abord les LIBELLES, jamais les fonctions. */
/* PALIER 1 — sous 90rem, les chiffres des numeros disparaissent, les pastilles
   BE et LU restent. On retire d abord les libelles, jamais les fonctions. */
@media (max-width: 90rem) {
  .entete__appel-numero { display: none; }
  .entete__assistance-titre { display: none; }
  .entete__assistance { padding-inline: var(--e-3); }
}

/* PALIER 2 — sous 72rem (1152 px), les boutons d appel quittent la barre.
   Mesure : avec la marque, l assistance, cinq entrees de menu et les deux
   pastilles BE/LU, il faut 898 px de contenu ; a 1024 px de fenetre la
   pastille n en offre que 874. Les numeros restent accessibles dans le pied
   de page et sur la page Contact. */
@media (max-width: 72rem) {
  .entete__appels { display: none; }
}

/* PALIER 3 — sous 60rem (960 px), le menu passe en panneau.
   Ce seuil etait a 48rem, et c est ce qui faisait DEBORDER la page entre 768 et
   1100 px : le menu horizontal reclame a lui seul 474 px, que la barre n a plus
   a cette taille. Les deux numeros reapparaissent dans le panneau — un visiteur
   sur petit ecran est precisement celui qui a le plus de raisons d appeler. */
@media (max-width: 60rem) {
  .bascule-menu { display: flex; }
  .navigation {
    display: none; position: absolute; left: var(--marge-laterale); right: var(--marge-laterale);
    top: calc(100% - var(--e-2));
    margin: 0; padding: var(--e-3);
    background: var(--blanc);
    border: 1px solid var(--carte-lisere);
    border-radius: var(--r-enveloppe);
    box-shadow: var(--ombre-3);
  }
  .navigation[data-ouvert="oui"] { display: block; }
  .navigation ul { flex-direction: column; align-items: stretch; gap: 0; }
  .navigation a { padding: var(--e-4) var(--e-3); border-radius: 0.75rem; }
  .entete__assistance-titre { display: block; }
  .entete__assistance { padding-inline: var(--e-3) var(--e-4); }

  /* Seule bascule d affichage : tout le style est defini hors media query. */
  .navigation > .navigation__appels { display: grid; }
}

/* PALIER 4 — sous 48rem, la mise en page du CONTENU passe en une colonne.
   Ce palier ne touche plus a l en-tete : c est desormais le palier 3 qui s en
   occupe, et les melanger avait masque le debordement. */
@media (max-width: 48rem) {
  .section { padding-block: var(--e-7); }
  .grille-competences { grid-template-columns: 1fr; }
  .frise__etape { grid-template-columns: 1fr; gap: var(--e-2); }
  .liste-donnees > li { grid-template-columns: 1fr; gap: var(--e-1); }
  .pied__grille { grid-template-columns: 1fr; }
}

@media (max-width: 30rem) {
  /* Sur les plus petits ecrans, la pastille passe systematiquement sous le nom :
     l en-tete flexible s en charge desormais, il suffit de forcer la coupure. */
  .magasin__entete { flex-direction: column; align-items: flex-start; }
}

/* ---------- 16. Visuels metier ------------------------------------
   Six photographies d origines differentes. Sans traitement commun, elles se
   verraient comme un assemblage de banque d images : chacune a sa lumiere, sa
   temperature de couleur, son contraste.

   Le liant est ici un VOILE ENCRE en multiply, plus une legere desaturation.
   Les six photos sont ainsi tirees vers le bleu de la marque et lues comme une
   seule famille. Au survol le voile se leve : la photo reprend sa couleur
   pleine, ce qui recompense le geste sans jamais etre necessaire a la
   comprehension.

   Le voile est en CSS et non cuit dans les fichiers : il se regle, s atténue ou
   se retire en une ligne, sans repasser par la fabrication des images.
------------------------------------------------------------------------ */

.competence__cadre {
  position: relative;
  margin: calc(var(--e-2) * -1) calc(var(--e-2) * -1) 0;
  /* Le cadre annule le padding de la carte par une marge negative : il affleure
     donc le bord exterieur, et son rayon doit egaler celui de la carte moins
     l epaisseur du liseré — pas un rayon interieur. */
  border-radius: calc(var(--r-enveloppe) - 1px) calc(var(--r-enveloppe) - 1px) 0 0;
  overflow: hidden;
  background: var(--encre-2);
}
.competence__photo {
  width: 100%; height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 10;
  filter: saturate(0.82) contrast(1.04);
  transform: scale(1.02);
  transition: filter var(--v-long) var(--sortie), transform var(--v-long) var(--sortie);
}
/* Le voile : pose au-dessus de la photo, il ne bloque aucun clic. */
.competence__cadre::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11, 27, 43, 0.06) 0%, rgba(11, 27, 43, 0.42) 100%),
    rgba(27, 110, 158, 0.22);
  mix-blend-mode: multiply;
  transition: opacity var(--v-long) var(--sortie);
}
.competence:hover .competence__cadre::after { opacity: 0.35; }
.competence:hover .competence__photo { filter: saturate(1) contrast(1); transform: scale(1.05); }

/* La carte illustree n a plus de padding en haut : l image touche le bord. */
.competence--illustree { padding: var(--e-2) var(--e-2) 0; }
.competence--illustree .competence__corps { padding: 0 var(--e-4) var(--e-6); }

/* La pastille d icone CHEVAUCHE le bas de l image. C est le detail qui fait
   que la photo et la carte forment un objet, au lieu d une image posee sur un
   bloc de texte. */
.competence--illustree .competence__icone {
  position: relative;
  margin-top: -2.25rem;
  margin-bottom: var(--e-4);
  box-shadow:
    0 8px 18px rgba(11, 27, 43, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 0 4px var(--blanc);
}

/* La grande tuile : image plus haute que celle des autres cartes (3/2 contre
   16/10), sans max-height — un plafond en pixels aurait re-recadre l image
   par-dessus le recadrage deja fait a la fabrication. */
.competence:nth-child(1) .competence__photo { aspect-ratio: 3 / 2; }
.competence:nth-child(1).competence--illustree { padding: var(--e-2) var(--e-2) 0; }
.competence:nth-child(1).competence--illustree .competence__corps { padding: 0 var(--e-5) var(--e-7); }

/* ---------- Bandeau atelier ------------------------------------------- */
.bandeau-atelier {
  position: relative;
  display: grid; align-items: center;
  min-height: clamp(20rem, 38vw, 30rem);
  overflow: hidden;
  background: var(--encre);
  isolation: isolate;
}
.bandeau-atelier__image {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.78) contrast(1.05);
}
/* Degrade DIRECTIONNEL et non uniforme : opaque a gauche ou se trouve le
   texte, presque transparent a droite ou la photo doit rester lisible. Un
   voile uniforme aurait soit noye la photo, soit rendu le texte illisible. */
.bandeau-atelier::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(11, 27, 43, 0.95) 0%,
    rgba(11, 27, 43, 0.86) 38%,
    rgba(11, 27, 43, 0.45) 68%,
    rgba(11, 27, 43, 0.2) 100%
  );
}
.bandeau-atelier__interieur { position: relative; padding-block: var(--e-8); }
.bandeau-atelier__interieur > div { max-width: 40rem; }
.bandeau-atelier h2 { color: var(--blanc); font-size: var(--t-h2); }
.bandeau-atelier .etiquette { color: #d6ecf9; }
.bandeau-atelier .plomb { color: rgba(255, 255, 255, 0.95); margin-top: var(--e-4); }

@media (max-width: 60rem) {
  .competence:nth-child(1) .competence__photo { aspect-ratio: 16 / 10; }
  .competence:nth-child(1) .competence__cadre { max-height: none; }
  /* Sur telephone le texte occupe toute la largeur : le degrade devient
     vertical, sinon la fin des lignes tombe sur la partie claire de la photo. */
  .bandeau-atelier::before {
    background: linear-gradient(
      180deg,
      rgba(11, 27, 43, 0.72) 0%,
      rgba(11, 27, 43, 0.9) 45%,
      rgba(11, 27, 43, 0.96) 100%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .competence__photo, .competence:hover .competence__photo { transform: none; }
}


/* ---------- 17. Message important -------------------------------------
   Bandeau pilote depuis /admin : une case a cocher l affiche ou le retire.
   Place SOUS l en-tete (demande du 29/08/2026) : premiere bande du contenu,
   il defile normalement avec la page.

   z-index 40, DELIBEREMENT sous les 50 de l en-tete collant : a 60 comme
   avant, le bandeau serait passe PAR-DESSUS la pastille de menu au moment du
   defilement. Devant le contenu, derriere la barre.

   Trois tons. Les couleurs de texte sont choisies pour rester au-dessus de
   4,5:1 sur leur fond respectif — un message d alerte illisible serait pire
   que pas de message.
------------------------------------------------------------------------ */
.message-important {
  position: relative; z-index: 40;
  border-top: 1px solid rgba(11, 27, 43, 0.08);
  border-bottom: 1px solid rgba(11, 27, 43, 0.12);
}
.message-important__interieur {
  display: flex; align-items: flex-start; gap: var(--e-4);
  padding-block: var(--e-4);
}
.message-important__icone { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; margin-top: 0.1rem; }
.message-important__icone svg { width: 100%; height: 100%; }
.message-important__corps { min-width: 0; }
.message-important__titre {
  font-family: var(--f-donnee); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: var(--e-2);
}
.message-important__texte { font-size: var(--t-petit); line-height: 1.55; }
.message-important__lien {
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: 1.75rem; margin-top: var(--e-3);
  font-family: var(--f-donnee); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0.06em; text-decoration: underline; text-underline-offset: 0.2em;
}

/* Information — bleu de la marque. */
.message-important[data-ton="info"] { background: #dfeefa; color: #123f5c; }
.message-important[data-ton="info"] .message-important__icone { color: var(--bleu); }
.message-important[data-ton="info"] .message-important__lien { color: #0f4f77; }

/* Avertissement — ambre. */
.message-important[data-ton="attention"] { background: #fdf1dc; color: #6b4300; }
.message-important[data-ton="attention"] .message-important__icone { color: #a06400; }
.message-important[data-ton="attention"] .message-important__lien { color: #6b4300; }

/* Urgence — rouge de la marque, en aplat. */
.message-important[data-ton="alerte"] { background: var(--rouge); color: var(--blanc); }
.message-important[data-ton="alerte"] .message-important__icone { color: var(--blanc); }
.message-important[data-ton="alerte"] .message-important__lien { color: var(--blanc); }
.message-important[data-ton="alerte"] { border-bottom-color: rgba(0, 0, 0, 0.2); }

/* =========================================================================
   Blog
   =========================================================================
   La liste emprunte la grammaire des cartes du site ; l article lui-meme est
   une colonne de LECTURE, plus etroite que l enveloppe standard. Les figures
   portent leurs reglages (largeur, rapport, cadrage) en styles EN LIGNE,
   choisis par l encodeur dans l administration — le CSS ne fixe ici que ce
   qui ne se regle pas : rayons, ombres, legendes, comportement mobile.
--------------------------------------------------------------------- */

.grille-blog {
  display: grid; gap: var(--e-5); margin-top: var(--e-7);
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}
.carte-article {
  display: flex; flex-direction: column;
  background: var(--carte-fond);
  border: 1px solid var(--carte-lisere);
  border-radius: var(--r-enveloppe);
  box-shadow: var(--ombre-1), var(--carte-lumiere);
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform var(--v-court) var(--sortie), box-shadow var(--v-court) var(--sortie);
}
.carte-article:hover { transform: translateY(-3px); box-shadow: var(--ombre-2, var(--ombre-1)), var(--carte-lumiere); }
.carte-article__visuel { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.carte-article__visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carte-article__corps { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-5); }
.carte-article__date {
  font-family: var(--f-donnee); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.08em; color: var(--ardoise);
}
.carte-article__titre {
  font-family: var(--f-titres, inherit); font-weight: 700; font-size: var(--t-h3);
  line-height: 1.25; letter-spacing: -0.01em;
}
.carte-article__resume { color: var(--ardoise); font-size: var(--t-petit); line-height: 1.55; }
.carte-article__appel {
  margin-top: auto; padding-top: var(--e-3);
  font-family: var(--f-donnee); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0.06em; color: var(--bleu);
  display: inline-flex; align-items: center; gap: var(--e-2);
}

/* --- L article ---------------------------------------------------------- */

.enveloppe--article { max-width: 46rem; }
.entete-section--article { margin-bottom: var(--e-6); }
.lien-retour { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }

.article { font-size: var(--t-texte); line-height: 1.7; }
.article p { margin-block: var(--e-4); }
.article h2 {
  margin-top: var(--e-7); margin-bottom: var(--e-3);
  font-size: var(--t-h3); letter-spacing: -0.01em;
}
.article__retour { margin-top: var(--e-7); }

/* Figures d article : la LARGEUR, l ALIGNEMENT, le RAPPORT et le CADRAGE
   viennent des styles en ligne poses par le generateur. */
.article-figure { margin: var(--e-6) 0; }
.article-figure img {
  display: block; width: 100%; height: auto;
  border-radius: calc(var(--r-enveloppe) - 0.25rem);
  border: 1px solid var(--carte-lisere);
  box-shadow: var(--ombre-1);
}
.article-figure figcaption {
  margin-top: var(--e-2);
  font-family: var(--f-donnee); font-size: var(--t-micro);
  color: var(--ardoise); text-align: center;
}
.article-figure--tete { margin: 0 0 var(--e-6); }
.article-figure--tete img { aspect-ratio: 21 / 9; object-fit: cover; }

/* Sur petit ecran, une figure reduite a 25-50 % deviendrait un timbre-poste :
   tout repasse en pleine largeur de colonne. */
@media (max-width: 40rem) {
  .article-figure { width: 100% !important; }
}