/* ==========================================================================
   DJ Clem G, djclemg.fr
   Feuille de style unique. HTML, CSS et JavaScript natifs, aucune dépendance.
   Palette et typographies : content.md, section 11.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Polices, hébergées localement dans assets/fonts/
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   2. Variables
   -------------------------------------------------------------------------- */

:root {
  /* Palette, content.md section 11 */
  --creme: #faf7f2;          /* fond principal */
  --lin: #ede4d4;            /* fond alterné */
  --jute: #d9c7a7;           /* accent texturé */
  --brun: #3b2a20;           /* texte principal */
  --accent: #8b5e3c;         /* brun moyen, décor et texte sur crème */
  --accent-fonce: #734c2f;   /* variante lisible en AA sur crème, lin et jute */
  --dore: #c89b5a;           /* filets, icônes, texte sur fond sombre */
  --sombre: #1a1310;         /* hero et sections sombres */

  /* Teintes dérivées */
  --brun-attenue: #5d4839;
  --creme-attenue: #d8cfc4;
  --filet: rgba(59, 42, 32, 0.14);
  /* Frontière d'un champ de saisie : rien d'autre ne le délimite, il lui faut
     3:1 minimum. À 0,61 la bordure donne 3,91 sur crème et 3,65 sur lin. */
  --filet-champ: rgba(59, 42, 32, 0.61);
  --filet-clair: rgba(250, 247, 242, 0.22);

  /* Typographies */
  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', 'Avenir Next', 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Échelle de texte */
  --t-corps: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
  --t-petit: 0.9375rem;
  --t-menu: 1rem;
  --t-surtitre: 0.78125rem;
  --t-h1-hero: clamp(2.625rem, 1.5rem + 5.5vw, 4.75rem);
  --t-h1: clamp(2.125rem, 1.4rem + 3.4vw, 3.5rem);
  --t-h2: clamp(1.75rem, 1.2rem + 2.4vw, 2.625rem);
  --t-h3: clamp(1.3125rem, 1.15rem + 0.8vw, 1.625rem);
  --t-h4: 1.125rem;

  /* Rythme */
  --ligne: 1.7;
  --ligne-titre: 1.12;
  --mesure: 68ch;

  /* Espacements */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;
  --e8: 4rem;
  --e9: 6rem;
  --section-y: clamp(3.5rem, 2rem + 7vw, 7rem);

  /* Structure */
  --largeur-max: 1200px;
  --gouttiere: clamp(1.25rem, 4vw, 2.5rem);
  --rayon: 2px;
  --rayon-carte: 3px;

  /* Hauteurs des barres fixes */
  --h-header: 4.5rem;
  --h-barre-mobile: 4.25rem;

  /* Transitions */
  --transition: 220ms ease;

  /* Texture toile de jute : deux trames croisées, tissage très discret.
     Opacité effective sous 6 %, elle ne doit jamais gêner la lecture. */
  --texture-jute:
    repeating-linear-gradient(90deg,
      rgba(59, 42, 32, 0.045) 0, rgba(59, 42, 32, 0.045) 1px,
      transparent 1px, transparent 4px),
    repeating-linear-gradient(0deg,
      rgba(59, 42, 32, 0.035) 0, rgba(59, 42, 32, 0.035) 1px,
      transparent 1px, transparent 4px);
}

/* --------------------------------------------------------------------------
   3. Réinitialisation et base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--h-header) + 1rem);
}

body {
  margin: 0;
  background-color: var(--creme);
  color: var(--brun);
  font-family: var(--sans);
  font-size: var(--t-corps);
  font-weight: 400;
  line-height: var(--ligne);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

/* Marge réservée à la barre d'action fixe du mobile */
@media (max-width: 899px) {
  body {
    padding-bottom: var(--h-barre-mobile);
  }
}

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: var(--ligne-titre);
  color: var(--brun);
  margin: 0 0 var(--e5);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 600; }
h4 { font-size: var(--t-h4); font-family: var(--sans); font-weight: 500; letter-spacing: 0.01em; }

p {
  margin: 0 0 var(--e5);
}

a {
  color: var(--accent-fonce);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--transition);
}

a:hover {
  color: var(--brun);
}

ul, ol {
  padding-left: 1.25em;
  margin: 0 0 var(--e5);
}

li {
  margin-bottom: var(--e2);
}

