/* ============================= */
/* RESET & BASE */
/* ============================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bleu-marine: #1F4E78;
  --bleu-marine-fonce: #153552;
  --dore: #C69A2E;
  --dore-texte: #8A6A1C;
  --creme: #FAF7F1;
  --bleu-clair: #EAF1F8;
  --texte: #2B2B2B;
  --texte-clair: #6B6B6B;
}

html {
  background-color: var(--bleu-marine-fonce);
  height: 100%;
}

body {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--texte);
  background-color: var(--creme);
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

.footer {
  flex-shrink: 0;
}

h1, h2, h3 {
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--bleu-marine-fonce);
  line-height: 1.25;
}

em {
  color: var(--dore);
  font-style: normal;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--dore-texte);
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* boutons */
.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 15px;
  transition: opacity 0.2s ease;
}

.button:hover {
  opacity: 0.85;
}

.button-primary {
  background-color: var(--dore);
  color: var(--bleu-marine-fonce);
}

.button-secondary {
  background-color: transparent;
  color: var(--bleu-marine-fonce);
  border: 2px solid var(--bleu-marine-fonce);
}

.button-dark {
  background-color: var(--bleu-marine-fonce);
  color: white;
}

.button-light {
  background-color: white;
  color: var(--bleu-marine-fonce);
}

.text-button {
  color: var(--bleu-marine-fonce);
  font-weight: 600;
  border-bottom: 2px solid var(--dore);
  padding-bottom: 2px;
}

.photo-placeholder {
  background-color: var(--bleu-clair);
  border: 2px dashed var(--bleu-marine);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bleu-marine);
  font-weight: 700;
  letter-spacing: 1px;
  min-height: 280px;
}

/* ============================= */
/* HEADER */
/* ============================= */

.header {
  background-color: var(--bleu-marine-fonce);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 40px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.logo strong {
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 19px;
}

.logo span {
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 19px;
  color: var(--dore);
}

.logo small {
  font-size: 13px;
  color: #C9D6E4;
  margin-top: 2px;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: white;
  font-size: 26px;
  cursor: pointer;
}

.navigation {
  display: flex;
  align-items: center;
  gap: 28px;
}

.navigation a {
  font-size: 15px;
  font-weight: 600;
}

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

.nav-button {
  background-color: var(--dore);
  padding: 10px 20px;
  border-radius: 4px;
}

/* ============================= */
/* HERO */
/* ============================= */

.hero {
  display: flex;
  align-items: center;
  gap: 60px;
  padding: 80px 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-content {
  flex: 1;
}

.hero h1 {
  font-size: 44px;
  margin-bottom: 20px;
}

.hero-text {
  font-size: 18px;
  color: var(--texte-clair);
  margin-bottom: 30px;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-visual {
  flex: 1;
  position: relative;
}

.hero-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bleu-marine), var(--bleu-marine-fonce));
  min-height: 100%;
}
.hero-photo-placeholder span {
  font-family: 'Georgia', serif;
  font-size: 48px;
  font-weight: 700;
  color: var(--dore);
  letter-spacing: 0.08em;
}
.about-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bleu-clair);
  min-height: 320px;
  border-radius: inherit;
}
.about-photo-placeholder span {
  color: var(--bleu-marine-fonce);
  font-weight: 600;
  text-align: center;
  font-size: 15px;
  opacity: 0.6;
}

.tatiana-photo {
  object-position: center 12% !important;
}

.hero-photo img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  object-position: center 45%;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(21, 53, 82, 0.15);
}

.floating-card {
  position: absolute;
  bottom: -20px;
  left: -20px;
  background: white;
  padding: 18px 22px;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(21, 53, 82, 0.15);
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 220px;
}

.floating-icon {
  color: var(--dore);
  font-size: 20px;
}

.floating-card strong {
  font-size: 14px;
  color: var(--bleu-marine-fonce);
}

.floating-card small {
  font-size: 13px;
  color: var(--texte-clair);
}

/* ============================= */
/* BANDEAU INFOS */
/* ============================= */

.info-strip {
  background-color: var(--bleu-clair);
  display: flex;
  justify-content: center;
  gap: 60px;
  padding: 24px 20px;
  flex-wrap: wrap;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--bleu-marine-fonce);
}

.info-icon {
  font-size: 18px;
}

/* ============================= */
/* SECTIONS GENERIQUES */
/* ============================= */

section {
  padding: 90px 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.section-heading, .method-heading {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 50px;
}

.section-heading h2, .method-heading h2 {
  font-size: 34px;
}

/* ============================= */
/* A PROPOS */
/* ============================= */

.about-section {
  display: flex;
  align-items: center;
  gap: 60px;
}

.about-photo {
  flex: 1;
}

.about-photo img {
  width: 100%;
  height: 540px;
  object-fit: cover;
  object-position: center 45%;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(21, 53, 82, 0.12);
}

.about-content {
  flex: 1;
}

.about-content h2 {
  font-size: 32px;
  margin-bottom: 20px;
}

.about-content p {
  color: var(--texte-clair);
  margin-bottom: 16px;
}

/* ============================= */
/* SERVICES */
/* ============================= */

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.service-card {
  background: white;
  padding: 36px 28px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(21, 53, 82, 0.06);
  position: relative;
}

.service-number {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 13px;
  color: var(--bleu-clair);
  font-weight: 700;
}

.service-icon {
  font-size: 28px;
  color: var(--dore);
  margin-bottom: 16px;
}

.service-card h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.service-card p {
  color: var(--texte-clair);
  font-size: 15px;
  margin-bottom: 18px;
}

.service-card a {
  font-weight: 700;
  color: var(--bleu-marine-fonce);
  font-size: 14px;
}

/* ============================= */
/* PROJETS */
/* ============================= */

.projects-section {
  padding: 100px 7%;
  max-width: none;
  background: var(--bleu-clair);
}

.projects-introduction {
  max-width: 1200px;
  margin: 0 auto 60px;
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 40px;
}

.projects-number {
  color: var(--dore);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
}

.projects-heading {
  max-width: 800px;
}

.projects-heading h2 {
  margin-bottom: 20px;
  font-size: 34px;
}

.projects-heading > p:last-child {
  max-width: 600px;
  color: var(--texte-clair);
}

.projects-grid {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.category-card {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(21, 53, 82, 0.06);
  transition: transform 0.3s ease;
}

.category-card:hover {
  transform: translateY(-8px);
}

.category-image {
  min-height: 220px;
  padding: 20px;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  background-size: cover;
  background-position: center;
}

.category-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(21,53,82,.55), rgba(21,53,82,0) 55%);
}

.category-number {
  position: relative;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 50%;
  color: white;
  font-size: 13px;
  font-weight: 700;
  background: rgba(21,53,82,.25);
}

.category-info {
  padding: 24px 22px 26px;
}

.category-info .project-category {
  display: block;
  margin-bottom: 8px;
  color: var(--dore);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
}

.category-info h3 {
  font-size: 20px;
  margin-bottom: 6px;
}

.category-info > p {
  color: var(--texte-clair);
  font-size: 13px;
  margin-bottom: 16px;
}

.category-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #EEE;
}

.category-list li {
  border-bottom: 1px solid #EEE;
}

.category-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 2px;
  color: var(--bleu-marine-fonce);
  font-size: 14px;
  font-weight: 600;
  transition: color 0.2s ease;
}

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

.category-list a span {
  color: var(--dore);
  font-size: 15px;
}

/* ============================= */
/* METHODE */
/* ============================= */

.method-section {
  background-color: var(--bleu-clair);
  max-width: none;
}

.method-section .steps {
  max-width: 1200px;
  margin: 0 auto;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.step {
  text-align: center;
}

.step-number {
  display: inline-block;
  width: 44px;
  height: 44px;
  line-height: 44px;
  border-radius: 50%;
  background-color: var(--dore);
  color: var(--bleu-marine-fonce);
  font-weight: 700;
  margin-bottom: 16px;
}

.step h3 {
  font-size: 19px;
  margin-bottom: 10px;
}

.step p {
  color: var(--texte-clair);
  font-size: 15px;
}

/* ============================= */
/* TARIFS */
/* ============================= */

.pricing-section {
  max-width: 1200px;
}

.pricing-heading {
  text-align: center;
  max-width: 650px;
  margin: 0 auto 50px;
}

.pricing-heading h2 {
  font-size: 32px;
  margin: 10px 0 16px;
}

.pricing-heading p {
  color: var(--texte-clair);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}

.price-card {
  background: var(--bleu-marine-fonce);
  color: white;
  padding: 36px 30px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

.price-card ul {
  flex-grow: 1;
}

.price-card > .button {
  margin-top: auto;
}

.price-card-recommandee {
  background: var(--dore);
  color: var(--bleu-marine-fonce);
  transform: scale(1.04);
  box-shadow: 0 20px 40px rgba(198, 154, 46, 0.25);
}

.price-label {
  display: inline-block;
  background: var(--dore);
  color: var(--bleu-marine-fonce);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 18px;
}

.price-label-recommandee {
  background: var(--bleu-marine-fonce);
}

.price-card h3 {
  color: white;
  font-size: 20px;
  margin-bottom: 16px;
}

.price {
  font-size: 32px;
  font-weight: 700;
  color: var(--dore);
}

.price-card-recommandee .price {
  color: var(--bleu-marine-fonce);
}

.price-note {
  font-size: 13px;
  color: #C9D6E4;
  margin-bottom: 22px;
}

.price-card-recommandee .price-note {
  color: rgba(21,53,82,0.75);
}

.price-card ul {
  margin-bottom: 26px;
}

.price-card li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  font-size: 14px;
}

.price-card-recommandee li {
  border-bottom: 1px solid rgba(21,53,82,0.15);
  color: var(--bleu-marine-fonce);
}

.price-card .button {
  width: 100%;
  justify-content: center;
}

/* ===== Mini-diagnostic (page Tarifs) ===== */
.mini-diagnostic {
  max-width: 640px;
  margin: 60px auto 0;
  padding: 40px 32px;
  border-radius: 20px;
  background: var(--bleu-clair);
  border: 1px solid var(--bleu-marine);
  text-align: center;
}
.mini-diagnostic h3 {
  color: var(--bleu-marine-fonce);
  font-size: 22px;
  margin: 6px 0 26px;
}
.mini-diagnostic-champs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  text-align: left;
  margin-bottom: 22px;
}
.mini-diagnostic-champs label {
  font-size: 13px;
  font-weight: 700;
  color: var(--bleu-marine-fonce);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mini-diagnostic-champs select {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 14px;
  font-weight: 400;
  color: var(--texte);
  background: white;
}
.mini-diagnostic-resultat {
  display: none;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--bleu-marine);
  text-align: left;
}
.mini-diagnostic-resultat.visible { display: block; }
.mini-diagnostic-resultat .md-eyebrow {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dore-texte);
  font-weight: 700;
  margin-bottom: 6px;
}
.mini-diagnostic-resultat h4 {
  color: var(--bleu-marine-fonce);
  font-size: 21px;
  margin: 0 0 6px;
}
.mini-diagnostic-resultat .md-prix {
  font-size: 26px;
  font-weight: 700;
  color: var(--bleu-marine-fonce);
  margin-bottom: 10px;
}
.mini-diagnostic-resultat p.md-raison {
  color: var(--texte);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 6px;
}

