/* ==========================================================================
   ATELIER TRONC & FIL — FEUILLE DE STYLE COMMUNE (FC WEB DESIGN)
   Aperçus des forfaits : Essentiel, Professionnel, Sur mesure
   100 % CSS natif, polices système, sans ressource externe
   ========================================================================== */

:root {
  /* Palette de couleurs Atelier Tronc & Fil (ébénisterie d'art) */
  --fond: #faf6f0;           /* Lin chaud / écru */
  --fond-carte: #ffffff;     /* Blanc pur pour cartes */
  --fond-doux: #f3ece3;      /* Bois clair poncé pour bandeaux */
  --fond-encadre: #eedecf;   /* Accent très doux */
  
  --texte: #241b14;          /* Brun noyer profond (contraste 14.2:1 sur fond) */
  --texte-doux: #6b5646;     /* Terre de sienne ombrée (contraste 5.4:1 sur fond) */
  --texte-clair: #ffffff;    /* Blanc pour texte sur bouton accent */

  --accent: #a8542b;         /* Bois ciré / terre cuite (contraste 4.7:1 avec blanc) */
  --accent-survol: #873f1b;  /* Accent renforcé au survol */
  --accent-pale: #f7ebe1;    /* Fond pastille accent */

  --trait: #dfd2c4;          /* Filet séparateur */
  --trait-doux: #ece2d7;

  /* Typographie */
  --police-titres: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --police-texte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* Espacements normalisés (Cahier de design A1) */
  --esp-4: 4px;
  --esp-8: 8px;
  --esp-16: 16px;
  --esp-24: 24px;
  --esp-40: 40px;
  --esp-64: 64px;
  --esp-96: 96px;

  /* Largeurs */
  --largeur-max: 1140px;
  --rayon-carte: 16px;
  --rayon-bouton: 8px;
}

/* Réinitialisation propre */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 17px;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--police-texte);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--texte);
  background-color: var(--fond);
}

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

/* --------------------------------------------------------------------------
   BARRE SUPÉRIEURE D'APERÇU FC WEB DESIGN (Discrète, 38px, texte >= 14px)
   -------------------------------------------------------------------------- */
.apex-bar {
  background-color: #241b14;
  color: #f3ece3;
  font-size: 0.88rem; /* 15px */
  padding: 8px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 50;
}

.apex-bar strong {
  color: #ffffff;
  font-weight: 600;
}

.apex-bar a {
  color: #eedecf;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}

.apex-bar a:hover,
.apex-bar a:focus-visible {
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   EN-TÊTE DU SITE CLIENT
   -------------------------------------------------------------------------- */
.site-header {
  background-color: #ffffff;
  border-bottom: 1px solid var(--trait);
  padding: 16px 0;
}

.conteneur {
  width: min(var(--largeur-max), calc(100% - 32px));
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .conteneur {
    width: min(var(--largeur-max), calc(100% - 48px));
  }
}

.header-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.marque {
  text-decoration: none;
  color: var(--texte);
  display: flex;
  flex-direction: column;
}

.marque-titre {
  font-family: var(--police-titres);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--texte);
  display: flex;
  align-items: center;
  gap: 8px;
}

.marque-sous-titre {
  font-size: 0.94rem;
  color: var(--texte-doux);
}

.badge-demo {
  display: inline-block;
  background-color: var(--fond-encadre);
  color: #5d3319;
  font-size: 0.85rem;
  font-family: var(--police-texte);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 4px;
}

/* Navigation principale (forfait Pro et Sur mesure) */
.nav-principale {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.nav-lien {
  color: var(--texte);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: 550;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-lien:hover,
.nav-lien:focus-visible {
  background-color: var(--fond-doux);
  color: var(--accent);
}

.nav-lien.actif {
  background-color: var(--fond-doux);
  color: var(--accent);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   TYPOGRAPHIE & HIÉRARCHIE
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--police-titres);
  color: var(--texte);
  line-height: 1.2;
  margin-top: 0;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  letter-spacing: -0.015em;
  margin-bottom: var(--esp-16);
}

h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.3rem);
  letter-spacing: -0.01em;
  margin-bottom: var(--esp-16);
}