blockquote {
  margin: 0;
}

hr {
  border: 0;
  border-top: 1px solid var(--filet);
  margin: var(--e7) 0;
}

strong {
  font-weight: 500;
  color: var(--brun);
}

/* --------------------------------------------------------------------------
   4. Accessibilité
   -------------------------------------------------------------------------- */

.evitement {
  position: absolute;
  left: var(--e4);
  top: var(--e4);
  z-index: 200;
  transform: translateY(-160%);
  background: var(--brun);
  color: var(--creme);
  padding: var(--e3) var(--e5);
  border-radius: var(--rayon);
  font-size: var(--t-petit);
  text-decoration: none;
  transition: transform var(--transition);
}

.evitement:focus {
  transform: translateY(0);
  color: var(--creme);
}

:focus-visible {
  outline: 3px solid var(--accent-fonce);
  outline-offset: 3px;
  border-radius: var(--rayon);
}

.section--sombre :focus-visible,
.cta-pied :focus-visible,
.lightbox :focus-visible,
.hero :focus-visible,
.pied :focus-visible,
.barre-mobile__lien--cta:focus-visible,
.bouton--primaire:focus-visible {
  outline-color: var(--dore);
}

.hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   5. Structure : conteneurs et sections
   -------------------------------------------------------------------------- */

.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.conteneur--etroit {
  max-width: 780px;
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--lin {
  background-color: var(--lin);
  background-image: var(--texture-jute);
}

.section--jute {
  background-color: var(--jute);
  background-image: var(--texture-jute);
}

.section--sombre {
  background-color: var(--sombre);
  color: var(--creme-attenue);
}

.section--sombre h1,
.section--sombre h2,
.section--sombre h3,
.section--sombre h4 {
  color: var(--creme);
}

.section--sombre a {
  color: var(--dore);
}

.section--sombre a:hover {
  color: var(--creme);
}

.section--serre {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

/* Prose : texte long limité à 68 caractères par ligne */
.prose {
  max-width: var(--mesure);
}

.prose > p:last-child {
  margin-bottom: 0;
}

.prose--centre {
  margin-inline: auto;
}

/* En-tête de section */
.entete-section {
  margin-bottom: var(--e7);
  max-width: var(--mesure);
}

.entete-section--centre {
  margin-inline: auto;
  text-align: center;
}

.entete-section > :last-child {
  margin-bottom: 0;
}

.surtitre {
  display: block;
  font-family: var(--sans);
  font-size: var(--t-surtitre);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-fonce);
  margin-bottom: var(--e4);
}

.section--sombre .surtitre,
.hero .surtitre {
  color: var(--dore);
}

.chapo {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  line-height: 1.6;
  color: var(--brun-attenue);
}

.section--sombre .chapo {
  color: var(--creme-attenue);
}

/* Filet décoratif */
.filet {
  width: 3rem;
  height: 1px;
  background: var(--dore);
  border: 0;
  margin: 0 0 var(--e5);
}

.entete-section--centre .filet,
.centre .filet {
  margin-inline: auto;
}

/* Grilles */
.grille {
  display: grid;
  gap: var(--e6);
}

@media (min-width: 640px) {
  .grille--2 { grid-template-columns: repeat(2, 1fr); }
  .grille--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .grille--3 { grid-template-columns: repeat(3, 1fr); }
  .grille--4 { grid-template-columns: repeat(4, 1fr); }
  .grille--2-1 { grid-template-columns: 1.4fr 1fr; gap: var(--e8); }
}

/* --------------------------------------------------------------------------
   6. Boutons et liens d'action
   -------------------------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  font-family: var(--sans);
  font-size: var(--t-menu);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  padding: 0.9375rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
    border-color var(--transition);
  min-height: 48px;
}

.bouton--primaire {
  background-color: var(--brun);
  border-color: var(--brun);
  color: var(--creme);
}

.bouton--primaire:hover {
  background-color: var(--accent-fonce);
  border-color: var(--accent-fonce);
  color: var(--creme);
}

.bouton--secondaire {
  background-color: transparent;
  border-color: var(--accent-fonce);
  color: var(--accent-fonce);
}

.bouton--secondaire:hover {
  background-color: var(--brun);
  border-color: var(--brun);
  color: var(--creme);
}

.bouton--clair {
  background-color: var(--creme);
  border-color: var(--creme);
  color: var(--brun);
}

.bouton--clair:hover {
  background-color: var(--dore);
  border-color: var(--dore);
  color: var(--sombre);
}

.bouton--contour-clair {
  background-color: transparent;
  border-color: var(--creme-attenue);
  color: var(--creme);
}

.bouton--contour-clair:hover {
  background-color: var(--creme);
  color: var(--brun);
}

.boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e4);
}

.boutons--centre {
  justify-content: center;
}

/* Lien fléché de fin de section */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-weight: 500;
  font-size: var(--t-menu);
  letter-spacing: 0.02em;
  text-decoration: none;
  border-bottom: 1px solid var(--dore);
  padding-bottom: 2px;
}