@media (max-width: 600px) {
  .mini-diagnostic-champs { grid-template-columns: 1fr; }
}

.pricing-options {
  margin-top: 60px;
  background: white;
  border-radius: 12px;
  padding: 32px 36px;
  box-shadow: 0 4px 20px rgba(21, 53, 82, 0.06);
}

.pricing-options h3 {
  font-size: 18px;
  margin-bottom: 18px;
}

.options-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #EEE;
  font-size: 15px;
}

.options-list li:last-child {
  border-bottom: none;
}

.options-list li span:first-child {
  flex: 1 1 auto;
}

.options-list li span:last-child {
  color: var(--dore);
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ============================= */
/* CTA */
/* ============================= */

.cta-section {
  background-color: var(--bleu-marine-fonce);
  color: white;
  text-align: center;
  max-width: none;
  padding: 90px 40px;
}

.cta-section h2 {
  color: white;
  font-size: 34px;
  margin: 16px 0 30px;
}

/* ============================= */
/* CONTACT */
/* ============================= */

.contact-section {
  display: flex;
  gap: 60px;
}

.contact-intro {
  flex: 1;
}

.contact-intro h2 {
  font-size: 32px;
  margin-bottom: 16px;
}

.contact-intro p {
  color: var(--texte-clair);
  margin-bottom: 12px;
}

.contact-details {
  margin-top: 24px;
}

.contact-details p {
  color: var(--bleu-marine-fonce);
  font-weight: 600;
  margin-bottom: 10px;
}

#contact-form {
  flex: 1;
  background: white;
  padding: 36px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(21, 53, 82, 0.08);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hidden-field {
  position: absolute;
  left: -9999px;
}

#contact-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bleu-marine-fonce);
  position: relative;
}

#contact-form input,
#contact-form textarea {
  font-family: inherit;
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid #DDD;
  border-radius: 6px;
  font-weight: 400;
  color: var(--texte);
}

#contact-form input:focus,
#contact-form textarea:focus {
  outline: 3px solid var(--dore);
  outline-offset: 1px;
  border-color: var(--dore);
}

.rgpd {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 10px !important;
  font-weight: 400;
  font-size: 13px;
  color: var(--texte-clair);
}

.rgpd input {
  margin-top: 3px;
}

#form-message {
  font-size: 14px;
  color: var(--dore);
  font-weight: 600;
}

/* ============================= */
/* PAGES LEGALES */
/* ============================= */

.legal-section {
  max-width: 800px;
  padding-top: 70px;
  padding-bottom: 90px;
}

.legal-section h1 {
  font-size: 34px;
  margin-bottom: 30px;
}

.legal-section h2 {
  font-size: 20px;
  margin: 34px 0 12px;
}

.legal-section p {
  color: var(--texte-clair);
  margin-bottom: 12px;
}

.legal-list {
  margin: 10px 0 10px 20px;
}

.legal-list li {
  color: var(--texte-clair);
  padding: 5px 0;
  list-style: disc;
}

.legal-updated {
  margin-top: 40px;
  font-size: 13px;
  font-style: italic;
  color: #999;
}

/* ============================= */
/* FOOTER */
/* ============================= */

.footer {
  background-color: var(--bleu-marine-fonce);
  color: white;
  padding: 50px 40px 30px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
  max-width: none;
}

.footer-brand {
  display: flex;
  flex-direction: column;
}

.footer-brand strong,
.footer-brand span {
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 19px;
}

.footer-brand span {
  color: var(--dore);
}

.footer-brand small {
  font-size: 13px;
  color: #C9D6E4;
  margin-top: 6px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}

.footer-legal {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  color: #C9D6E4;
}

.footer-social {
  display: flex;
  gap: 16px;
}

.footer-social a {
  color: var(--dore, #C69A2E);
  text-decoration: none;
  font-weight: 600;
}

.footer-social a:hover {
  text-decoration: underline;
}

/* ============================= */
/* RESPONSIVE MOBILE */
/* ============================= */

@media (max-width: 1100px) and (min-width: 901px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {

  .navigation {
    display: none;
  }

  .navigation.navigation-ouverte {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--bleu-marine-fonce);
    padding: 12px 24px 24px;
    box-shadow: 0 12px 24px rgba(21, 53, 82, 0.25);
  }

  .navigation.navigation-ouverte a {
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  .navigation.navigation-ouverte .nav-button {
    margin-top: 10px;
    text-align: center;
  }

  .menu-toggle {
    display: block;
  }

  .hero,
  .about-section,
  .pricing-section,
  .contact-section {
    flex-direction: column;
  }

  .services-grid,
  .projects-grid,
  .steps,
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .projects-introduction {
    display: block;
  }

  .projects-number {
    margin-bottom: 20px;
  }

  .price-card-recommandee {
    transform: none;
  }

  .hero h1 {
    font-size: 32px;
  }

  section {
    padding: 60px 24px;
  }

  .footer {
    flex-direction: column;
  }
}

/* ===== Bandeau de consentement cookies ===== */
#cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 999;
  background: var(--bleu-marine-fonce);
  color: #fff;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  box-shadow: 0 -4px 20px rgba(0,0,0,.15);
}
#cookie-banner p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #EAF1F8;
  max-width: 640px;
}
#cookie-banner a {
  color: var(--dore);
  text-decoration: underline;
}
.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.cookie-banner-actions button {
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
#cookie-accepter {
  background: var(--dore);
  color: var(--bleu-marine-fonce);
}
#cookie-refuser {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.4) !important;
}
@media (max-width: 600px) {
  #cookie-banner { flex-direction: column; align-items: stretch; }
  .cookie-banner-actions { justify-content: stretch; }
  .cookie-banner-actions button { flex: 1; }
}


/* ===== Accessibilité : texte réservé aux lecteurs d'écran ===== */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}

/* ===== Accessibilité : lien d'évitement ===== */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--bleu-marine-fonce);
  color: white;
  padding: 14px 22px;
  font-weight: 700;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

/* ===== Rappel de formule sélectionnée (page Contact) ===== */
.formule-rappel {
  max-width: 640px;
  margin: 0 auto 20px;
  padding: 0;
  background: none;
  color: var(--bleu-marine-fonce);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

/* Réalisation client vedette — Projet Boussole */
.realisation-featured{max-width:1200px;margin:0 auto;padding:90px 7%;}
.realisation-kicker{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;color:var(--dore);font-size:13px;font-weight:800;letter-spacing:1.4px;}
.realisation-status{padding:7px 11px;border:1px solid var(--dore);border-radius:999px;}
.realisation-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);gap:64px;align-items:center;}
.realisation-copy h2{font-size:42px;line-height:1.08;color:var(--bleu-marine-fonce);margin:10px 0 20px;}
.realisation-copy h2 em{color:var(--dore);font-style:normal;}
.realisation-lead{font-size:18px;line-height:1.65;color:var(--texte-clair);margin-bottom:28px;}
.realisation-details{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:24px;}
.realisation-details strong{display:block;color:var(--bleu-marine-fonce);margin-bottom:8px;}
.realisation-details p{font-size:14px;line-height:1.65;margin:0;}
.realisation-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px;}
.realisation-tags span{background:var(--bleu-clair);padding:7px 11px;border-radius:999px;font-size:13px;font-weight:700;color:var(--bleu-marine-fonce);}
.realisation-confidential{font-size:13px;color:var(--texte-clair);font-style:italic;margin-top:14px;}
.realisation-preview{display:block;text-decoration:none;color:inherit;transition:transform .25s ease;}
.realisation-preview:hover{transform:translateY(-4px);}
.browser-frame{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 22px 55px rgba(15,36,55,.16);border:1px solid rgba(15,36,55,.10);}
.browser-bar{height:38px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#f4f1eb;color:var(--texte-clair);font-size:13px;}
.browser-bar i{width:8px;height:8px;border-radius:50%;background:#c9c2b6;display:block;}
.browser-bar span{margin-left:8px;}
.browser-frame iframe{display:block;width:160%;height:500px;border:0;transform:scale(.625);transform-origin:top left;pointer-events:none;background:#fff;}
.preview-caption{display:flex;justify-content:space-between;padding:14px 4px 0;font-size:13px;color:var(--bleu-marine-fonce);}
.preview-caption span{color:var(--dore);font-weight:700;}
@media(max-width:900px){.realisation-featured{padding:65px 7%;}.realisation-layout{grid-template-columns:1fr;gap:38px}.realisation-copy h2{font-size:34px}.realisation-details{grid-template-columns:1fr}.browser-frame iframe{height:420px}.realisation-kicker{align-items:flex-start;gap:12px}.realisation-status{white-space:nowrap}}
@media(max-width:520px){.realisation-copy h2{font-size:30px}.realisation-lead{font-size:16px}.browser-frame iframe{height:330px}.realisation-kicker{font-size:13px}}

/* =========================================================
   DESIGN PREMIUM 2026 — UN CLIC UN SITE
   Harmonisation visuelle globale sans modifier le contenu SEO
   ========================================================= */
:root {
  --surface: #ffffff;
  --surface-soft: #f3eee4;
  --border-soft: rgba(21,53,82,.12);
  --shadow-soft: 0 14px 40px rgba(21,53,82,.08);
  --shadow-hover: 0 22px 55px rgba(21,53,82,.14);
  --radius-card: 18px;
  --radius-button: 10px;
}

body { letter-spacing: .005em; }
main { overflow: hidden; }

.header {
  padding: 14px clamp(20px,4vw,56px);
  background: rgba(21,53,82,.97);
  box-shadow: 0 8px 30px rgba(9,27,43,.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.logo strong,.logo span { letter-spacing:.055em; }
.navigation { gap: clamp(16px,2vw,30px); }
.navigation a { position:relative; transition:color .2s ease, transform .2s ease; }
.navigation a:not(.nav-button)::after {
  content:""; position:absolute; left:0; bottom:-7px; width:0; height:2px;
  background:var(--dore); transition:width .25s ease;
}
.navigation a:not(.nav-button):hover::after { width:100%; }
.nav-button { border-radius:999px; padding:11px 20px; box-shadow:0 8px 22px rgba(198,154,46,.18); }

.button { border-radius:var(--radius-button); padding:14px 26px; transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease; }
.button:hover { opacity:1; transform:translateY(-2px); box-shadow:0 10px 24px rgba(21,53,82,.14); }
.button-primary { box-shadow:0 8px 20px rgba(198,154,46,.18); }
.text-button { transition:color .2s ease, border-color .2s ease; }
.text-button:hover { color:var(--dore-texte); }

.hero {
  min-height: 660px;
  padding: clamp(72px,8vw,118px) clamp(22px,4vw,56px);
  gap: clamp(42px,6vw,82px);
}
.hero-content { max-width:650px; }
.hero h1 { font-size:clamp(42px,5.3vw,68px); line-height:1.06; letter-spacing:-.035em; margin-bottom:24px; }
.hero-text { font-size:clamp(17px,1.5vw,20px); line-height:1.75; max-width:620px; }
.hero-visual { filter:drop-shadow(0 24px 40px rgba(21,53,82,.13)); }
.hero-photo, .hero-photo-placeholder, .about-photo, .about-photo-placeholder { border-radius:22px; overflow:hidden; }
.floating-card { border-radius:14px !important; box-shadow:0 16px 38px rgba(21,53,82,.16) !important; border:1px solid rgba(255,255,255,.7); }

.info-strip { padding:24px clamp(20px,4vw,50px); box-shadow:inset 0 1px rgba(255,255,255,.08); }
.info-item { gap:12px; }

.section-heading, .method-heading, .pricing-heading { margin-bottom:52px; }
.section-heading h2, .method-heading h2, .pricing-heading h2 { font-size:clamp(32px,4vw,48px); letter-spacing:-.025em; }
.eyebrow { letter-spacing:.16em; }

.about-section, .services-section, .method-section, .pricing-section, .projects-section, .contact-section {
  padding-top:clamp(76px,8vw,118px);
  padding-bottom:clamp(76px,8vw,118px);
}
.about-section { gap:clamp(42px,7vw,90px); }
.about-content p { line-height:1.85; }
.about-photo img, .tatiana-photo { box-shadow:var(--shadow-soft); }

.services-grid { gap:22px; }
.service-card {
  border-radius:var(--radius-card);
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow-soft);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  background:rgba(255,255,255,.9);
}
.service-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-hover); border-color:rgba(198,154,46,.35); }
.service-number { opacity:.55; }

.projects-grid { gap:26px; }
.category-card { border-radius:var(--radius-card); overflow:hidden; border:1px solid var(--border-soft); box-shadow:var(--shadow-soft); background:#fff; }
.category-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-hover); }
.category-image img { transition:transform .45s ease; }
.category-card:hover .category-image img { transform:scale(1.025); }
.category-info { padding:30px; }

.steps { gap:22px; }
.step { border-radius:var(--radius-card); border:1px solid var(--border-soft); box-shadow:0 10px 30px rgba(21,53,82,.06); background:rgba(255,255,255,.82); }
.step-number { box-shadow:0 8px 18px rgba(198,154,46,.15); }

.pricing-grid { gap:24px; align-items:stretch; }
.price-card { border-radius:20px; border:1px solid var(--border-soft); box-shadow:var(--shadow-soft); transition:transform .25s ease, box-shadow .25s ease; }
.price-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-hover); }
.price-card-recommandee { transform:scale(1.025); box-shadow:0 20px 50px rgba(21,53,82,.18); }
.price-card-recommandee:hover { transform:scale(1.025) translateY(-5px); }
.price-label { border-radius:999px; }
.mini-diagnostic, .pricing-options { border-radius:var(--radius-card); box-shadow:0 10px 30px rgba(21,53,82,.06); }