h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.6rem);
  margin-bottom: var(--esp-8);
}

p {
  margin-top: 0;
  margin-bottom: var(--esp-16);
  max-width: 66ch; /* 60 à 70 caractères recommandés */
}

.chapeau {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--texte-doux);
  margin-bottom: var(--esp-24);
}

.surtitre {
  font-family: var(--police-texte);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: var(--esp-8);
  display: block;
}

/* --------------------------------------------------------------------------
   BOUTONS & INTERACTIONS (au moins 44px de haut, focus visible)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 22px;
  border-radius: var(--rayon-bouton);
  font-family: var(--police-texte);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-plein {
  background-color: var(--accent);
  color: var(--texte-clair);
}

.btn-plein:hover,
.btn-plein:focus-visible {
  background-color: var(--accent-survol);
}

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

.btn-contour:hover,
.btn-contour:focus-visible {
  background-color: var(--accent-pale);
  border-color: var(--accent-survol);
  color: var(--accent-survol);
}

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: no-preference) {
  .btn:hover {
    transform: translateY(-2px);
  }
}

.rangee-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  margin-top: var(--esp-24);
}

/* --------------------------------------------------------------------------
   SECTIONS & RYTHME (Cahier A1 : 64-96px ordi, 40-56px cellulaire)
   -------------------------------------------------------------------------- */
.section {
  padding-top: clamp(40px, 6vw, 80px);
  padding-bottom: clamp(40px, 6vw, 80px);
}

.section-fond-doux {
  background-color: var(--fond-doux);
  border-top: 1px solid var(--trait-doux);
  border-bottom: 1px solid var(--trait-doux);
}

.section-tete {
  max-width: 68ch;
  margin-bottom: clamp(24px, 4vw, 44px);
}

.section-tete.centree {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* --------------------------------------------------------------------------
   HERO / BANDEAU D'ACCUEIL (Contrainte originale : grande photo plein écran)
   -------------------------------------------------------------------------- */
.hero-atelier {
  position: relative;
  background-color: #241b14;
  color: #ffffff;
  overflow: hidden;
  min-height: min(78vh, 680px);
  display: flex;
  align-items: center;
}

.hero-fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
  filter: saturate(1.1);
}

.hero-contenu {
  position: relative;
  z-index: 2;
  padding-top: clamp(48px, 8vw, 96px);
  padding-bottom: clamp(48px, 8vw, 96px);
  max-width: 58ch;
}