.lien-fleche:hover {
  border-bottom-color: var(--brun);
}

.section--sombre .lien-fleche:hover {
  border-bottom-color: var(--creme);
}

/* --------------------------------------------------------------------------
   7. En-tête et navigation
   -------------------------------------------------------------------------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(250, 247, 242, 0.96);
  border-bottom: 1px solid var(--filet);
  backdrop-filter: saturate(140%) blur(6px);
}

.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  min-height: var(--h-header);
}

.logotype {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brun);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}

.logotype:hover {
  color: var(--accent-fonce);
}

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

.nav {
  display: none;
}

.nav__liste {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.8vw, 1.875rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__liste li {
  margin: 0;
}

.nav__lien {
  font-size: var(--t-menu);
  font-weight: 400;
  color: var(--brun);
  text-decoration: none;
  padding-block: var(--e2);
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}

.nav__lien:hover,
.nav__lien[aria-current='page'] {
  color: var(--accent-fonce);
  border-bottom-color: var(--dore);
}

.entete__actions {
  display: flex;
  align-items: center;
  gap: var(--e4);
}

.entete .bouton {
  padding: 0.6875rem 1.25rem;
  font-size: 0.9375rem;
}

.entete__cta {
  display: none;
}

@media (min-width: 900px) {
  .nav,
  .entete__cta {
    display: block;
  }
}

/* Bouton d'ouverture du menu mobile, affiché sous 900 px seulement */
.bascule-menu {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  cursor: pointer;
}

@media (max-width: 899px) {
  .bascule-menu {
    display: inline-flex;
  }
}

.bascule-menu__barre {
  display: block;
  width: 20px;
  height: 1px;
  background-color: var(--brun);
  transition: transform var(--transition), opacity var(--transition);
}

.bascule-menu[aria-expanded='true'] .bascule-menu__barre:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.bascule-menu[aria-expanded='true'] .bascule-menu__barre:nth-child(2) {
  opacity: 0;
}

.bascule-menu[aria-expanded='true'] .bascule-menu__barre:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Panneau du menu mobile */
.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 150;
  background-color: var(--creme);
  padding: var(--e6) var(--gouttiere) var(--e8);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

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

.menu-mobile__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--h-header);
  margin-bottom: var(--e6);
}

.menu-mobile__fermer {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  background: transparent;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  color: var(--brun);
  cursor: pointer;
}

.menu-mobile__liste {
  list-style: none;
  margin: 0 0 var(--e7);
  padding: 0;
}

.menu-mobile__liste li {
  margin: 0;
  border-bottom: 1px solid var(--filet);
}

.menu-mobile__lien {
  display: block;
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--brun);
  text-decoration: none;
  padding-block: var(--e4);
}

.menu-mobile__lien:hover,
.menu-mobile__lien[aria-current='page'] {
  color: var(--accent-fonce);
}

.menu-mobile__pied {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}

.menu-mobile__contact {
  font-size: var(--t-petit);
  color: var(--brun-attenue);
  margin: 0;
}

/* --------------------------------------------------------------------------
   8. Barre d'action fixe du mobile
   -------------------------------------------------------------------------- */

.barre-mobile {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: stretch;
  gap: 1px;
  background-color: var(--filet);
  border-top: 1px solid var(--filet);
  padding-bottom: env(safe-area-inset-bottom);
}

@media (min-width: 900px) {
  .barre-mobile {
    display: none;
  }
}

.barre-mobile__lien {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--h-barre-mobile);
  padding: var(--e2) var(--e4);
  background-color: var(--creme);
  color: var(--brun);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-align: center;
}

