/* =========================================================
   Pouzolles · base
   Remise à zéro, typographie, mise en page, boutons, utilitaires.
   Dépend de tokens.css (à charger avant).
   ========================================================= */

:root {
  --chaux-doux: rgba(250, 250, 247, .78);
  --filet-sombre: rgba(250, 250, 247, .18);
  --entete-h: 84px;
  --entete-h-reduit: 64px;

  /* Plans d'empilement */
  --z-entete: 50;
  --z-barre: 60;
  --z-menu: 70;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;   /* pas de flash gris au tap : chaque contrôle a son :active */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--entete-h-reduit) + var(--e-2));
}
@media (min-width: 1024px) {
  html { scroll-padding-top: calc(var(--entete-h) + var(--e-2)); }
}
@media (max-width: 1023.98px) {
  html { scroll-padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + var(--e-2)); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 400 var(--t-m)/1.6 var(--f-texte);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
input, textarea, select { font-size: max(16px, 1em); }   /* sous 16 px, iOS zoome sur le champ */

/* Contrôles : clic immédiat (pas d'attente du double-tap), libellé non sélectionnable à l'appui long */
button, .btn, summary, .barre-appel a, .menu-mobile__liste a, .nav__lien, .sommaire a, .puces label, .bouton-menu {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
p, ul, ol, dl, dd, figure, h1, h2, h3, h4 { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

/* ---------- Titres ---------- */
h1, h2, h3 {
  font-family: var(--f-titre);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.015em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-weight: 300; letter-spacing: -.025em; }
h2 { font-size: var(--t-xl); font-weight: 300; }
h1 em, h2 em, .geant em { font-style: italic; font-weight: 300; }
h3 { font-family: var(--f-texte); font-size: var(--t-l); font-weight: 500; letter-spacing: -.01em; }

p { text-wrap: pretty; max-width: var(--mesure); }

/* Petit libellé (utilisé avec parcimonie) */
.libelle {
  font-family: var(--f-data);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ---------- Liens ---------- */
a { color: var(--accent); text-underline-offset: .22em; text-decoration-thickness: 1px; }
@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration-thickness: 1.5px; }
}
.section--sombre a:not(.btn), .pied a, .bloc--alerte a, .contact-rapide a:not(.btn) { color: var(--chaux); }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-weight: 500;
  text-decoration: none;
  min-height: 44px;
}
.lien-fleche::after { content: "→"; transition: transform var(--duree-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .lien-fleche:hover::after { transform: translateX(4px); }
}

/* ---------- Focus visible ---------- */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.section--sombre :focus-visible, .heros :focus-visible, .contact-rapide :focus-visible,
.bloc--alerte :focus-visible, .pied :focus-visible, .menu-mobile :focus-visible { outline-color: var(--chaux); }

/* ---------- Mise en page ---------- */
.conteneur {
  width: 100%;
  max-width: calc(var(--largeur-max) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding-inline: max(var(--gouttiere), env(safe-area-inset-left, 0px)) max(var(--gouttiere), env(safe-area-inset-right, 0px));
}

.section { padding-block: clamp(4rem, 2.5rem + 5vw, 7rem); }
.section--sombre { background: var(--sombre); color: var(--sur-sombre); --filet: var(--filet-sombre); }
.section--pale { background: var(--fond-alt); }

/* ---------- Boutons ---------- */
.btn {
  --btn-fond: var(--haie);
  --btn-texte: var(--chaux);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 50px;
  padding: .8em 1.5em;
  border: 1px solid var(--btn-fond);
  border-radius: var(--rayon);
  background: var(--btn-fond);
  color: var(--btn-texte);
  font: 500 1rem/1 var(--f-texte);
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duree-ui) ease, color var(--duree-ui) ease, border-color var(--duree-ui) ease, transform 160ms var(--ease-out);
}
.btn:active { transform: scale(.97); }

.btn--contour { background: transparent; color: var(--texte); border-color: currentColor; }

/* Sur photo ou fond sombre */
.btn--clair { --btn-fond: var(--chaux); --btn-texte: var(--haie); }
.btn--contour-clair { background: transparent; color: var(--chaux); border-color: rgba(250, 250, 247, .6); }

/* Survols : souris uniquement (au doigt, un survol reste « collé » après le tap) */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { --btn-fond: var(--encre); }
  .btn--contour:hover { background: var(--texte); color: var(--fond); border-color: var(--texte); }
  .btn--clair:hover { --btn-fond: #fff; }
  .btn--contour-clair:hover { background: var(--chaux); color: var(--haie); border-color: var(--chaux); }
}
/* Au doigt : retour visible dès l'appui */
.btn--contour:active, .btn--contour-clair:active { background: rgba(22, 26, 22, .08); }
.section--sombre .btn--contour-clair:active, .heros .btn--contour-clair:active { background: rgba(250, 250, 247, .14); }

/* Le bouton d'appel garde le nom de classe .btn--appel (utilisé dans les 7 pages) */
.btn--appel::before {
  content: "";
  width: 1em; height: 1em;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.boutons { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- À valider avec le client ---------- */
mark.a-valider {
  background: rgba(217, 180, 58, .22);
  color: inherit;
  border-bottom: 1px dashed currentColor;
  padding: 0 .15em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.section--sombre mark.a-valider, .heros mark.a-valider { background: rgba(217, 180, 58, .3); }

/* ---------- Emplacements photo ---------- */
.ph { min-height: 10rem; width: 100%; }

/* ---------- Utilitaires ---------- */
.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.lien-evitement {
  position: absolute;
  left: var(--e-2); top: -100px;
  z-index: 100;
  padding: .75em 1em;
  background: var(--haie);
  color: var(--chaux);
  font-weight: 500;
}
.lien-evitement:focus { top: var(--e-2); }

.note { font-size: var(--t-s); line-height: 1.5; color: var(--texte-doux); }
.section--sombre .note, .bloc--alerte .note { color: var(--chaux-doux); }