/* ==================================================================
   base.css - socle commun a toutes les pages.

   Variables, typographie, en-tete, boutons, bloc contact, pied de page.
   Chaque page charge ce fichier puis la feuille de son gabarit
   (index.css ou page.css), jamais les deux.

   Palette (IDENTITE/palette.png) : 34E0A1, 3447AA, E8258B, 0A1440.
   La menthe et le magenta d'origine n'atteignent pas le contraste
   minimum sur fond blanc (1,7:1 et 4,1:1) : sur blanc, le texte utilise
   leurs variantes foncees. Les teintes d'origine restent sur fond sombre.
   ================================================================== */

@font-face {
  font-family: "Inter";
  src: url("/polices/inter-latin-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/polices/jetbrains-mono-latin-variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette de la charte */
  --menthe: #34e0a1;
  --bleu: #3447aa;
  --magenta: #e8258b;
  --navy: #0a1440;

  /* Variantes calculees pour le contraste (ratio sur blanc entre parentheses) */
  --menthe-texte: #0f7a55;   /* 5,3:1  texte courant */
  --menthe-titre: #12955f;   /* 3,8:1  gros titres uniquement */
  --magenta-texte: #c2176f;  /* 5,8:1 */
  --magenta-clair: #f25ca5;  /* 5,8:1 sur navy */
  --navy-2: #111c52;
  --navy-3: #060d2e;
  --bleu-nuit: #1b2a78;

  /* Texte */
  --texte: #0a1440;
  --texte-doux: #4a5270;     /* 7,7:1 */
  --clair: #ffffff;
  --clair-doux: #c3ccec;     /* 11:1 sur navy */
  --clair-discret: #93a2d8;  /* 7:1 sur navy */

  /* Surfaces et filets */
  --fond: #ffffff;
  --fond-doux: #f4f6fb;
  --filet: #d3d7e3;
  --filet-champ: #8a91a8;    /* 3,1:1 : contour de champ visible */

  /* Couleur des mots mis en valeur dans les titres : changee par les
     sections sombres, sans multiplier les selecteurs. */
  --accent: var(--menthe-titre);
  --titre: var(--bleu);

  --police: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --police-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --rayon: 12px;
  --rayon-carte: 22px;
  --hauteur-entete: 4.5rem;
}

/* ---- Base courte maison ---- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* L'en-tete est colle : les ancres et le focus s'arretent dessous
     (critere WCAG 2.4.11, focus non masque). */
  scroll-padding-top: calc(var(--hauteur-entete) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--police);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--texte);
  background: var(--fond);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

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

img {
  height: auto;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

address {
  font-style: normal;
}

main:focus {
  outline: none;
}

/* Focus visible partout, jamais supprime sans remplacement */
:focus-visible {
  outline: 3px solid var(--magenta);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.evitement {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  font-family: var(--police-mono);
  font-weight: 700;
  color: var(--navy);
  background: var(--menthe);
  border-radius: var(--rayon);
  transform: translateY(-200%);
}

.evitement:focus {
  transform: none;
}

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

.conteneur {
  width: 100%;
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

.conteneur-etroit {
  max-width: 54rem;
}

@media (min-width: 40em) {
  .conteneur {
    padding-inline: 2rem;
  }
}

.section {
  padding-block: 4rem;
}

@media (min-width: 64em) {
  .section {
    padding-block: 6rem;
  }
}

.section-sombre {
  --accent: var(--menthe);
  --titre: var(--clair);
  color: var(--clair-doux);
  background: var(--navy);
}

/* ---- Titres ---- */

.titre-section {
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--titre);
}

.titre-centre {
  text-align: center;
}

.titre-clair {
  --accent: var(--menthe);
  color: var(--clair);
}

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

.point {
  color: var(--magenta);
}

.accolade {
  font-weight: 700;
  color: var(--menthe);
}

.section-intro {
  max-width: 46rem;
  margin: 1rem auto 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--texte-doux);
  text-align: center;
}

.section-sous-titre {
  margin-top: 0.75rem;
  font-family: var(--police-mono);
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  font-weight: 500;
  color: var(--clair-doux);
}

.section-sous-titre-sombre {
  color: var(--texte-doux);
}

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

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.7rem 1.4rem;
  font-family: var(--police-mono);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--rayon);
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.bouton:hover {
  transform: translateY(-1px);
}

.bouton-menthe {
  color: var(--navy);
  background: var(--menthe);
}

.bouton-menthe:hover {
  background: #5fe8b6;
}

.bouton-contour {
  color: var(--menthe);
  border-color: var(--menthe);
}

.bouton-contour:hover {
  color: var(--navy);
  background: var(--menthe);
}

.bouton-large {
  width: 100%;
}

/* ---- En-tete ---- */

.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  color: var(--clair);
  background: var(--navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.entete-interieur {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  min-height: var(--hauteur-entete);
  padding-block: 0.75rem;
}

.entete-logo {
  display: block;
  padding: 0.25rem 0;
}

.entete-logo img {
  width: 150px;
  height: 40px;
}

.menu-bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  font-family: var(--police-mono);
  font-weight: 700;
  color: var(--clair);
  background: transparent;
  border: 2px solid var(--menthe);
  border-radius: var(--rayon);
  cursor: pointer;
}

.menu-bouton[hidden] {
  display: none;
}

.navigation {
  width: 100%;
}

.navigation-liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
}

.navigation-lien {
  display: inline-block;
  padding: 0.6rem 0.1rem;
  font-family: var(--police-mono);
  font-size: 0.95rem;
  color: var(--clair);
  text-decoration: none;
  text-underline-offset: 6px;
}