.barre-mobile__lien--cta {
  background-color: var(--brun);
  color: var(--creme);
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
}

.barre-mobile__icone {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 88vh;
  min-height: min(88svh, 46rem);
  display: flex;
  align-items: flex-end;
  background-color: var(--sombre);
  color: var(--creme);
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.hero__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top,
      rgba(26, 19, 16, 0.92) 0%,
      rgba(26, 19, 16, 0.72) 38%,
      rgba(26, 19, 16, 0.42) 70%,
      rgba(26, 19, 16, 0.55) 100%);
}

.hero__interieur {
  padding-block: clamp(3rem, 2rem + 8vw, 6rem);
  width: 100%;
}

.hero__contenu {
  max-width: 44rem;
}

.hero__titre {
  font-size: var(--t-h1-hero);
  font-weight: 400;
  color: var(--creme);
  margin-bottom: var(--e5);
  letter-spacing: -0.015em;
}

.hero__sous-titre {
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.25rem);
  line-height: 1.6;
  color: var(--creme-attenue);
  max-width: 34rem;
  margin-bottom: var(--e6);
}

.hero__sous-titre span {
  display: block;
}

/* --------------------------------------------------------------------------
   10. Bandeau de réassurance
   -------------------------------------------------------------------------- */

.reassurance {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e6);
}

@media (min-width: 640px) {
  .reassurance { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .reassurance { grid-template-columns: repeat(4, 1fr); gap: var(--e5); }
}

.reassurance li {
  margin: 0;
  padding-top: var(--e4);
  border-top: 1px solid var(--filet);
}

.reassurance__icone {
  width: 28px;
  height: 28px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.25;
  margin-bottom: var(--e3);
}

.reassurance__titre {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0 0 var(--e2);
  color: var(--brun);
}

.reassurance__texte {
  font-size: var(--t-petit);
  line-height: 1.6;
  color: var(--brun-attenue);
  margin: 0;
}

/* --------------------------------------------------------------------------
   11. Cartes
   -------------------------------------------------------------------------- */

.carte {
  display: flex;
  flex-direction: column;
  background-color: var(--creme);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-carte);
  overflow: hidden;
  height: 100%;
}

.section--lin .carte {
  background-color: var(--creme);
}

.carte__media {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  background-color: var(--jute);
}

.carte__corps {
  padding: var(--e5);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.carte__titre {
  font-size: var(--t-h3);
  margin-bottom: var(--e3);
}

.carte__texte {
  font-size: var(--t-petit);
  line-height: 1.65;
  color: var(--brun-attenue);
  margin: 0;
}

.carte__corps > :last-child {
  margin-bottom: 0;
}

/* Image en bandeau, pour ouvrir une section */
.bandeau {
  margin: 0 0 var(--e7);
  border-radius: var(--rayon-carte);
  overflow: hidden;
}

.bandeau__image {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  background-color: var(--jute);
}

/* Variante pour une photo verticale : un bandeau pleine largeur en couperait
   les trois quarts. L'image reste portrait, centree, a largeur mesuree. */
.bandeau--portrait {
  max-width: 32rem;
  margin-inline: auto;
}

.bandeau--portrait .bandeau__image {
  aspect-ratio: 3 / 4;
}

/* Photo verticale posee en colonne a cote d'un texte : le ratio 4/5 la borne
   sans la coucher, et l'arrondi la raccorde aux cartes. */
.visuel-arrondi {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--rayon-carte);
  background-color: var(--jute);
}

/* Bloc simple sans cadre, pour les listes d'options */
.bloc {
  padding-top: var(--e5);
  border-top: 1px solid var(--filet);
}

.bloc__titre {
  font-family: var(--serif);
  font-size: var(--t-h3);
  font-weight: 600;
  margin: 0 0 var(--e3);
}

.bloc > p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   12. Étapes numérotées
   -------------------------------------------------------------------------- */

.etapes {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: etape;
}

.etape {
  margin: 0 0 var(--e7);
  padding-left: 0;
}

.etape:last-child {
  margin-bottom: 0;
}

.etape__titre {
  display: flex;
  align-items: baseline;
  gap: var(--e4);
  margin-bottom: var(--e4);
}

.etape__numero {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 400;
  color: var(--accent-fonce);
  line-height: 1;
  flex-shrink: 0;
  min-width: 1.6em;
}

