/* ==========================================================================
   PostDev360 — feuille de style unique
   Aucune ressource externe. Piles de polices système uniquement.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables
   -------------------------------------------------------------------------- */

:root {
  /* Palette — 6 valeurs. Contrastes vérifiés sur --couleur-papier :
     encre 15,9:1 · encre-secondaire 6,0:1 · sceau 8,5:1 (WCAG AA texte courant) */
  --couleur-papier: #f2f3f4;          /* fond de page */
  --couleur-surface: #ffffff;         /* blocs de données */
  --couleur-encre: #15181c;           /* titres et texte courant */
  --couleur-encre-secondaire: #565d66;/* libellés, mentions accessoires */
  --couleur-filet: #d5d8dc;           /* filets de séparation */
  --couleur-sceau: #7a2a38;           /* accent : liens, numéros, focus */

  /* Polices — trois rôles, aucune police téléchargée */
  --police-titre: "Iowan Old Style", "Palatino Linotype", Palatino, Palladio,
    "Book Antiqua", Georgia, serif;
  --police-texte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --police-donnee: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Échelle typographique — raison 1,2 environ */
  --taille-xs: 0.75rem;      /* 12px — libellés mono */
  --taille-s: 0.8125rem;     /* 13px */
  --taille-m: 0.9375rem;     /* 15px */
  --taille-base: 1.0625rem;  /* 17px — texte courant */
  --taille-l: 1.25rem;       /* 20px — chapeau */
  --taille-xl: 1.5rem;
  --taille-titre: clamp(2.25rem, 1.6rem + 3.2vw, 3.5rem);

  /* Échelle d'espacement — base 4px */
  --espace-1: 0.25rem;
  --espace-2: 0.5rem;
  --espace-3: 0.75rem;
  --espace-4: 1rem;
  --espace-6: 1.5rem;
  --espace-8: 2rem;
  --espace-12: 3rem;
  --espace-16: 4rem;
  --espace-24: 6rem;

  /* Grille */
  --largeur-page: 58rem;
  --colonne-rail: 8.5rem;
  --mesure: 62ch;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background-color: var(--couleur-papier);
  color: var(--couleur-encre);
  font-family: var(--police-texte);
  font-size: var(--taille-base);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

p {
  margin: 0 0 var(--espace-4);
  max-width: var(--mesure);
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--couleur-sceau);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--couleur-sceau);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   3. Ossature : la grille à rail
   -------------------------------------------------------------------------- */

.page {
  max-width: var(--largeur-page);
  margin: 0 auto;
  padding: 0 var(--espace-6);
}

.section {
  display: grid;
  grid-template-columns: var(--colonne-rail) minmax(0, 1fr);
  gap: var(--espace-4) var(--espace-8);
  padding-block: var(--espace-12);
  border-top: 1px solid var(--couleur-filet);
}

.section__titre {
  margin: 0;
  font-family: var(--police-donnee);
  font-size: var(--taille-xs);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--couleur-encre-secondaire);
}

.section__numero {
  display: block;
  margin-bottom: var(--espace-1);
  color: var(--couleur-sceau);
  letter-spacing: 0.05em;
}

.section__corps > :first-child {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   4. En-tête
   -------------------------------------------------------------------------- */

/* Bascule de langue : un seul lien, vers l'autre version */
.langue {
  padding-top: var(--espace-6);
  text-align: right;
  font-family: var(--police-donnee);
  font-size: var(--taille-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.entete {
  padding-block: var(--espace-16) var(--espace-12);
}

.langue + .entete {
  padding-top: var(--espace-12);
}

.entete__surtitre {
  margin: 0 0 var(--espace-6);
  font-family: var(--police-donnee);
  font-size: var(--taille-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--couleur-encre-secondaire);
}

.entete__nom {
  margin: 0 0 var(--espace-6);
  font-family: var(--police-titre);
  font-size: var(--taille-titre);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.entete__phrase {
  max-width: 34ch;
  font-size: var(--taille-l);
  line-height: 1.45;
}

/* Bandeau de contact : visible sans défiler */
.reperes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-2) var(--espace-8);
  margin-top: var(--espace-8);
  padding-top: var(--espace-4);
  border-top: 1px solid var(--couleur-filet);
  font-family: var(--police-donnee);
  font-size: var(--taille-s);
}

.reperes__paire {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-2);
}

.reperes__cle {
  color: var(--couleur-encre-secondaire);
}

.reperes__valeur {
  margin: 0;
}

/* --------------------------------------------------------------------------
   5. Bloc d'identité — élément signature
   -------------------------------------------------------------------------- */

.registre {
  margin: 0;
  background-color: var(--couleur-surface);
  border: 1px solid var(--couleur-filet);
}

.registre__ligne {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--espace-1) var(--espace-4);
  padding: var(--espace-3) var(--espace-4);
  border-top: 1px solid var(--couleur-filet);
}

.registre__ligne:first-child {
  border-top: 0;
}

.registre dt {
  font-family: var(--police-donnee);
  font-size: var(--taille-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--couleur-encre-secondaire);
}

.registre dd {
  margin: 0;
  font-family: var(--police-donnee);
  font-size: var(--taille-m);
  line-height: 1.6;
}

/* Valeur non renseignée : doit rester impossible à manquer */
.a-remplir {
  color: var(--couleur-sceau);
  border-bottom: 1px dashed currentColor;
}

/* --------------------------------------------------------------------------
   6. Éléments de texte
   -------------------------------------------------------------------------- */

.note {
  font-size: var(--taille-m);
  color: var(--couleur-encre-secondaire);
}

.registre + .note {
  margin-top: var(--espace-4);
}

.lien-suite {
  display: inline-block;
  margin-top: var(--espace-4);
  font-family: var(--police-donnee);
  font-size: var(--taille-s);
}

.contact-direct {
  font-family: var(--police-donnee);
  font-size: var(--taille-l);
  word-break: break-word;
}

.liste-nue {
  margin: 0;
  padding: 0;
  list-style: none;
}

.liste-nue > li + li {
  margin-top: var(--espace-2);
}

/* --------------------------------------------------------------------------
   7. Produits — squelette prêt à remplir (voir bloc commenté dans index.html)
   -------------------------------------------------------------------------- */

.produits {
  margin: 0;
  padding: 0;
  list-style: none;
}

.produit {
  padding-block: var(--espace-4);
  border-top: 1px solid var(--couleur-filet);
}

.produit:first-child {
  border-top: 0;
  padding-top: 0;
}

.produit__nom {
  margin: 0 0 var(--espace-1);
  font-family: var(--police-titre);
  font-size: var(--taille-xl);
  font-weight: 400;
  line-height: 1.2;
}

.produit__resume {
  margin: 0 0 var(--espace-2);
  font-size: var(--taille-m);
}

.produit__lien {
  font-family: var(--police-donnee);
  font-size: var(--taille-s);
}

/* --------------------------------------------------------------------------
   8. Pied de page
   -------------------------------------------------------------------------- */

.pied {
  padding-block: var(--espace-8) var(--espace-16);
  border-top: 1px solid var(--couleur-filet);
  font-size: var(--taille-s);
  color: var(--couleur-encre-secondaire);
}

.pied__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-2) var(--espace-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   9. Adaptations — un seul point de rupture, le rail passe au-dessus
   -------------------------------------------------------------------------- */

@media (max-width: 46rem) {
  .section {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espace-3);
    padding-block: var(--espace-8);
  }

  .section__numero {
    display: inline;
    margin-right: var(--espace-2);
  }

  .entete,
  .langue + .entete {
    padding-block: var(--espace-8);
  }

  .registre__ligne {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}