.hero-contenu h1 {
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.hero-contenu .chapeau {
  color: #f3ece3;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.hero-preuves {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: var(--esp-40);
  padding-top: var(--esp-24);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.94rem;
  color: #f3ece3;
}

.hero-preuve-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-preuve-point {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #e0976a;
}

/* --------------------------------------------------------------------------
   GRILLES ET CARTES (Cahier A1 & Catalogue GPT fx-carte-leve)
   -------------------------------------------------------------------------- */
.grille-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

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

@media (min-width: 860px) {
  .grille-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grille-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

.carte {
  background-color: var(--fond-carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-carte);
  padding: clamp(20px, 3vw, 28px);
  display: flex;
  flex-direction: column;
  position: relative;
}

.carte-image {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: var(--esp-16);
  aspect-ratio: 4 / 3;
  background-color: var(--fond-doux);
}

.carte-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carte-corps {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.carte-etiquette {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: var(--esp-8);
}

.carte-titre {
  font-size: 1.35rem;
  margin-bottom: var(--esp-8);
}

.carte-texte {
  color: var(--texte-doux);
  font-size: 0.98rem;
  flex: 1;
}

/* --------------------------------------------------------------------------
   DÉMARCHE / BÉNÉFICES (3 principes de qualité)
   -------------------------------------------------------------------------- */
.liste-benefices {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .liste-benefices {
    grid-template-columns: repeat(3, 1fr);
  }
}

.benefice-item {
  background: var(--fond-carte);
  border: 1px solid var(--trait);
  border-radius: 12px;
  padding: 24px;
}

.benefice-numero {
  font-family: var(--police-titres);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   ACCORDÉON QUESTIONS / FAQ (Natif accessible sans JS)
   -------------------------------------------------------------------------- */
.faq-groupe {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid var(--trait);
}

.faq-item {
  border-bottom: 1px solid var(--trait);
  padding: 18px 0;
}

.faq-item summary {
  font-family: var(--police-titres);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--texte);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 4px 0;
  min-height: 44px;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-family: var(--police-texte);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--accent);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-reponse {
  padding-top: 12px;
  color: var(--texte-doux);
  font-size: 1rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   BLOC CONTACT / NOUS ÉCRIRE (Essentiel : bouton mailto + repli)
   -------------------------------------------------------------------------- */
.bloc-contact-artisan {
  background-color: #ffffff;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-carte);
  padding: clamp(24px, 5vw, 48px);
  text-align: center;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 4px 20px rgba(36, 27, 20, 0.05);
}

.contact-repli {
  margin-top: 16px;
  font-size: 0.94rem;
  color: var(--texte-doux);
  background-color: var(--fond-doux);
  padding: 12px 18px;
  border-radius: 8px;
  display: inline-block;
  word-break: break-all;
}

.contact-repli strong {
  color: var(--texte);
}

.contact-coords {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 32px;
  margin-top: 24px;
  font-size: 0.96rem;
  color: var(--texte-doux);
}

.contact-coords a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.reseaux-sociaux {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}

.reseau-lien {
  color: var(--texte-doux);
  text-decoration: none;
  font-weight: 550;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  background-color: var(--fond);
}

.reseau-lien:hover,
.reseau-lien:focus-visible {
  color: var(--accent);
  background-color: var(--fond-doux);
}

/* --------------------------------------------------------------------------
   CARTE GOOGLE MAPS STYLISÉE (SVG pur, aucune ressource externe)
   -------------------------------------------------------------------------- */
.carte-svg-cadre {
  border: 1px solid var(--trait);
  border-radius: var(--rayon-carte);
  overflow: hidden;
  background-color: #f7f3ee;
  position: relative;
}

.carte-svg-mention {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.94);
  color: #241b14;
  font-size: 0.85rem;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--trait);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* --------------------------------------------------------------------------
   MODULES INTERACTIFS DU FORFAIT SUR MESURE
   -------------------------------------------------------------------------- */
.pastille-sur-mesure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #fbf1e8;
  color: #8c421e;
  border: 1px solid #ebd3c2;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 12px;
}

.grille-creneaux {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.creneau-btn {
  background-color: var(--fond);
  border: 1px solid var(--trait);
  border-radius: 8px;
  padding: 10px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--texte);
  cursor: pointer;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.creneau-btn.occupe {
  background-color: #efeae4;
  color: #9c8e82;
  cursor: not-allowed;
  text-decoration: line-through;
}

.creneau-btn.dispo:hover,
.creneau-btn.dispo:focus-visible {
  border-color: var(--accent);
  background-color: var(--accent-pale);
  color: var(--accent-survol);
}

.creneau-btn.choisi {
  border-color: var(--accent);
  background-color: var(--accent);
  color: #ffffff;
}

.espace-client-cadre {
  background-color: #ffffff;
  border: 1px solid var(--trait);
  border-radius: 12px;
  padding: 24px;
}

.etapes-suivi {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 18px 0;
}

.etape-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.etape-pastille {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.etape-terminee {
  background-color: #e5f3ea;
  color: #1f6b39;
  border: 1px solid #c2e2cc;
}

.etape-en-cours {
  background-color: var(--accent-pale);
  color: var(--accent-survol);
  border: 1px solid var(--accent);
}

.etape-a-venir {
  background-color: var(--fond-doux);
  color: var(--texte-doux);
  border: 1px solid var(--trait);
}

/* --------------------------------------------------------------------------
   ENCADRÉ EXPLICATIF EN BAS DE PAGE (« Ce que montre cet aperçu »)
   Exigence formelle de la mission et de tarifs.html
   -------------------------------------------------------------------------- */
.boite-forfait-fc {
  margin-top: clamp(48px, 8vw, 80px);
  background-color: #ffffff;
  border: 2px solid var(--trait);
  border-left: 6px solid var(--accent);
  border-radius: 12px;
  padding: clamp(24px, 4vw, 36px);
  box-shadow: 0 6px 24px rgba(36, 27, 20, 0.06);
}

.boite-forfait-fc h3 {
  font-size: 1.35rem;
  margin-bottom: 12px;
  color: var(--texte);
}

.boite-forfait-fc p {
  color: var(--texte-doux);
  margin-bottom: 16px;
}

.liste-forfait-puces {
  margin: 16px 0 20px;
  padding-left: 20px;
  color: var(--texte);
}

.liste-forfait-puces li {
  margin-bottom: 8px;
  line-height: 1.5;
}

.boite-options {
  background-color: var(--fond-doux);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 20px 0;
  font-size: 0.95rem;
}

.boite-options strong {
  color: var(--texte);
  display: block;
  margin-bottom: 6px;
}

.liens-croises-forfaits {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--trait);
}

.liens-croises-forfaits a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   PIED DE PAGE (Minimal et sobre)
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--texte);
  color: #dfd2c4;
  padding: 32px 0;
  font-size: 0.92rem;
  border-top: 1px solid #3d2a1c;
}

.footer-ligne {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.footer-ligne a {
  color: #eedecf;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-ligne a:hover,
.footer-ligne a:focus-visible {
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   ADAPTABILITÉ CELLULAIRE STRICTE (320px et 375px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  html {
    font-size: 16px; /* Taille minimale stricte */
  }
  .header-ligne {
    flex-direction: column;
    align-items: flex-start;
  }
  .rangee-boutons {
    flex-direction: column;
    align-items: stretch;
  }
  .rangee-boutons .btn {
    width: 100%;
  }
  .apex-bar {
    font-size: 0.85rem;
    padding: 8px 12px;
  }
  .carte {
    padding: 18px 16px;
  }
}

/* Ajouts 2026-10-26 : bouton lisible dans l'encadré des forfaits ; petits textes à 16 px */
.liens-croises-forfaits a.btn-plein{color:#fff;text-decoration:none}
.apex-bar,.badge-demo,.marque-sous-titre,.surtitre,.hero-preuves,.carte-etiquette,.carte-texte,.contact-repli,.contact-coords,.carte-svg-mention,.pastille-sur-mesure,.creneau-btn,.etape-pastille,.boite-options,.site-footer{font-size:16px}
.carte-svg-cadre svg text{font-size:16px}

/* Sélecteur de langue FR | EN dans l'en-tête (ajouté 2026-10-26) */
.header-action { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: wrap; }
.header-action nav[aria-label="Langue"],
.header-action nav[aria-label="Language"] { font-size: 1rem; white-space: nowrap; color: var(--texte-doux); }
.header-action nav a { color: var(--accent); font-weight: 600; text-underline-offset: 3px; }
.header-action nav [aria-current] { color: var(--texte); font-weight: 700; }

/* Formulaire de démonstration (aperçu Professionnel) */
.form-demo { display: grid; gap: 14px; margin: 0 0 24px; }
.form-demo label { display: grid; gap: 6px; font-weight: 600; color: var(--texte); }
.form-demo input, .form-demo textarea { font: inherit; min-height: 44px; padding: 12px 14px; border: 1px solid var(--trait); border-radius: 10px; background: #fff; color: var(--texte); }
.form-demo input:focus-visible, .form-demo textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.form-demo .btn { justify-self: start; border: 0; cursor: pointer; }
.form-note { margin: 0; font-size: 1rem; color: var(--texte-doux); }