.etape__corps {
  max-width: var(--mesure);
}

.etape__corps > :last-child {
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .etape {
    display: grid;
    grid-template-columns: 4rem 1fr;
    gap: var(--e6);
    align-items: start;
  }

  .etape__titre {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
  }

  .etape__numero {
    min-width: 0;
  }

  .etape__corps {
    grid-column: 2;
  }
}

/* --------------------------------------------------------------------------
   13. Tableau des formules
   -------------------------------------------------------------------------- */

.tableau-enveloppe {
  overflow-x: auto;
  margin-bottom: var(--e6);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-carte);
  background-color: var(--creme);
}

.tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-petit);
  min-width: 34rem;
}

.tableau th,
.tableau td {
  text-align: left;
  padding: var(--e4) var(--e5);
  border-bottom: 1px solid var(--filet);
  vertical-align: top;
  line-height: 1.6;
}

.tableau thead th {
  font-family: var(--sans);
  font-size: var(--t-surtitre);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-fonce);
  background-color: var(--lin);
}

.tableau tbody th {
  font-family: var(--serif);
  font-size: 1.1875rem;
  font-weight: 600;
  white-space: nowrap;
}

.tableau tbody tr:last-child th,
.tableau tbody tr:last-child td {
  border-bottom: 0;
}

/* Sous 640 px, le tableau se lit mal en défilant : chaque formule devient un bloc.
   L'en-tête de colonnes n'a plus de sens dans cette forme, il reste pour les
   lecteurs d'écran. */
@media (max-width: 639px) {
  .tableau-enveloppe {
    overflow-x: visible;
  }

  .tableau {
    min-width: 0;
  }

  .tableau thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tableau tbody tr {
    display: block;
    border-bottom: 1px solid var(--filet);
  }

  .tableau tbody tr:last-child {
    border-bottom: 0;
  }

  .tableau tbody th,
  .tableau tbody td {
    display: block;
    border-bottom: 0;
    white-space: normal;
  }

  .tableau tbody th {
    padding-bottom: var(--e2);
  }

  .tableau tbody td {
    padding-top: 0;
  }
}

/* --------------------------------------------------------------------------
   14. Avis
   -------------------------------------------------------------------------- */

.avis-carte {
  background-color: var(--creme);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-carte);
  padding: var(--e6);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.avis-carte__titre {
  font-size: var(--t-h3);
  margin-bottom: var(--e4);
}

.avis-carte__texte {
  font-size: var(--t-petit);
  line-height: 1.7;
  color: var(--brun-attenue);
  margin: 0 0 var(--e5);
  flex-grow: 1;
}

.avis-carte__signature {
  font-style: normal;
  font-size: var(--t-petit);
  color: var(--brun);
  font-weight: 500;
  display: block;
  margin-bottom: var(--e1);
}

.avis-carte__source {
  font-size: 0.8125rem;
  color: var(--brun-attenue);
  margin: 0;
}

.avis-carte__mention {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-fonce);
  border: 1px solid var(--jute);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  margin-bottom: var(--e4);
}

/* Bandeau de note */
.note-bandeau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e4);
  padding: var(--e5);
  background-color: var(--lin);
  background-image: var(--texture-jute);
  border-radius: var(--rayon-carte);
  margin-bottom: var(--e7);
}

.note-bandeau__valeur {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--brun);
}

.note-bandeau__texte {
  margin: 0;
  font-size: var(--t-petit);
}

/* Défilement horizontal des avis sur l'accueil */
.avis-defile {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(21rem, 82vw), 1fr);
  gap: var(--e5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--e4);
  margin-inline: calc(var(--gouttiere) * -1);
  padding-inline: var(--gouttiere);
  scrollbar-width: thin;
}

.avis-defile > * {
  scroll-snap-align: start;
}

@media (min-width: 900px) {
  .avis-defile {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
}

/* --------------------------------------------------------------------------
   15. Accordéon FAQ
   -------------------------------------------------------------------------- */

.faq {
  max-width: var(--mesure);
  border-top: 1px solid var(--filet);
}

.faq--large {
  max-width: none;
}

.faq__element {
  border-bottom: 1px solid var(--filet);
}

.faq__bouton {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e4);
  width: 100%;
  padding: var(--e5) 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--serif);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.25;
  color: var(--brun);
}