.navigation-lien:hover,
.navigation-lien[aria-current] {
  color: var(--menthe);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* Mobile avec JavaScript : panneau replie sous l'en-tete */
@media (max-width: 59.99em) {
  .js .navigation {
    display: none;
  }

  .js .navigation[data-ouvert] {
    display: block;
    padding-bottom: 1rem;
  }

  .js .navigation-liste {
    flex-direction: column;
    align-items: stretch;
  }

  .js .navigation-lien {
    display: block;
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .navigation-devis {
    margin-top: 0.75rem;
  }
}

@media (min-width: 60em) {
  .entete-interieur {
    flex-wrap: nowrap;
  }

  .menu-bouton {
    display: none;
  }

  .navigation {
    width: auto;
    flex: 1;
  }

  .navigation-liste {
    flex-wrap: nowrap;
    gap: 1.75rem;
  }

  .navigation-liste > :first-child {
    margin-left: auto;
  }

  .navigation-devis {
    margin-left: auto;
  }
}

/* ---- Bloc contact (accueil et page Contact) ---- */

.contact {
  --accent: var(--menthe);
  padding-block: 4rem;
  color: var(--clair-doux);
  background: linear-gradient(160deg, var(--navy) 0%, var(--bleu-nuit) 100%);
}

@media (min-width: 64em) {
  .contact {
    padding-block: 6rem;
  }
}

.contact-grille {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 64em) {
  .contact-grille {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 4rem;
    align-items: start;
  }
}

.contact-texte {
  margin-top: 1.25rem;
  font-size: 1.1rem;
}

.contact-coordonnees {
  display: grid;
  gap: 0.75rem;
  margin-top: 2rem;
}

.contact-coordonnees li {
  display: grid;
  gap: 0.15rem;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--rayon);
}

.contact-etiquette {
  font-family: var(--police-mono);
  font-size: 0.8rem;
  color: var(--clair-discret);
}

.contact-lien,
.contact-valeur {
  font-weight: 700;
  color: var(--clair);
  overflow-wrap: anywhere;
}

.contact-lien {
  text-decoration: none;
}

.contact-lien:hover {
  color: var(--menthe);
  text-decoration: underline;
}

.formulaire {
  display: grid;
  gap: 1.1rem;
  padding: 1.5rem;
  color: var(--texte);
  background: var(--fond);
  border-radius: 20px;
}

@media (min-width: 40em) {
  .formulaire {
    padding: 2.25rem;
  }
}

.formulaire-legende,
.champ-aide {
  font-size: 0.9rem;
  color: var(--texte-doux);
}

.champ {
  display: grid;
  gap: 0.4rem;
}

.champ label {
  font-family: var(--police-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.7rem 0.9rem;
  font-size: 1rem;
  color: var(--texte);
  background: var(--fond);
  border: 1.5px solid var(--filet-champ);
  border-radius: var(--rayon);
}

.champ textarea {
  resize: vertical;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  border-color: var(--bleu);
}

.champ [aria-invalid="true"] {
  border-color: var(--magenta-texte);
  border-width: 2px;
}

.champ-duo {
  display: grid;
  gap: 1.1rem;
}

@media (min-width: 40em) {
  .champ-duo {
    grid-template-columns: 1fr 1fr;
  }
}

.champ-case {
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 0.75rem;
}

.champ-case input {
  width: 1.5rem;
  min-height: 1.5rem;
  height: 1.5rem;
  margin: 0.1rem 0 0;
  accent-color: var(--menthe-texte);
}

.champ-case label {
  font-family: var(--police);
  font-size: 0.95rem;
  font-weight: 500;
}

.champ-case .champ-erreur {
  grid-column: 1 / -1;
}

.requis {
  color: var(--magenta-texte);
}

.champ-erreur {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--magenta-texte);
}

.formulaire-alerte {
  padding: 1rem 1.25rem;
  color: var(--texte);
  background: #fdeef5;
  border: 2px solid var(--magenta-texte);
  border-radius: var(--rayon);
}

.formulaire-alerte ul {
  margin-top: 0.5rem;
  padding-left: 1.1rem;
  list-style: disc;
}

.formulaire-alerte a {
  color: var(--magenta-texte);
  font-weight: 600;
}

.formulaire-rgpd {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--texte-doux);
}

.formulaire-rgpd a {
  color: var(--bleu);
  font-weight: 600;
}

.formulaire-delai {
  font-family: var(--police-mono);
  font-size: 0.85rem;
  color: var(--texte-doux);
  text-align: center;
}

/* Champ piege : hors ecran, jamais visible ni atteignable */
.piege {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

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

.pied {
  padding-top: 3.5rem;
  color: var(--clair-doux);
  background: var(--navy-3);
}

.pied-grille {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 40em) {
  .pied-grille {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 64em) {
  .pied-grille {
    grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
  }
}

.pied-marque p {
  max-width: 22rem;
  margin-top: 1rem;
  font-size: 0.95rem;
}

.pied-titre {
  margin-bottom: 0.9rem;
  font-family: var(--police-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--menthe);
}

.pied-colonne ul,
.pied-adresse {
  display: grid;
  gap: 0.35rem;
}

.pied-colonne a {
  display: inline-block;
  padding-block: 0.2rem;
  color: var(--clair-doux);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.pied-colonne a:hover,
.pied-colonne [aria-current="page"] {
  color: var(--clair);
  text-decoration: underline;
}

.pied-note {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--clair-discret);
}

.pied-reseaux {
  margin-top: 1rem;
}

.pied-bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: 3rem;
  padding-block: 1.5rem;
  font-size: 0.85rem;
  color: #a8b3da;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .bouton {
    transition: none;
  }

  .bouton:hover {
    transform: none;
  }
}