.cta-section { padding:clamp(76px,8vw,110px) clamp(22px,4vw,50px); }
.cta-section h2 { font-size:clamp(34px,4.5vw,52px); letter-spacing:-.025em; }

.contact-section { gap:clamp(40px,7vw,80px); }
.contact-intro h2 { font-size:clamp(34px,4vw,48px); }
.contact-section form { border-radius:20px; box-shadow:var(--shadow-soft); }
input, textarea, select { border-radius:10px !important; transition:border-color .2s ease, box-shadow .2s ease; }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--dore) !important; box-shadow:0 0 0 3px rgba(198,154,46,.12); }

.legal-section { max-width:900px; }
.legal-section h1 { font-size:clamp(38px,5vw,54px); }

.footer { padding:52px clamp(22px,4vw,56px) 34px; }
.footer-links a, .footer-legal a { transition:color .2s ease; }
.footer-links a:hover, .footer-legal a:hover { color:var(--dore); }

/* Projet Boussole : vraie réalisation client, traitement éditorial premium */
.boussole-featured { border-radius:24px !important; box-shadow:0 24px 60px rgba(21,53,82,.13) !important; }
.boussole-featured .boussole-visual { border-radius:18px !important; overflow:hidden; }

/* Mobile : davantage de respiration, lecture plus nette */
@media (max-width: 768px) {
  .header { padding:13px 18px; }
  .hero { min-height:auto; padding:62px 20px 72px; gap:38px; }
  .hero h1 { font-size:40px; }
  .hero-text { font-size:17px; line-height:1.7; }
  .hero-buttons { gap:12px; }
  .hero-buttons .button { width:100%; justify-content:center; }
  .about-section, .services-section, .method-section, .pricing-section, .projects-section, .contact-section { padding-top:68px; padding-bottom:68px; }
  .section-heading, .method-heading, .pricing-heading { margin-bottom:34px; }
  .service-card, .category-card, .price-card, .step { border-radius:16px; }
  .price-card-recommandee, .price-card-recommandee:hover { transform:none; }
  .cta-section { padding:70px 20px; }
  .footer { padding:44px 20px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}

/* =========================================================
   REFONTE SIGNATURE — août 2026
   Plus éditoriale, plus haut de gamme, moins "template".
   ========================================================= */
:root{
  --ink:#102b43;
  --navy:#153552;
  --gold:#c69a2e;
  --paper:#faf7f1;
  --sand:#efe7d9;
}
body{background:var(--paper);}
.header{border-bottom:1px solid rgba(255,255,255,.08);}
.hero{max-width:1320px;min-height:720px;position:relative;isolation:isolate;}
.hero:before{content:"";position:absolute;width:480px;height:480px;border:1px solid rgba(198,154,46,.2);border-radius:50%;right:-190px;top:30px;z-index:-1;}
.hero:after{content:"01";position:absolute;left:10px;bottom:12px;font-family:Georgia,serif;font-size:120px;color:rgba(21,53,82,.035);z-index:-1;}
.hero-content{position:relative;z-index:2;}
.hero .eyebrow{max-width:620px;line-height:1.7;}
.hero h1{font-size:clamp(52px,6.3vw,82px);max-width:720px;}
.hero h1 em{position:relative;display:inline-block;}
.hero h1 em:after{content:"";position:absolute;height:8px;background:rgba(198,154,46,.22);left:-2%;right:-3%;bottom:6px;z-index:-1;transform:rotate(-1deg);}
.hero-text{border-left:2px solid var(--gold);padding-left:22px;margin-top:28px;}
.hero-buttons{margin-top:34px;}
.hero-photo{position:relative;border-radius:220px 220px 26px 26px!important;background:var(--sand);padding:10px;}
.hero-photo:after{content:"Création indépendante • Mayenne";position:absolute;right:-24px;bottom:52px;background:var(--navy);color:#fff;padding:11px 16px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;transform:rotate(-90deg) translateX(100%);transform-origin:right bottom;}
.hero-photo img{border-radius:210px 210px 18px 18px;}
.floating-card{left:-55px!important;right:auto!important;bottom:28px!important;background:rgba(255,255,255,.96)!important;max-width:250px;}
.info-strip:first-of-type{max-width:1180px;margin:-20px auto 35px;border-radius:18px;background:var(--navy);position:relative;z-index:4;}
.info-strip:first-of-type .info-item{justify-content:center;}

/* Avis accueil */
.home-reviews{padding:95px 24px;background:#fff;position:relative;}
.home-reviews:before{content:"“";position:absolute;top:25px;left:5%;font-family:Georgia,serif;font-size:180px;line-height:1;color:rgba(198,154,46,.12);}
.home-reviews-head{max-width:1180px;margin:0 auto 38px;display:flex;justify-content:space-between;align-items:end;gap:30px;}
.home-reviews-head h2{font-size:clamp(34px,4vw,52px);max-width:650px;}
.home-reviews-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(21,53,82,.12);border:1px solid rgba(21,53,82,.12);}
.review-card{background:#fff;padding:34px;min-height:330px;display:flex;flex-direction:column;justify-content:space-between;}
.review-stars{color:var(--gold);letter-spacing:.16em;margin-bottom:20px;}
.review-card blockquote{font-family:Georgia,serif;font-size:18px;line-height:1.65;color:var(--navy);}
.review-source{font-size:13px;font-weight:700;color:#6b6b6b;margin-top:25px;}

/* Bloc tarifs accueil */
.pricing-accessible{max-width:1180px;margin:0 auto!important;padding:100px 24px!important;background:transparent!important;}
.pricing-accessible .container{display:grid;grid-template-columns:.7fr 1.3fr;gap:60px;padding:58px!important;border-top:1px solid rgba(21,53,82,.16);border-bottom:1px solid rgba(21,53,82,.16);position:relative;}
.pricing-accessible .container:before{content:"990 €";font-family:Georgia,serif;font-size:clamp(58px,8vw,110px);color:rgba(198,154,46,.15);grid-row:1/7;align-self:center;}
.pricing-accessible h2{font-size:clamp(34px,4vw,50px);}
.pricing-accessible p{line-height:1.8;}

/* Projets : vraie réalisation = pièce maîtresse */
.realisation-featured{max-width:none;padding:110px max(6vw,24px);background:var(--navy);color:#fff;position:relative;overflow:hidden;}
.realisation-featured:before{content:"LE FILTRE";position:absolute;right:max(6vw,24px);top:5px;font-family:Georgia,serif;font-size:clamp(80px,14vw,210px);color:rgba(255,255,255,.025);letter-spacing:-.06em;white-space:nowrap;}
.realisation-featured .section-label,.realisation-featured .realisation-kicker{color:#e3bd5b;}
.realisation-featured .realisation-copy h2{color:#fff;font-size:clamp(42px,5vw,66px);}
.realisation-featured .realisation-lead,.realisation-featured .realisation-details p,.realisation-featured .realisation-confidential{color:#d5e0e8;}
.realisation-featured .realisation-details strong{color:#fff;}
.realisation-featured .realisation-tags span{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.12);}
.realisation-featured .button-dark{background:var(--gold);color:var(--navy);}
.realisation-featured .browser-frame{transform:rotate(1.2deg);box-shadow:0 35px 80px rgba(0,0,0,.3);}
.realisation-featured .preview-caption{color:#fff;}
.projects-section{background:#f4eee4;}
.category-card{border-radius:0;box-shadow:none;border:0;background:transparent;}
.category-image{min-height:320px;overflow:hidden;}
.category-info{background:#fff;margin:-38px 18px 0;position:relative;z-index:2;padding:28px;box-shadow:0 15px 35px rgba(21,53,82,.08);}

.cta-section{position:relative;overflow:hidden;}
.cta-section:before{content:"→";position:absolute;right:5%;top:50%;transform:translateY(-55%);font-size:180px;color:rgba(255,255,255,.06);}
.footer{border-top:4px solid var(--gold);}

@media(max-width:900px){
 .hero{min-height:auto}.hero:before,.hero:after,.hero-photo:after{display:none}.hero h1{font-size:48px}.floating-card{left:10px!important}
 .home-reviews-head{display:block}.home-reviews-grid{grid-template-columns:1fr}.review-card{min-height:auto}
 .pricing-accessible .container{grid-template-columns:1fr;padding:38px 24px!important}.pricing-accessible .container:before{grid-row:auto;font-size:72px}
 .realisation-featured{padding:80px 24px}.realisation-featured .browser-frame{transform:none}
}
@media(max-width:520px){.hero h1{font-size:42px}.hero-photo{border-radius:140px 140px 22px 22px!important}.hero-photo img{border-radius:130px 130px 15px 15px}.home-reviews{padding:70px 18px}.review-card{padding:26px}.category-info{margin:-25px 10px 0}.pricing-accessible{padding:70px 18px!important}}

/* Corrections 22-08-2026 : cartes engagements + aperçu Boussole */
@media (min-width: 769px) {
  .services-section .services-grid { align-items: start; }
  .services-section .service-card { align-self: start; }
}
/* Le contenu de l'iframe est réduit à 62,5 % : 800px donnent 500px visibles,
   ce qui évite la grande zone vide sous l'aperçu. */
.browser-frame iframe { height: 800px; }
@media(max-width:900px){ .browser-frame iframe{height:672px;} }
@media(max-width:520px){ .browser-frame iframe{height:528px;} }

/* =========================================================
   REFONTE COMPLETE V2 — pages intérieures différenciées
   ========================================================= */
.price-label-recommandee{color:#fff!important;}
.price-card-recommandee .pro-title{color:var(--bleu-marine-fonce)!important;font-family:Georgia,serif;font-size:28px;margin:4px 0 10px;}

/* langage commun : plus éditorial, moins cartes clonées */
.page-about main,.page-services main,.page-projects main,.page-method main,.page-engagements main,.page-pricing main,.page-contact main{overflow:hidden;}
.page-about h1,.page-services h1,.page-projects h1,.page-method h1,.page-engagements h1,.page-pricing h1,.page-contact h1,
.page-about h2,.page-services h2,.page-projects h2,.page-method h2,.page-engagements h2,.page-pricing h2,.page-contact h2{font-family:Georgia,'Times New Roman',serif;letter-spacing:-.025em;}

/* À PROPOS : portrait magazine */
.page-about .about-section{max-width:1280px;display:grid;grid-template-columns:.82fr 1.18fr;gap:0;padding:90px 24px 110px;align-items:center;}
.page-about .about-photo{height:700px;border-radius:180px 180px 0 0;overflow:hidden;box-shadow:25px 28px 0 var(--sand);position:relative;z-index:2;}
.page-about .about-photo img{width:100%;height:100%;object-fit:cover;}
.page-about .about-content{background:#fff;padding:70px 70px 70px 95px;margin-left:-35px;border-top:1px solid rgba(21,53,82,.12);border-bottom:1px solid rgba(21,53,82,.12);}
.page-about .about-content h1{font-size:clamp(44px,5vw,68px);line-height:1.02;}
.page-about .about-content>p:not(.eyebrow){font-size:16px;line-height:1.85;}
.page-about .values-section{background:var(--navy);max-width:none!important;padding:100px max(6vw,24px)!important;color:#fff;}
.page-about .values-section h2{color:#fff!important;font-size:48px;}
.page-about .values-section>div{max-width:1180px;margin:auto;}
.page-about .values-section>div>div{background:transparent!important;border-top:1px solid rgba(255,255,255,.22);border-radius:0!important;padding:30px 4px!important;}
.page-about .values-section h3{color:#e3bd5b!important;font-size:20px!important;}
.page-about .values-section p{color:#d7e0e8!important;}

/* SERVICES : grand sommaire numéroté */
.page-services .services-section{max-width:1240px;padding:95px 24px 120px;}
.page-services .section-heading{display:grid;grid-template-columns:.7fr 1.3fr;align-items:end;border-bottom:1px solid rgba(21,53,82,.18);padding-bottom:40px;margin-bottom:0;}
.page-services .section-heading h1{font-size:clamp(46px,5vw,68px);}
.page-services .services-grid{display:block;}
.page-services .service-card{display:grid;grid-template-columns:90px 70px .8fr 1.3fr 130px;gap:20px;align-items:center;background:transparent;border-radius:0!important;border-bottom:1px solid rgba(21,53,82,.15);padding:38px 0;box-shadow:none!important;min-height:0;}
.page-services .service-card:hover{transform:none;background:#fff;}
.page-services .service-number{font-family:Georgia,serif;font-size:38px;color:rgba(21,53,82,.25);}
.page-services .service-icon{font-size:28px;}
.page-services .service-card h3{font-family:Georgia,serif;font-size:28px;margin:0;}
.page-services .service-card p,.page-services .service-card ul{margin:0!important;}
.page-services .service-card>a{justify-self:end;white-space:nowrap;}

/* METHODE : frise éditoriale verticale */
.page-method .methode-intro{max-width:none;background:var(--navy);color:#fff;padding:110px max(8vw,24px) 90px;text-align:left;position:relative;}
.page-method .methode-intro:after{content:'01 — 05';position:absolute;right:6vw;bottom:-15px;font-family:Georgia,serif;font-size:110px;color:rgba(255,255,255,.055);}
.page-method .methode-intro h1{color:#fff;font-size:clamp(48px,6vw,78px);max-width:820px;}
.page-method .methode-intro .eyebrow{color:#e3bd5b;}
.page-method .timeline{max-width:1050px;margin:80px auto 110px!important;}
.page-method .timeline-item{border-left:1px solid rgba(21,53,82,.2)!important;padding:15px 20px 60px 70px!important;position:relative;}
.page-method .timeline-item:before{content:'';position:absolute;left:-7px;top:24px;width:13px;height:13px;background:var(--gold);border-radius:50%;}

/* ENGAGEMENTS : manifeste, cartes compactes sans trous */
.page-engagements .services-section{max-width:1220px;padding:100px 24px;}
.page-engagements .section-heading{max-width:820px;margin:0 0 60px;}
.page-engagements .section-heading h1{font-size:clamp(46px,5vw,68px);}
.page-engagements .services-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start!important;}
.page-engagements .service-card{min-height:0!important;height:auto!important;align-self:start!important;border-radius:0!important;background:#fff;border:1px solid rgba(21,53,82,.1);box-shadow:none;padding:34px;}
.page-engagements .service-card:nth-child(2n){margin-top:45px;}
.page-engagements .service-card h3{font-family:Georgia,serif;font-size:25px;}

/* TARIFS : vrais panneaux d'offre */
.page-pricing .method-section{background:#fff;padding-top:80px;}
.page-pricing .pricing-section{max-width:1280px;padding:110px 24px;}
.page-pricing .pricing-heading{display:grid;grid-template-columns:.75fr 1.25fr;gap:40px;text-align:left;align-items:end;}
.page-pricing .pricing-heading h2{font-size:clamp(46px,5vw,68px);}
.page-pricing .pricing-grid{gap:14px;align-items:stretch;}
.page-pricing .price-card{border-radius:2px!important;padding:34px 28px;box-shadow:none;border:1px solid rgba(255,255,255,.1);}
.page-pricing .price-card-recommandee{transform:none;}
.page-pricing .price-card-recommandee:hover{transform:translateY(-5px);}
.page-pricing .price{font-family:Georgia,serif;font-size:42px;}

/* CONTACT : formulaire comme une fiche de studio */
.page-contact .contact-section{max-width:1220px;display:grid;grid-template-columns:.72fr 1.28fr;gap:0;padding:100px 24px 120px;align-items:start;}
.page-contact .contact-intro{background:var(--navy);color:#fff;padding:60px 48px;position:sticky;top:110px;}
.page-contact .contact-intro h1{color:#fff;font-size:clamp(44px,5vw,64px);}
.page-contact .contact-intro .eyebrow{color:#e3bd5b;}
.page-contact .contact-intro p{color:#d8e2e9;}
.page-contact .contact-form{background:#fff;padding:55px;box-shadow:0 25px 70px rgba(21,53,82,.09);}

/* PROJETS : réalisation réelle très différente des maquettes */
.page-projects .projects-introduction{max-width:920px;margin:0 auto 60px;text-align:left;}
.page-projects .projects-introduction h1,.page-projects .projects-introduction h2{font-size:clamp(44px,5vw,64px);}
.page-projects .projects-grid{grid-template-columns:repeat(2,1fr);gap:55px 30px;}
.page-projects .category-card:nth-child(even){margin-top:55px;}
.browser-frame iframe{height:1100px!important;}

@media(max-width:900px){
 .page-about .about-section,.page-contact .contact-section{grid-template-columns:1fr;}
 .page-about .about-photo{height:520px;max-width:430px;margin:auto}.page-about .about-content{margin:0;padding:50px 24px}
 .page-services .section-heading,.page-pricing .pricing-heading{grid-template-columns:1fr;}
 .page-services .service-card{grid-template-columns:55px 45px 1fr}.page-services .service-card p,.page-services .service-card ul,.page-services .service-card>a{grid-column:3;justify-self:start}
 .page-engagements .services-grid{grid-template-columns:1fr}.page-engagements .service-card:nth-child(2n){margin-top:0}
 .page-contact .contact-intro{position:relative;top:auto}.page-contact .contact-form{padding:35px 24px}
 .page-projects .projects-grid{grid-template-columns:1fr}.page-projects .category-card:nth-child(even){margin-top:0}
 .browser-frame iframe{height:850px!important;}
}
@media(max-width:520px){.page-services .service-card{grid-template-columns:45px 1fr}.page-services .service-icon{display:none}.page-services .service-card h3{font-size:23px}.page-services .service-card p,.page-services .service-card ul,.page-services .service-card>a{grid-column:2}.browser-frame iframe{height:650px!important;}}

/* =========================================================
   RESPONSIVE FINAL V3 — desktop / tablette / mobile
   22-08-2026
   ========================================================= */
html{overflow-x:hidden} body{overflow-x:hidden}.header{position:relative}.menu-toggle{flex:0 0 auto}

/* ORDINATEUR >= 1101px */
@media (min-width:1101px){
  .header{min-height:92px}.navigation{display:flex!important}.menu-toggle{display:none!important}
  .page-services .service-card{grid-template-columns:70px 45px minmax(180px,.75fr) minmax(280px,1.25fr) 110px;gap:22px}
  .page-pricing .pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .realisation-layout{grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr)}
}

/* TABLETTE 769–1100px */
@media (min-width:769px) and (max-width:1100px){
  .header{padding:14px 28px;min-height:82px}.menu-toggle{display:block!important;font-size:28px}
  .navigation{display:none!important}.navigation.navigation-ouverte{display:flex!important;z-index:1000}
  section{padding-left:32px;padding-right:32px}
  .hero{padding-left:5%;padding-right:5%}.hero h1{font-size:clamp(42px,6vw,60px)}
  .page-about .about-section{grid-template-columns:.9fr 1.1fr;padding:72px 32px 90px}.page-about .about-photo{height:560px}.page-about .about-content{padding:48px 40px 48px 62px}
  .page-services .services-section{padding:75px 32px 95px}.page-services .service-card{grid-template-columns:54px minmax(190px,.75fr) minmax(260px,1.25fr);gap:18px;padding:30px 0}.page-services .service-icon{display:none}.page-services .service-card h3{font-size:25px}.page-services .service-card p,.page-services .service-card ul{grid-column:auto!important}.page-services .service-card>a{margin-top:4px}
  .page-pricing .pricing-section{padding:80px 32px}.page-pricing .pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px}.page-pricing .price-card{padding:30px 24px}
  .page-engagements .services-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.page-engagements .service-card:nth-child(2n){margin-top:0}
  .page-contact .contact-section{grid-template-columns:.8fr 1.2fr;padding:80px 32px 100px}.page-contact .contact-intro{position:relative;top:auto;padding:45px 34px}.page-contact .contact-form{padding:42px 34px}
  .realisation-featured{padding:80px 5%}.realisation-layout{grid-template-columns:1fr!important;gap:48px}.realisation-preview{max-width:720px;width:100%;margin:0 auto}.browser-frame iframe{width:133.333%!important;transform:scale(.75)!important;height:900px!important}
  .page-projects .projects-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:36px 22px}.page-projects .category-card:nth-child(even){margin-top:0}
  .footer{padding-left:32px;padding-right:32px}
}

/* MOBILE <= 768px */
@media (max-width:768px){
  .header{padding:12px 18px;min-height:72px;align-items:center}.logo{max-width:125px}.logo small{font-size:13px}.menu-toggle{display:block!important;font-size:28px;line-height:1;padding:8px;background:transparent;border:0;color:#fff;cursor:pointer}
  .navigation{display:none!important}.navigation.navigation-ouverte{display:flex!important;position:absolute!important;top:100%;left:0;right:0;z-index:1000;padding:10px 20px 22px;background:#153552}.navigation.navigation-ouverte a{font-size:16px;padding:12px 0}.navigation.navigation-ouverte .nav-button{width:100%;padding:13px 16px}
  section{padding:54px 18px}.section-heading h1,.section-heading h2,.method-heading h1,.method-heading h2,.pricing-heading h2{font-size:clamp(34px,10vw,44px)!important;line-height:1.05}
  .hero{padding:56px 18px!important;display:flex!important;flex-direction:column!important;gap:32px}.hero h1{font-size:clamp(38px,11vw,50px)!important}.hero-text,.hero-photo{width:100%!important;max-width:none!important}.hero-photo:after{display:none}
  .info-strip>div{grid-template-columns:1fr!important}
  .page-about .about-section{display:flex!important;flex-direction:column;padding:58px 18px 75px}.page-about .about-photo{height:430px;width:min(100%,380px);margin:0 auto;border-radius:120px 120px 0 0;box-shadow:12px 14px 0 var(--sand)}.page-about .about-content{margin:0!important;padding:42px 4px 0!important;background:transparent;border:0}.page-about .values-section{padding:68px 18px!important}.page-about .values-section h2{font-size:38px!important}
  .page-services .services-section{padding:58px 18px 75px}.page-services .section-heading{display:block;padding-bottom:28px}.page-services .service-card{display:grid!important;grid-template-columns:38px minmax(0,1fr)!important;gap:8px 12px!important;padding:28px 0!important;align-items:start}.page-services .service-number{font-size:25px}.page-services .service-icon{display:none!important}.page-services .service-card h3{grid-column:2!important;font-size:25px!important;line-height:1.05;overflow-wrap:anywhere}.page-services .service-card p,.page-services .service-card ul,.page-services .service-card>a{grid-column:2!important;width:auto!important;max-width:100%;justify-self:start!important}.page-services .service-card p,.page-services .service-card li{font-size:15px;line-height:1.55}.page-services .service-card ul{padding-left:18px}
  .page-pricing .method-section{padding:54px 18px}.page-pricing .pricing-section{padding:62px 18px}.page-pricing .pricing-heading{display:block!important;margin-bottom:34px}.page-pricing .pricing-grid{display:grid!important;grid-template-columns:1fr!important;gap:16px!important}.page-pricing .price-card{width:100%;padding:28px 22px!important;min-width:0}.page-pricing .price{font-size:40px}.page-pricing .price-card-recommandee{border-top-width:6px}.page-pricing .price-card-recommandee .pro-title{font-size:26px!important}
  .page-engagements .services-section{padding:62px 18px}.page-engagements .services-grid{grid-template-columns:1fr!important}.page-engagements .service-card{padding:26px!important;margin:0!important}
  .page-method .methode-intro{padding:70px 18px 60px}.page-method .methode-intro:after{font-size:65px}.page-method .timeline{margin:55px 18px 75px!important}.page-method .timeline-item{padding:10px 5px 45px 36px!important}
  .page-contact .contact-section{display:block!important;padding:58px 18px 80px}.page-contact .contact-intro{position:relative!important;top:auto!important;padding:38px 24px}.page-contact .contact-form{padding:32px 20px!important;box-shadow:none}
  .realisation-featured{padding:64px 18px!important}.realisation-layout{display:grid!important;grid-template-columns:1fr!important;gap:38px!important}.realisation-copy h2{font-size:clamp(36px,10vw,46px)!important}.realisation-details{grid-template-columns:1fr!important}.realisation-preview{width:100%;max-width:100%;overflow:hidden}.realisation-featured .browser-frame{transform:none!important}.browser-frame iframe{width:200%!important;transform:scale(.5)!important;transform-origin:top left!important;height:760px!important}.preview-caption{font-size:13px;gap:12px}
  .page-projects .projects-section{padding:62px 18px}.page-projects .projects-grid{grid-template-columns:1fr!important;gap:34px!important}.page-projects .category-card:nth-child(even){margin-top:0!important}.category-image{min-height:220px}.category-info{margin:-24px 10px 0;padding:22px}
  .pricing-accessible{padding:62px 18px!important}.pricing-accessible .container{padding:30px 18px!important}.pricing-accessible .container:before{font-size:58px!important}
  .footer{padding:48px 20px!important;display:grid!important;grid-template-columns:1fr!important;gap:32px}.footer-links,.footer-legal{width:100%}
}

/* très petits téléphones */
@media (max-width:390px){
  .page-services .service-card{grid-template-columns:30px minmax(0,1fr)!important}.page-services .service-number{font-size:21px}.page-services .service-card h3{font-size:22px!important}
  .page-pricing .price-card{padding:24px 18px!important}.browser-frame iframe{height:680px!important}
}

/* =========================================================
   RESPONSIVE HARD FIX V4 — téléphone / tablette / ordinateur
   Mobile volontairement jusqu'à 1100px pour Android/Samsung
   ========================================================= */
@media (max-width:1100px){
  .header{padding:12px 18px!important;min-height:72px!important;display:flex!important;align-items:center!important;justify-content:space-between!important}
  .menu-toggle{display:block!important;font-size:28px!important;padding:8px!important}
  .navigation{display:none!important}
  .navigation.navigation-ouverte{display:flex!important;flex-direction:column!important;position:absolute!important;top:100%!important;left:0!important;right:0!important;background:#153552!important;padding:12px 20px 22px!important;z-index:9999!important}
  .navigation.navigation-ouverte a{width:100%!important;padding:11px 0!important}
  .hero{display:flex!important;flex-direction:column!important;padding:52px 18px!important;gap:30px!important}
  .hero-text,.hero-photo{width:100%!important;max-width:100%!important}
  .hero h1{font-size:clamp(38px,8vw,50px)!important;line-height:1.02!important}
  .home-reviews{padding:58px 18px!important}.reviews-heading{display:block!important}.reviews-grid{grid-template-columns:1fr!important}.review-card{min-height:0!important}
  .info-strip>div{grid-template-columns:1fr!important}
  .steps{grid-template-columns:1fr!important;gap:16px!important}.step{padding:24px 18px!important}
  .page-pricing .method-section{padding:52px 18px!important}.page-pricing .pricing-section{padding:58px 18px!important;max-width:none!important}.page-pricing .pricing-heading{display:block!important}.page-pricing .pricing-grid{display:grid!important;grid-template-columns:1fr!important;gap:16px!important}.page-pricing .price-card{width:100%!important;max-width:none!important;min-width:0!important;padding:28px 22px!important}.page-pricing .price-card-recommandee{transform:none!important}
  .page-services .services-section{padding:58px 18px 76px!important}.page-services .section-heading{display:block!important;padding-bottom:26px!important}.page-services .section-heading h1{font-size:clamp(36px,8vw,48px)!important}.page-services .services-grid{display:block!important}.page-services .service-card{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:12px!important;padding:28px 0!important;width:100%!important}.page-services .service-number{order:0!important;font-size:13px!important}.page-services .service-icon{display:none!important}.page-services .service-card h3{order:1!important;font-size:27px!important;line-height:1.08!important;width:100%!important}.page-services .service-card p{order:2!important;width:100%!important;margin:0!important}.page-services .service-card ul{order:3!important;width:100%!important;margin:0!important;padding-left:20px!important}.page-services .service-card>a{order:4!important;justify-self:auto!important;margin-top:4px!important}.page-services .service-card>*{grid-column:auto!important}
  .page-projects .projects-section{padding:58px 18px!important}.page-projects .projects-grid{grid-template-columns:1fr!important}.page-projects .category-card:nth-child(even){margin-top:0!important}
  .realisation-featured{padding:58px 18px!important}.realisation-layout{display:block!important}.realisation-copy{margin-bottom:36px!important}.realisation-copy h2{font-size:clamp(36px,8vw,48px)!important}.realisation-details{grid-template-columns:1fr!important}.realisation-preview{width:100%!important;max-width:100%!important;overflow:hidden!important}.browser-frame{width:100%!important;overflow:hidden!important}.browser-frame iframe{width:200%!important;transform:scale(.5)!important;transform-origin:top left!important;height:760px!important}
  .footer{display:grid!important;grid-template-columns:1fr!important;gap:28px!important;padding:44px 20px!important}
}

/* tablette : écrans tactiles plus larges */
@media (min-width:1101px) and (max-width:1366px){
 .header{padding:14px 28px!important}.menu-toggle{display:block!important}.navigation{display:none!important}.navigation.navigation-ouverte{display:flex!important}
 .page-pricing .pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .page-services .service-card{grid-template-columns:55px minmax(190px,.8fr) minmax(280px,1.2fr)!important}.page-services .service-icon{display:none!important}
 .realisation-layout{grid-template-columns:1fr!important}.page-projects .projects-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* V5 — Projet Boussole : aperçu réellement mobile et lisible */
@media (max-width: 767px) {
  .page-projects .realisation-preview,
  .page-projects .browser-frame {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .page-projects .browser-frame iframe {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 980px !important;
    transform: none !important;
    zoom: 1 !important;
    transform-origin: top left !important;
  }
  .page-projects .browser-bar { min-height: 34px; }
}
@media (max-width: 430px) {
  .page-projects .browser-frame iframe { height: 920px !important; }
}

/* V5 — Projet Boussole : aperçu réellement mobile et lisible */
@media (max-width: 767px) {
  .page-projects .realisation-preview, .page-projects .browser-frame {width:100%!important;max-width:100%!important;overflow:hidden!important;}
  .page-projects .browser-frame iframe {display:block!important;width:100%!important;min-width:0!important;height:980px!important;transform:none!important;zoom:1!important;transform-origin:top left!important;}
  .page-projects .browser-bar {min-height:34px;}
}
@media (max-width:430px) {.page-projects .browser-frame iframe {height:920px!important;}}

/* V6 — Lisibilité réelle sur téléphone : texte du SITE, pas seulement le mockup */
@media (max-width: 767px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { font-size: 17px !important; line-height: 1.65 !important; }
  p, li, label, input, textarea, select, button { font-size: 17px !important; line-height: 1.65 !important; }
  .eyebrow, .section-label, .realisation-kicker, .projects-number, .service-number { font-size: 13px !important; letter-spacing: .12em !important; }
  .hero-text, .realisation-lead { font-size: 18px !important; line-height: 1.65 !important; }
  .page-services .service-card p,
  .page-services .service-card li,
  .page-projects .projects-note,
  .realisation-details p,
  .category-info p,
  .price-card p,
  .price-card li,
  .timeline-item p,
  .value-card p,
  .contact-intro p,
  .legal-section p,
  .legal-section li { font-size: 17px !important; line-height: 1.65 !important; }
  .price-card .price-note, .realisation-confidential, .review-source { font-size: 14px !important; }
  .preview-caption { font-size: 14px !important; }
  .footer, .footer a, .footer p { font-size: 15px !important; line-height: 1.6 !important; }
}

/* V7 — vraie lisibilité mobile + aperçu Boussole natif (pas d'iframe miniature) */
.mobile-boussole-preview{display:none}
@media (max-width: 900px){
  html{-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important}
  body{font-size:19px!important;line-height:1.65!important}
  p,li,label,input,textarea,select,button,.service-card p,.service-card li,.timeline-item p,.realisation-details p,.category-info p,.price-card p,.price-card li{font-size:19px!important;line-height:1.65!important}
  .footer,.footer a,.footer p{font-size:16px!important;line-height:1.6!important}
  .section-label,.eyebrow,.realisation-kicker{font-size:13px!important}
  .page-projects .browser-frame iframe,.page-projects .browser-bar{display:none!important}
  .page-projects .browser-frame{background:#f8f3e9!important;border-radius:12px!important;overflow:hidden!important;height:auto!important;transform:none!important}
  .page-projects .mobile-boussole-preview{display:block!important;padding:24px 20px 26px;color:#171513;background:#f8f3e9;font-family:Arial,sans-serif}
  .mbp-top{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d8d0c4;padding-bottom:16px;margin-bottom:22px}.mbp-top strong{font-family:Georgia,serif;font-size:21px}.mbp-top span{background:#9e2e22;color:#fff;padding:10px 13px;font-size:13px;font-weight:700}
  .mobile-boussole-preview small{font-size:13px!important;letter-spacing:.12em;font-weight:800;color:#9e2e22}.mobile-boussole-preview h3{font-family:Georgia,serif;font-size:clamp(42px,11vw,58px)!important;line-height:.94;margin:18px 0}.mobile-boussole-preview h3 em{color:#9e2e22;font-weight:400}.mobile-boussole-preview>p{font-size:17px!important;line-height:1.55!important;max-width:34em}
  .mbp-board{margin-top:28px;background:#171513;color:#f8f3e9;padding:22px}.mbp-board>b{font-size:13px;letter-spacing:.12em}.mbp-board h4{font-family:Georgia,serif;font-size:27px;line-height:1.05;margin:10px 0 20px}.mbp-board>div{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #514a43}.mbp-board span{font-size:13px;padding:15px 8px;border-bottom:1px solid #514a43}.mbp-board span:nth-child(odd){border-right:1px solid #514a43}.mbp-board strong{display:block;font-size:27px;margin-top:6px}
}
@media(max-width:430px){body,p,li,label,input,textarea,select,button,.service-card p,.service-card li,.timeline-item p,.realisation-details p,.category-info p,.price-card p,.price-card li{font-size:18px!important}.mobile-boussole-preview{padding:20px 16px 22px!important}}

/* =========================================================
   V8 — MOBILE/TABLETTE RÉEL : certains navigateurs Android
   exposent un viewport CSS proche de 980px. On bascule donc
   la mise en page tactile jusqu'à 1100px.
   ========================================================= */
@media (max-width:1100px){
  html{-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important}
  body{font-size:20px!important;line-height:1.65!important}
  p,li,label,input,textarea,select,button{font-size:20px!important;line-height:1.65!important}
  .container{max-width:100%!important}
  section{padding-left:22px!important;padding-right:22px!important}

  /* A propos */
  .page-about .about-section{display:flex!important;flex-direction:column!important;padding:64px 22px 80px!important}
  .page-about .about-photo{width:min(100%,460px)!important;height:auto!important;aspect-ratio:4/5;margin:0 auto!important}
  .page-about .about-content{width:100%!important;margin:0!important;padding:42px 0 0!important;background:transparent!important}
  .page-about .about-content>p:not(.eyebrow){font-size:20px!important;line-height:1.7!important}
  .page-about .values-grid{grid-template-columns:1fr 1fr!important}

  /* Services */
  .page-services .section-heading{display:block!important;text-align:left!important}
  .page-services .services-grid{display:block!important}
  .page-services .service-card{display:flex!important;flex-direction:column!important;gap:12px!important;padding:30px 0!important}
  .page-services .service-card>*{width:100%!important;grid-column:auto!important}
  .page-services .service-number{font-size:14px!important}
  .page-services .service-card h3{font-size:30px!important;line-height:1.1!important}
  .page-services .service-card p,.page-services .service-card li,.page-services .service-card>a{font-size:20px!important;line-height:1.6!important}

  /* Méthode */
  .page-method .methode-intro{padding:70px 22px 60px!important}
  .page-method .methode-intro p{font-size:20px!important;line-height:1.65!important;color:#eef3f6!important}
  .page-method .timeline{margin:50px 22px 80px!important}
  .page-method .timeline-item{padding:12px 0 44px 44px!important}
  .page-method .timeline-item h2,.page-method .timeline-item h3{font-size:27px!important}
  .page-method .timeline-item p,.page-method .timeline-item li{font-size:20px!important;line-height:1.65!important}

  /* Engagements */
  .page-engagements .services-grid{grid-template-columns:1fr!important}
  .page-engagements .service-card,.page-engagements .service-card:nth-child(2n){margin-top:0!important;padding:30px 24px!important}
  .page-engagements .service-card h3{font-size:28px!important}
  .page-engagements .service-card p{font-size:20px!important;line-height:1.65!important}

  /* Tarifs */
  .page-pricing .pricing-heading{display:block!important}
  .page-pricing .pricing-grid{grid-template-columns:1fr!important}
  .page-pricing .price-card{padding:30px 24px!important}
  .page-pricing .price-card p,.page-pricing .price-card li{font-size:20px!important;line-height:1.6!important}

  /* Contact */
  .page-contact .contact-section{display:flex!important;flex-direction:column!important;padding:64px 22px 90px!important}
  .page-contact .contact-intro{position:relative!important;top:auto!important;width:100%!important;padding:38px 28px!important}
  .page-contact .contact-form{width:100%!important;padding:38px 28px!important}
  .page-contact .contact-intro p,.page-contact .contact-form label,.page-contact .contact-form input,.page-contact .contact-form textarea{font-size:20px!important}

  /* Accueil */
  .hero{display:flex!important;flex-direction:column!important;padding:58px 22px!important}
  .hero-text,.hero-photo{width:100%!important;max-width:100%!important}
  .reviews-grid{grid-template-columns:1fr!important}
  .review-card p{font-size:20px!important;line-height:1.65!important}

  /* Projet Boussole : retrait du mockup problématique sur tactile */
  .page-projects .realisation-preview{display:none!important}
  .page-projects .realisation-layout{display:block!important}
  .page-projects .realisation-copy{width:100%!important;max-width:850px!important}
  .page-projects .realisation-copy p,.page-projects .realisation-details p{font-size:20px!important;line-height:1.65!important}

  /* Blog et textes généraux */
  .blog-card p,.blog-list p,.article-card p,.article-card a,.legal-section p,.legal-section li{font-size:20px!important;line-height:1.65!important}

  .footer{grid-template-columns:1fr!important;gap:26px!important;padding:44px 22px!important}
  .footer,.footer a,.footer p{font-size:18px!important;line-height:1.6!important}
}

@media (max-width:600px){
  body,p,li,label,input,textarea,select,button{font-size:18px!important}
  .page-about .values-grid{grid-template-columns:1fr!important}
  .page-services .service-card p,.page-services .service-card li,.page-method .timeline-item p,.page-method .timeline-item li,.page-engagements .service-card p,.page-pricing .price-card p,.page-pricing .price-card li{font-size:18px!important}
}


/* =========================================================
   V12 — correctifs finaux responsive + Projet Boussole
   ========================================================= */
.realisation-photo{display:block!important;width:100%;max-width:760px;margin:0 auto;text-decoration:none;color:inherit}
.realisation-photo img{display:block!important;width:100%!important;height:auto!important;object-fit:contain!important;border-radius:14px;box-shadow:0 24px 60px rgba(15,36,55,.18)}
.preview-caption{display:flex;justify-content:space-between;gap:16px;padding-top:12px;color:#fff}

/* Ordinateur : navigation complète, jamais de hamburger */
@media (min-width:901px){
  .menu-toggle{display:none!important;visibility:hidden!important}
  .navigation{display:flex!important;visibility:visible!important}
}

/* Tablette et téléphone : hamburger */
@media (max-width:900px){
  .menu-toggle{display:block!important;visibility:visible!important}
  .navigation{display:none!important}
  .navigation.navigation-ouverte{display:flex!important}
}

/* Projet Boussole : la photo est visible sur TOUS les écrans */
.page-projects .realisation-preview.realisation-photo{display:block!important}
@media (max-width:900px){
  .page-projects .realisation-preview.realisation-photo{max-width:100%!important;margin:28px auto 0!important}
  .page-projects .realisation-layout{display:block!important}
}

/* Lisibilité mobile globale — toutes les pages utilisant la feuille principale */
@media (max-width:600px){
  html{-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important}
  body{font-size:18px!important;line-height:1.6!important}
  p,li,label,input,textarea,select,button,a{line-height:1.55}
  main p,main li,main label,main input,main textarea,main select{font-size:18px!important}
  main h1{font-size:clamp(36px,10vw,48px)!important;line-height:1.08!important}
  main h2{font-size:clamp(30px,8.5vw,40px)!important;line-height:1.12!important}
  main h3{font-size:clamp(23px,6.5vw,30px)!important;line-height:1.18!important}
  .button,.nav-button,.page-projects .button{font-size:16px!important}
  .section-label,.eyebrow,.realisation-kicker{font-size:13px!important}
  .page-projects .realisation-copy p,.page-projects .realisation-details p,
  .page-services .service-card p,.page-services .service-card li,
  .page-method .timeline-item p,.page-method .timeline-item li,
  .page-engagements .service-card p,.page-pricing .price-card p,.page-pricing .price-card li,
  .page-about .about-content p,.page-contact .contact-intro p,
  .blog-list p,.article-card p{font-size:18px!important;line-height:1.6!important}
  .footer,.footer a,.footer p{font-size:15px!important;line-height:1.55!important}
}

/* =========================================================
   V13 — navigation stricte + typographie mobile renforcée
   ========================================================= */
/* Téléphone/tablette : uniquement hamburger */
@media (max-width:900px){
  .header .menu-toggle{display:block!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}
  .header .navigation{display:none!important;visibility:hidden!important}
  .header .navigation.navigation-ouverte{display:flex!important;visibility:visible!important;flex-direction:column!important;position:absolute!important;top:100%!important;left:0!important;right:0!important;background:#153552!important;z-index:9999!important}
  .header .navigation.navigation-ouverte a{font-size:19px!important;line-height:1.35!important;padding:13px 18px!important}
}
/* Ordinateur : uniquement menu horizontal */
@media (min-width:901px){
  .header .menu-toggle{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;width:0!important;height:0!important;padding:0!important;margin:0!important;overflow:hidden!important}
  .header .navigation,.header .navigation.navigation-ouverte{display:flex!important;visibility:visible!important;opacity:1!important;position:static!important;flex-direction:row!important;background:transparent!important}
}
/* Mobile : corps de texte nettement plus grand */
@media (max-width:600px){
  html{font-size:20px!important;-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important}
  body{font-size:20px!important;line-height:1.65!important}
  main p,main li,main label,main input,main textarea,main select,
  .page-projects .realisation-copy p,.page-projects .realisation-details p,
  .page-services .service-card p,.page-services .service-card li,
  .page-method .timeline-item p,.page-method .timeline-item li,
  .page-engagements .service-card p,.page-pricing .price-card p,.page-pricing .price-card li,
  .page-about .about-content p,.page-contact .contact-intro p,
  .blog-list p,.article-card p,.legal-section p,.legal-section li{font-size:20px!important;line-height:1.65!important}
  main h1{font-size:clamp(40px,11vw,52px)!important;line-height:1.06!important}
  main h2{font-size:clamp(34px,9.5vw,44px)!important;line-height:1.1!important}
  main h3{font-size:clamp(27px,7.5vw,34px)!important;line-height:1.14!important}
  .button,.nav-button,.page-projects .button,main button{font-size:18px!important}
  .section-label,.eyebrow,.realisation-kicker{font-size:14px!important}
  .footer,.footer a,.footer p{font-size:17px!important;line-height:1.6!important}
}

/* =========================================================
   V14 — audit mobile Solocal : lisibilité + zones tactiles
   ========================================================= */
@media (max-width:600px){
  html{font-size:21px!important;-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important}
  body{font-size:21px!important;line-height:1.65!important}
  main p,main li,main label,main input,main textarea,main select,
  main a:not(.button):not(.nav-button),main span:not(.service-number):not(.projects-number),
  .page-projects .realisation-copy p,.page-projects .realisation-details p,
  .page-services .service-card p,.page-services .service-card li,
  .page-method .timeline-item p,.page-method .timeline-item li,
  .page-engagements .service-card p,.page-pricing .price-card p,.page-pricing .price-card li,
  .page-about .about-content p,.page-contact .contact-intro p,
  .blog-list p,.article-card p,.legal-section p,.legal-section li{font-size:21px!important;line-height:1.65!important}
  main small,.microcopy,.price-note,.review-source,.preview-caption,.realisation-confidential,
  .footer small{font-size:16px!important;line-height:1.5!important}
  main h1{font-size:clamp(42px,11.5vw,54px)!important;line-height:1.05!important}
  main h2{font-size:clamp(35px,9.8vw,46px)!important;line-height:1.09!important}
  main h3{font-size:clamp(28px,7.8vw,36px)!important;line-height:1.13!important}
  .section-label,.eyebrow,.realisation-kicker{font-size:15px!important}
  .button,.nav-button,main button,.header .menu-toggle{min-width:48px;min-height:48px;font-size:18px!important}
  .header .navigation.navigation-ouverte a{font-size:20px!important;min-height:48px!important;display:flex!important;align-items:center!important}
  .footer,.footer a,.footer p{font-size:18px!important;line-height:1.6!important}
}

/* =========================================================
   V15 — Audit Solocal : lisibilité mobile + cibles tactiles
   ========================================================= */
@media (max-width:600px){
  html{font-size:22px!important;-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important}
  body{font-size:22px!important;line-height:1.68!important}
  main p,main li,main label,main input,main textarea,main select,
  main a:not(.button):not(.nav-button),main span:not(.service-number):not(.projects-number),
  .page-projects .realisation-copy p,.page-projects .realisation-details p,
  .page-services .service-card p,.page-services .service-card li,
  .page-method .timeline-item p,.page-method .timeline-item li,
  .page-engagements .service-card p,.page-pricing .price-card p,.page-pricing .price-card li,
  .page-about .about-content p,.page-contact .contact-intro p,
  .blog-list p,.article-card p,.legal-section p,.legal-section li{font-size:22px!important;line-height:1.68!important}
  main small,.microcopy,.price-note,.review-source,.preview-caption,.realisation-confidential,
  .footer small,.footer-legal,.footer-legal a{font-size:17px!important;line-height:1.55!important}
  .section-label,.eyebrow,.realisation-kicker{font-size:16px!important;line-height:1.4!important}
  .button,.nav-button,main button,.header .menu-toggle{min-width:48px!important;min-height:48px!important;font-size:19px!important}
  main a:not(.button):not(.nav-button){min-height:48px}
  .header .navigation.navigation-ouverte a{font-size:21px!important;min-height:52px!important;padding:14px 20px!important}
  .footer,.footer a,.footer p{font-size:19px!important;line-height:1.6!important}
}


/* =========================================================
   V16 — Typographie mobile globale, toutes les pages
   ========================================================= */
@media (max-width:600px){
  html{font-size:23px!important;-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important}
  body{font-size:23px!important;line-height:1.68!important}
  body main p,body main li,body main dt,body main dd,body main label,
  body main input,body main textarea,body main select,body main option,
  body main blockquote,body main figcaption,body main td,body main th,
  body main a:not(.button):not(.nav-button),body main span:not(.service-number):not(.projects-number),
  body .page-projects .realisation-copy p,body .page-projects .realisation-details p,
  body .page-services .service-card p,body .page-services .service-card li,
  body .page-method .timeline-item p,body .page-method .timeline-item li,
  body .page-engagements .service-card p,body .page-pricing .price-card p,body .page-pricing .price-card li,
  body .page-about .about-content p,body .page-contact .contact-intro p,
  body .blog-list p,body .article-card p,body .legal-section p,body .legal-section li{
    font-size:23px!important;line-height:1.68!important
  }
  body main small,body main .microcopy,body main .price-note,body main .review-source,
  body main .preview-caption,body main .realisation-confidential,body main .section-label,
  body main .eyebrow,body main .realisation-kicker,body .footer small,body .footer-legal,body .footer-legal a{
    font-size:18px!important;line-height:1.5!important
  }
  body main h1{font-size:clamp(43px,11.8vw,56px)!important;line-height:1.05!important}
  body main h2{font-size:clamp(36px,10vw,48px)!important;line-height:1.09!important}
  body main h3{font-size:clamp(29px,8vw,38px)!important;line-height:1.13!important}
  body main h4,body main h5,body main h6{font-size:25px!important;line-height:1.2!important}
  body .button,body .nav-button,body main button,body input[type="submit"],body input[type="button"]{
    font-size:20px!important;line-height:1.25!important;min-height:52px!important
  }
  body .header .navigation.navigation-ouverte a{font-size:22px!important;line-height:1.35!important;min-height:52px!important}
  body .footer,body .footer a,body .footer p,body .footer span{font-size:20px!important;line-height:1.6!important}
}

/* V19 — lisibilite mobile: tailles uniquement, aucun changement de performance */
@media (max-width: 767px) {
  body { font-size: 18px; }
  p, li, dd, dt, label, input, textarea, select { font-size: max(16px, 1em); }
  small, figcaption, .caption, .microcopy, .eyebrow, .tag, .badge, .meta, .kicker { font-size: 14px !important; line-height: 1.45; }
  a, button { font-size: max(16px, 1em); }
}

/* V20 — Accessibilité PageSpeed : contraste uniquement */
em { color: var(--dore-texte); }
.nav-button { color: var(--bleu-marine-fonce); }
.cta-section .eyebrow,
.cta-section em { color: #E3BD5B; }


/* V22 — CORRECTION MENU HAMBURGER UNIQUEMENT
   Certains navigateurs intégrés Android utilisent un viewport CSS plus large.
   Le basculement mobile/tablette est donc fixé à 1100 px. */
@media (max-width:1100px){
  .header .menu-toggle{display:block!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;width:auto!important;height:auto!important;min-width:48px!important;min-height:48px!important;padding:8px!important;margin:0!important;overflow:visible!important;position:relative!important;z-index:10001!important}
  .header .navigation{display:none!important;visibility:hidden!important}
  .header .navigation.navigation-ouverte{display:flex!important;visibility:visible!important;flex-direction:column!important;position:absolute!important;top:100%!important;left:0!important;right:0!important;background:#153552!important;z-index:9999!important}
}
@media (min-width:1101px){
  .header .menu-toggle{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;width:0!important;height:0!important;min-width:0!important;min-height:0!important;padding:0!important;margin:0!important;overflow:hidden!important}
  .header .navigation,.header .navigation.navigation-ouverte{display:flex!important;visibility:visible!important;opacity:1!important;position:static!important;flex-direction:row!important;background:transparent!important}
}

/* Indication de défilement pour le tableau comparateur sur mobile */
@media (max-width: 700px) {
  .scroll-hint-mobile { display: block !important; }
}

/* Comparateur de tarifs : cartes sur mobile, vrai tableau sur tablette/ordinateur */
@media (max-width: 700px) {
  .comparateur-cartes-mobile { display: block !important; }
  .comparateur-tableau-desktop { display: none !important; }
}

/* Corrige le ruban "Création indépendante • Mayenne" coupé sur la photo hero.
   L'image a déjà son propre arrondi (ligne ~1468), donc on peut laisser
   le conteneur visible sans perdre l'effet arrondi. */
.hero-photo { overflow: visible !important; }

/* Correction du chevauchement titre/texte sur les cartes de Nos Services,
   version ordinateur. La grille définissait 5 colonnes pour 6 éléments enfants
   (numéro, icône, titre, texte, liste, lien), ce qui causait un écrasement.
   On force ici un placement explicite, sans ambiguïté. */
@media (min-width: 901px) {
  .page-services .service-card {
    display: grid !important;
    grid-template-columns: 60px 50px minmax(160px, 0.9fr) minmax(280px, 1.3fr) 130px !important;
    grid-template-rows: auto auto auto !important;
    align-items: start !important;
    gap: 8px 20px !important;
  }
  .page-services .service-number { position: static !important; grid-column: 1 !important; grid-row: 1 / 4 !important; align-self: center !important; justify-self: start !important; }
  .page-services .service-icon { grid-column: 2 !important; grid-row: 1 / 4 !important; }
  .page-services .service-card h3 { grid-column: 3 !important; grid-row: 1 !important; margin: 0; }
  .page-services .service-card p { grid-column: 3 !important; grid-row: 2 !important; margin: 6px 0 0; }
  .page-services .service-card p ~ p { grid-row: 3 !important; margin: 4px 0 0; }
  .page-services .service-card ul { grid-column: 4 !important; grid-row: 1 / 4 !important; align-self: center; margin: 0 !important; }
  .page-services .service-card > a { grid-column: 5 !important; grid-row: 1 / 4 !important; align-self: center; justify-self: end; white-space: nowrap; }
}

/* ===== Taille de texte minimum garantie à 17px, partout, en priorité absolue ===== */
body, p, li, a, span, label, small, strong, em, td, th, button, input, textarea, select {
  font-size: max(17px, 1em) !important;
}
h1 { font-size: clamp(34px, 6vw, 64px) !important; }
h2 { font-size: clamp(28px, 5vw, 48px) !important; }
h3 { font-size: clamp(20px, 3.5vw, 28px) !important; }

/* ===== RÈGLE FINALE ET DÉFINITIVE — Nos Services sur mobile/tablette =====
   Remplace toutes les règles précédentes contradictoires (15+ media queries
   empilées). Simple empilement vertical, sans grille, aucune ambiguïté possible. */
@media (max-width: 900px) {
  .page-services .service-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 30px 0 !important;
    width: 100% !important;
  }
  .page-services .service-card > * {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    justify-self: auto !important;
    align-self: auto !important;
  }
  .page-services .service-number { order: -1; font-size: 14px; }
  .page-services .service-icon { display: none !important; }
  .page-services .service-card h3 { order: 0; font-size: 24px !important; line-height: 1.2 !important; }
  .page-services .service-card p { order: 1; font-size: 17px !important; line-height: 1.5 !important; }
  .page-services .service-card ul { order: 2; padding-left: 20px !important; }
  .page-services .service-card li { font-size: 17px !important; }
  .page-services .service-card > a { order: 3; margin-top: 8px !important; }
}

/* ===== Lisibilité mobile renforcée — priorité maximale =====
   Le seuil de 17px était techniquement respecté mais jugé encore
   trop juste pour une lecture confortable sans zoomer. On remonte
   le texte courant et on clarifie mieux l'écart avec les titres. */
@media (max-width: 900px) {
  body, p, li, a, span, label, small, strong, em, td, th, button, input, textarea, select {
    font-size: max(18px, 1em) !important;
    line-height: 1.55 !important;
  }
  h1 { font-size: clamp(32px, 9vw, 44px) !important; line-height: 1.15 !important; }
  h2 { font-size: clamp(26px, 7vw, 34px) !important; line-height: 1.2 !important; }
  h3 { font-size: clamp(21px, 5.5vw, 26px) !important; line-height: 1.25 !important; }
}

/* Correction badge "PROJET VEDETTE" coupé sur mobile — empilement vertical au lieu de côte à côte */
@media (max-width: 500px) {
  .realisation-kicker {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .realisation-status {
    white-space: normal !important;
  }
}

/* Champs en erreur — visible, tous surlignés en même temps */
#contact-form input.invalid,
#contact-form textarea.invalid,
#contact-form select.invalid {
  border-color: #b53b3b !important;
  border-width: 2px !important;
  background-color: rgba(181, 59, 59, 0.06) !important;
}

/* Protection défensive contre la troncature de texte (repérée sur Safari iOS,
   non reproductible sur les navigateurs de test) — force le retour à la ligne
   plutôt que de laisser un mot déborder et se faire couper. */
h1, h2, h3, p, li, span, a, div {
  overflow-wrap: break-word;
  word-break: normal;
}

/* ===== Styles des articles de blog — déplacés du <style> inline de chaque
   article vers ce fichier externe unique, pour éviter les incohérences de
   rendu observées dans le navigateur intégré de Facebook. ===== */
.article { max-width: 760px; margin: 0 auto; padding: 60px 24px 100px; }
.article .eyebrow { color: var(--dore); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
.article h1 { color: var(--bleu-marine-fonce); font-size: 32px; line-height: 1.25; margin-bottom: 16px; }
.article .meta { color: var(--texte-clair); font-size: 13px; margin-bottom: 36px; }
.article h2 { color: var(--bleu-marine-fonce); font-size: 22px; margin: 40px 0 14px; }
.article p { color: var(--texte); font-size: 15.5px; line-height: 1.75; margin-bottom: 16px; }
.article ul { margin: 0 0 20px 20px; }
.article li { color: var(--texte); font-size: 15.5px; line-height: 1.7; margin-bottom: 8px; }
.article-cta { background: var(--bleu-clair); border-radius: 14px; padding: 26px 28px; margin-top: 44px; text-align: center; }
.article-cta a { display: inline-block; margin-top: 12px; background: var(--dore); color: #fff; padding: 12px 26px; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 14px; }
.back-link { display: inline-block; margin-bottom: 30px; color: var(--bleu-marine); font-size: 14px; text-decoration: none; }
.article table { width: 100%; border-collapse: collapse; margin: 20px 0 28px; font-size: 14.5px; }
.article th, .article td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--bleu-clair); }
.article th { color: var(--bleu-marine-fonce); }

@media (max-width: 767px) {
  .article p, .article li { font-size: max(16px, 1em); }
  .article .eyebrow, .article .meta { font-size: 14px !important; line-height: 1.45; }
}

/* ===== Page liste du blog — déplacé du <style> inline vers ce fichier externe ===== */
.blog-list { max-width: 900px; margin: 0 auto; padding: 60px 24px 100px; }
.blog-list h1 { color: var(--bleu-marine-fonce); font-size: 32px; margin-bottom: 10px; }
.blog-list > p { color: var(--texte-clair); margin-bottom: 40px; }
.blog-card { display: block; text-decoration: none; color: inherit; background: var(--creme); border-radius: 14px; padding: 28px 30px; margin-bottom: 20px; transition: transform .15s ease; }
.blog-card:hover { transform: translateY(-2px); }
.blog-card .blog-date { font-size: 13px; color: var(--dore); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.blog-card h2 { color: var(--bleu-marine-fonce); font-size: 21px; margin: 8px 0 10px; }
.blog-card p { color: var(--texte-clair); font-size: 14.5px; margin: 0; }

@media (max-width: 767px) {
  .blog-card p { font-size: max(16px, 1em); }
  .blog-card .blog-date { font-size: 14px !important; line-height: 1.45; }
}

/* Comparatif IA vs Humain (article blog) : cartes sur mobile, tableau sur desktop */
.comparatif-cartes-mobile { display: none; }
.comparatif-carte { border: 1px solid var(--bleu-clair); border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.comparatif-carte-humain { border: 2px solid var(--dore); background: var(--bleu-clair); }
.comparatif-carte-titre { font-weight: 700; color: var(--bleu-marine-fonce); font-size: 17px; margin-bottom: 12px; }
.comparatif-carte ul { margin: 0; padding-left: 18px; }
.comparatif-carte li { font-size: 14.5px; margin-bottom: 8px; }

@media (max-width: 700px) {
  .comparatif-cartes-mobile { display: block; }
  .comparatif-tableau-desktop { display: none; }
}

/* ===== RÈGLE FINALE ET DÉFINITIVE — page liste du blog =====
   Remplace l'empilement de règles contradictoires trouvées plus haut
   (jusqu'à 4 tailles de police différentes pour le même breakpoint).
   Garantit qu'aucun débordement horizontal n'est possible, à aucune
   largeur d'écran, même les plus étroites (320px). */
.blog-list, .blog-list * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.blog-list h1 {
  font-size: clamp(24px, 7vw, 32px) !important;
  overflow-wrap: break-word !important;
}
.blog-list > p,
.blog-card p {
  font-size: 16px !important;
  line-height: 1.6 !important;
}

/* ===== RÈGLE FINALE — Carte flottante "Un site qui vous ressemble" =====
   Repositionnée pour ne jamais chevaucher le bas du visage sur la photo
   hero, quelle que soit la taille d'écran. */
.floating-card {
  bottom: -55px !important;
  left: 15px !important;
  right: auto !important;
  top: auto !important;
}
@media (max-width: 900px) {
  .floating-card {
    bottom: -25px !important;
    left: 10px !important;
  }
}

/* =========================================================
   PAGE MÉTHODE — styles manquants (étapes, qui-fournit-quoi,
   tarifs/délais) + corrections d'affichage mobile
   ========================================================= */

/* --- Étapes numérotées (01 à 14) --- */
.methode-steps {
  max-width: 900px;
  margin: 60px auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.methode-step {
  display: flex;
  gap: 22px;
  align-items: flex-start;
}
.methode-step-num {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bleu-clair);
  color: var(--dore-texte);
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.methode-step h3 {
  color: var(--bleu-marine-fonce);
  font-size: 19px;
  margin: 4px 0 8px;
}
.methode-step p {
  color: var(--texte-clair);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 10px;
}
.methode-step ul {
  margin: 6px 0 10px;
  padding-left: 20px;
  color: var(--texte-clair);
  font-size: 14.5px;
  line-height: 1.85;
}
.methode-step-example {
  background: var(--bleu-clair);
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 14px;
  color: var(--bleu-marine-fonce);
  margin-top: 8px;
}

/* --- Qui fournit quoi (2 colonnes) --- */
.qfq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* --- Tarifs / délais (bandeau navy) --- */
.methode-delais {
  background: var(--bleu-marine-fonce);
  color: #fff;
  padding: clamp(70px, 8vw, 110px) 24px;
}
.methode-delais-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.methode-delais h2 {
  color: #fff;
  font-size: clamp(30px, 4vw, 44px);
  margin-bottom: 14px;
}
.methode-delais-intro {
  color: #d5e0e8;
  max-width: 640px;
  margin: 0 auto 40px;
  font-size: 15px;
  line-height: 1.7;
}
.methode-delais-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.methode-delais-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 26px 20px;
  text-align: left;
}
.methode-delais-card strong {
  display: block;
  color: var(--dore);
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.methode-delais-card span {
  display: block;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}
.methode-delais-card p {
  font-size: 13.5px;
  color: #d5e0e8;
  line-height: 1.6;
  margin: 0;
}
.methode-delais-note {
  margin-top: 36px;
  font-size: 13px;
  color: #9fb3c4;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Accompagnement (liste finale) --- */
.methode-engagement {
  max-width: 800px;
  margin: 0 auto;
  padding: 70px 24px;
  text-align: center;
}
.methode-engagement h2 {
  color: var(--bleu-marine-fonce);
  font-size: clamp(28px, 3.5vw, 38px);
  margin: 10px 0 20px;
}
.methode-engagement ul {
  display: inline-block;
  text-align: left;
  margin: 10px auto 0;
  padding-left: 20px;
  color: var(--texte-clair);
  font-size: 15px;
  line-height: 1.9;
}

/* --- Corrections mobile --- */
/* V23 — Les 2 colonnes tassaient trop le texte sur certains téléphones Android
   dont le navigateur rapporte une largeur de viewport CSS plus large que la
   largeur réelle de l'écran (même cause que le seuil du menu hamburger,
   fixé à 1100px plus haut dans ce fichier). Seuil aligné sur 1100px pour
   éviter la même classe de bug ici : une seule colonne jusqu'à la vraie
   largeur bureau/tablette large. */
@media (max-width: 1100px) {
  .methode-delais-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
@media (max-width: 640px) {
  .qfq-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .methode-step {
    gap: 14px;
  }
  .methode-step-num {
    width: 40px;
    height: 40px;
    font-size: 15px;
  }
  .methode-step h3 {
    font-size: 17px;
  }
  .methode-delais-grid {
    /* Cartes assez denses en texte : 1 seule colonne dès qu'on quitte le
       format bureau/tablette, plutôt que 2 colonnes qui tassaient le texte
       sur la plupart des téléphones (largeur réelle souvent entre 360 et
       430px, donc bien au-dessus de l'ancien seuil de 420px). */
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* --- Correction : titre "Zones d'intervention" coupé en plein mot sur mobile --- */
/* Plusieurs media queries (max-width:600px) empilées plus haut dans ce fichier
   (corps de texte mobile V12/V13/V14) fixent toutes `main h2` en !important,
   la dernière l'emportant avec une taille assez grande (jusqu'à 46px). Sur
   certains téléphones, en Georgia (police du site), le mot "accompagnement"
   devient alors plus large que la largeur de l'écran une fois les marges
   retirées : le navigateur applique la césure de secours (overflow-wrap,
   ligne ~2168) en plein milieu du mot au lieu de renvoyer le mot entier à
   la ligne suivante, laissant un "t" tout seul. On réduit ici uniquement ce
   titre précis, sans toucher aux autres tailles de texte mobile. */
@media (max-width: 600px) {
  .zones-title {
    font-size: clamp(26px, 8vw, 34px) !important;
    line-height: 1.2 !important;
  }
}