.faq__bouton:hover {
  color: var(--accent-fonce);
}

.faq__signe {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  position: relative;
  margin-top: 0.4em;
}

.faq__signe::before,
.faq__signe::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background-color: var(--accent-fonce);
  transition: transform var(--transition);
}

.faq__signe::after {
  transform: rotate(90deg);
}

.faq__bouton[aria-expanded='true'] .faq__signe::after {
  transform: rotate(0deg);
}

.faq__panneau {
  padding-bottom: var(--e5);
  max-width: var(--mesure);
}

.faq__panneau[hidden] {
  display: none;
}

.faq__panneau > :last-child {
  margin-bottom: 0;
}

.faq__panneau p {
  font-size: var(--t-petit);
  line-height: 1.7;
  color: var(--brun-attenue);
}

/* --------------------------------------------------------------------------
   16. Galerie et lightbox
   -------------------------------------------------------------------------- */

.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-bottom: var(--e6);
  padding: 0;
  list-style: none;
}

.filtres li {
  margin: 0;
}

.filtre {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.625rem 1.125rem;
  min-height: 44px;
  background: transparent;
  border: 1px solid var(--filet);
  border-radius: 999px;
  color: var(--brun-attenue);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
    border-color var(--transition);
}

.filtre:hover {
  border-color: var(--accent-fonce);
  color: var(--accent-fonce);
}

.filtre[aria-pressed='true'] {
  background-color: var(--brun);
  border-color: var(--brun);
  color: var(--creme);
}

.mosaique {
  display: grid;
  grid-auto-flow: dense;
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e3);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .mosaique { grid-template-columns: repeat(3, 1fr); gap: var(--e4); }
}

.mosaique li {
  margin: 0;
}

.mosaique__element {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--jute);
  border-radius: var(--rayon-carte);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1 / 1;
}

.mosaique li:has(.mosaique__element--large) {
  grid-column: span 2;
  grid-row: span 2;
}

.mosaique__element--large {
  aspect-ratio: auto;
  height: 100%;
}

.mosaique__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.mosaique__element:hover .mosaique__image {
  transform: scale(1.03);
}

.mosaique__lecture {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 19, 16, 0.32);
  color: var(--creme);
}

.mosaique__lecture svg {
  width: 44px;
  height: 44px;
  fill: currentColor;
}

.mosaique__legende {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--e4);
  font-size: 0.8125rem;
  color: var(--creme);
  background: linear-gradient(to top, rgba(26, 19, 16, 0.85), transparent);
  text-align: left;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gouttiere);
  background: rgba(26, 19, 16, 0.94);
}

.lightbox[hidden] {
  display: none;
}

.lightbox__contenu {
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}

.lightbox__media {
  max-height: 78vh;
  max-height: 78svh;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  border-radius: var(--rayon-carte);
}

.lightbox__legende {
  color: var(--creme-attenue);
  font-size: var(--t-petit);
  text-align: center;
  margin: 0;
}

.lightbox__fermer {
  position: absolute;
  top: var(--gouttiere);
  right: var(--gouttiere);
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  background: transparent;
  border: 1px solid var(--filet-clair);
  border-radius: var(--rayon);
  color: var(--creme);
  cursor: pointer;
}

.lightbox__fermer:hover {
  background: var(--creme);
  color: var(--brun);
}

/* Aplat de remplacement, en attendant les vrais médias */
.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--jute);
  background-image: var(--texture-jute);
  color: var(--accent-fonce);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--e5);
}

/* --------------------------------------------------------------------------
   17. Formulaire
   -------------------------------------------------------------------------- */

.formulaire {
  display: grid;
  gap: var(--e5);
}

.champ {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}

.champ__label {
  font-size: var(--t-petit);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--brun);
}

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

.champ__aide {
  font-size: 0.8125rem;
  color: var(--brun-attenue);
  margin: 0;
}

.champ input[type='text'],
.champ input[type='email'],
.champ input[type='tel'],
.champ input[type='date'],
.champ select,
.champ textarea {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--brun);
  background-color: var(--creme);
  border: 1px solid var(--filet-champ);
  border-radius: var(--rayon);
  padding: 0.8125rem var(--e4);
  min-height: 48px;
  width: 100%;
  transition: border-color var(--transition);
  appearance: none;
}

.champ textarea {
  min-height: 9rem;
  resize: vertical;
}

.champ select {
  background-image: linear-gradient(45deg, transparent 50%, var(--accent-fonce) 50%),
    linear-gradient(135deg, var(--accent-fonce) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}

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

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  border-color: var(--accent-fonce);
  box-shadow: inset 0 0 0 1px var(--accent-fonce);
}

.champ input:user-invalid,
.champ textarea:user-invalid {
  border-color: #9a3b26;
}

.champ-groupe {
  border: 0;
  margin: 0;
  padding: 0;
}

.champ-groupe__legende {
  font-size: var(--t-petit);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--brun);
  padding: 0;
  margin-bottom: var(--e3);
}

.cases {
  display: grid;
  gap: var(--e3);
}

@media (min-width: 640px) {
  .cases--2 { grid-template-columns: repeat(2, 1fr); }
}

.case {
  display: flex;
  align-items: center;
  gap: var(--e3);
  font-size: var(--t-petit);
  line-height: 1.5;
  cursor: pointer;
  /* Zone tactile confortable au doigt : le libellé fait partie de la cible */
  min-height: 44px;
  padding-block: var(--e1);
}

.case input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--accent-fonce);
  cursor: pointer;
}

/* Le contour par défaut d'une case non cochée est souvent trop pâle :
   on le remplace par une bordure mesurée, comme pour les champs de saisie. */
@supports (appearance: none) {
  .case input[type='checkbox'] {
    appearance: none;
    border: 1px solid var(--filet-champ);
    border-radius: var(--rayon);
    background-color: var(--creme);
    display: grid;
    place-content: center;
  }

  .case input[type='checkbox']::before {
    content: '';
    width: 10px;
    height: 10px;
    transform: scale(0);
    transition: transform 120ms ease-in-out;
    box-shadow: inset 1em 1em var(--creme);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  }

  .case input[type='checkbox']:checked {
    background-color: var(--accent-fonce);
    border-color: var(--accent-fonce);
  }

  .case input[type='checkbox']:checked::before {
    transform: scale(1);
  }
}

.case--consentement {
  align-items: flex-start;
  padding-block: var(--e4);
  padding: var(--e4);
  background-color: var(--lin);
  border-radius: var(--rayon-carte);
}

/* Champ piège : masqué sans display:none, invisible et hors du flux */
.piege {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.message-erreur {
  padding: var(--e4) var(--e5);
  border: 1px solid #9a3b26;
  border-left-width: 3px;
  border-radius: var(--rayon);
  background-color: #fbeeea;
  color: #7a2e1e;
  font-size: var(--t-petit);
  line-height: 1.6;
}

.message-erreur[hidden] {
  display: none;
}

.message-erreur > :last-child {
  margin-bottom: 0;
}

.message-erreur a {
  color: #7a2e1e;
}

.bouton[disabled],
.bouton[aria-disabled='true'] {
  opacity: 0.6;
  cursor: progress;
}

/* Portrait, en tete de la colonne de droite de la page contact. Le fichier est
   carre, le ratio 1/1 evite donc tout recadrage. */
.portrait {
  margin: 0 0 var(--e6);
}

.portrait__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--rayon-carte);
  background-color: var(--jute);
}

.portrait__legende {
  margin: var(--e3) 0 0;
  font-size: var(--t-petit);
  line-height: 1.6;
  color: var(--brun-attenue);
}

/* Colonne de contacts directs */
@media (min-width: 900px) {
  /* Le bloc suit la lecture du formulaire, qui est bien plus haut que lui. */
  .contacts-directs {
    position: sticky;
    top: calc(var(--h-header) + var(--e5));
  }
}

.contacts-directs {
  background-color: var(--lin);
  background-image: var(--texture-jute);
  border-radius: var(--rayon-carte);
  padding: var(--e6);
}

.contacts-directs__titre {
  font-size: var(--t-h3);
  margin-bottom: var(--e5);
}

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

.contacts-directs__liste li {
  margin: 0 0 var(--e5);
  padding-bottom: var(--e5);
  border-bottom: 1px solid var(--filet);
}

.contacts-directs__liste li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.contacts-directs__etiquette {
  display: block;
  font-size: var(--t-surtitre);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-fonce);
  margin-bottom: var(--e1);
}

.contacts-directs__valeur {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--brun);
  text-decoration: none;
  word-break: break-word;
}

.contacts-directs__valeur:hover {
  color: var(--accent-fonce);
}

.contacts-directs__note {
  font-size: var(--t-petit);
  line-height: 1.6;
  color: var(--brun-attenue);
  margin: var(--e1) 0 0;
}

.bloc-noscript {
  border: 1px solid var(--jute);
  border-radius: var(--rayon-carte);
  padding: var(--e5);
  margin-bottom: var(--e6);
  background-color: var(--lin);
}

.bloc-noscript > :last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   18. Fil d'Ariane
   -------------------------------------------------------------------------- */

.ariane {
  padding-block: var(--e5) 0;
  font-size: 0.8125rem;
  color: var(--brun-attenue);
}

.ariane__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ariane__liste li {
  margin: 0;
}

.ariane__liste li + li::before {
  content: '·';
  margin-right: var(--e2);
  color: var(--jute);
}

.ariane a {
  color: var(--brun-attenue);
}

.ariane a:hover {
  color: var(--accent-fonce);
}

/* --------------------------------------------------------------------------
   19. Appel à l'action de bas de page
   -------------------------------------------------------------------------- */

.cta-pied {
  background-color: var(--sombre);
  color: var(--creme-attenue);
  text-align: center;
  padding-block: var(--section-y);
}

.cta-pied h2 {
  color: var(--creme);
  font-weight: 400;
  max-width: 20ch;
  margin-inline: auto;
}

.cta-pied__texte {
  max-width: 44ch;
  margin-inline: auto;
  margin-bottom: var(--e6);
  color: var(--creme-attenue);
}

/* --------------------------------------------------------------------------
   20. Pied de page
   -------------------------------------------------------------------------- */

.pied {
  background-color: var(--brun);
  color: var(--creme-attenue);
  padding-block: var(--e8) var(--e6);
  font-size: var(--t-petit);
}

.pied a {
  color: var(--creme-attenue);
}

.pied a:hover {
  color: var(--dore);
}

.pied__grille {
  display: grid;
  gap: var(--e7);
  margin-bottom: var(--e7);
}

@media (min-width: 900px) {
  .pied__grille {
    grid-template-columns: 1.3fr 1fr 1.4fr;
    gap: var(--e8);
  }
}

.pied__logotype {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--creme);
  text-decoration: none;
  display: inline-block;
  margin-bottom: var(--e4);
}

.pied__logotype:hover {
  color: var(--dore);
}

.pied__titre {
  font-family: var(--sans);
  font-size: var(--t-surtitre);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dore);
  margin: 0 0 var(--e4);
}

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

.pied__liste li {
  margin-bottom: var(--e3);
}

.pied__texte {
  line-height: 1.7;
  margin: 0 0 var(--e4);
}

.pied__texte:last-child {
  margin-bottom: 0;
}

.pied__reseaux {
  display: flex;
  gap: var(--e4);
  list-style: none;
  margin: var(--e5) 0 0;
  padding: 0;
}

.pied__reseaux li {
  margin: 0;
}

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2) var(--e5);
  padding-top: var(--e5);
  border-top: 1px solid var(--filet-clair);
  font-size: 0.8125rem;
}

.pied__bas p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   21. Animations d'apparition
   -------------------------------------------------------------------------- */

.apparition {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 640ms ease, transform 640ms ease;
  will-change: opacity, transform;
}

.apparition.est-visible {
  opacity: 1;
  transform: none;
}

/* Sans JavaScript, rien ne doit rester invisible : chaque page porte un
   <noscript><style> qui remet .apparition en pleine opacité. Le script fait
   de même si IntersectionObserver n'est pas disponible. */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .apparition {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   22. Utilitaires
   -------------------------------------------------------------------------- */

.centre { text-align: center; }
.sans-marge-bas { margin-bottom: 0; }
.marge-haut { margin-top: var(--e6); }
.marge-haut-large { margin-top: var(--e7); }

/* --------------------------------------------------------------------------
   23. Impression
   -------------------------------------------------------------------------- */

@media print {
  .entete,
  .barre-mobile,
  .menu-mobile,
  .cta-pied,
  .lightbox {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    padding-bottom: 0;
  }

  .apparition {
    opacity: 1;
    transform: none;
  }
}