:root {
  --bleu: #2A3E92; --encre: #1B2452; --nuit: #101425; --brume: #EEF2FB;
  --rouge: #D01010; --texte: #3A4152; --titre: #101425;
  --bord: #E4E8F2; --bord2: #C7D0E6; --clair: #DDE4F5; --clair2: #C9D2EA; --ciel: #C8D4F2; --muted: #8D97B8;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Source Sans 3', 'Segoe UI', Arial, sans-serif; color: var(--texte); background: #fff; line-height: 1.6; }
.serif { font-family: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; }
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 24px; }
a { color: var(--bleu); text-decoration: none; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; color: var(--titre); font-weight: 600; line-height: 1.15; }
h2 { font-size: clamp(27px, 3.2vw, 38px); }
h3 { font-family: 'Source Sans 3', 'Segoe UI', Arial, sans-serif; font-size: 19px; font-weight: 700; color: var(--encre); line-height: 1.35; }
p { margin: 10px 0 0 0; font-size: 16px; }
.eyebrow { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--bleu); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-size: 16px; font-weight: 700; padding: 15px 26px; border-radius: 8px; cursor: pointer; border: none; }
.btn-rouge { background: var(--rouge); color: #fff !important; box-shadow: 0 6px 18px rgba(0,0,0,0.22); }
.btn-contour { border: 1.5px solid rgba(255,255,255,0.55); color: #fff !important; }
.btn-contour-clair { border: 1.5px solid var(--bord2); color: var(--encre) !important; background: #fff; }
.btn-bleu { background: var(--bleu); color: #fff !important; }

/* Header */
header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--bord); }
/* L'en-tête n'est pas contraint par la bande de contenu : le logo
   s'aligne sur le bord gauche de la page, le téléphone sur le droit. */
header > .wrap { max-width: none; padding-left: 32px; padding-right: 32px; }
@media (max-width: 900px) { header > .wrap { padding-left: 24px; padding-right: 24px; } }
.header-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 0; }
.marque { display: flex; align-items: center; gap: 12px; }
.marque img { width: 48px; height: 48px; }
.marque .nom { font-family: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; font-size: 20px; font-weight: 600; color: var(--encre); line-height: 1.1; }
@media (max-width: 380px) { .marque .nom { font-size: 17px; white-space: nowrap; }
  .marque { gap: 9px; } .marque img { width: 40px; height: 40px; } }
.marque .role { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #6A7186; }
nav.desktop { display: flex; gap: 24px; font-size: 15px; font-weight: 600; }
nav.desktop a { color: var(--texte); }
nav.desktop a:hover { color: var(--bleu); }
.header-tel { display: inline-flex; align-items: center; gap: 8px; background: var(--rouge); color: #fff !important; font-size: 15px; font-weight: 700; padding: 12px 18px; border-radius: 8px; white-space: nowrap; }
.burger { display: none; position: relative; }
.burger summary { list-style: none; cursor: pointer; padding: 10px; display: flex; flex-direction: column; gap: 5px; }
.burger summary::-webkit-details-marker { display: none; }
.burger summary span { display: block; width: 24px; height: 2.5px; background: var(--encre); border-radius: 2px; }
.burger .menu { position: absolute; right: 0; top: 100%; background: #fff; border: 1px solid var(--bord); border-radius: 10px; box-shadow: 0 12px 30px rgba(27,36,82,0.14); padding: 10px; display: flex; flex-direction: column; min-width: 220px; }
.burger .menu a { padding: 12px 14px; font-weight: 600; color: var(--texte); border-radius: 7px; }
.burger .menu a:hover { background: var(--brume); }

/* Hero */
.hero { position: relative; background: var(--encre); color: #fff; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: url(/assets/dae21895f1549528.webp); background-size: cover; background-position: left bottom; }
/* Sur téléphone le hero est haut et étroit : cadrage portrait de la même scène. */
@media (max-width: 640px) { .hero::before { background-image: url(/assets/ee5c0f53bac00e41.webp); background-position: center bottom; } }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(16,20,37,0.84) 0%, rgba(27,36,82,0.62) 55%, rgba(27,36,82,0.30) 100%); }
.hero .wrap { position: relative; z-index: 2; display: flex; justify-content: flex-end; padding-top: 90px; padding-bottom: 84px; }
.hero-in { max-width: 720px; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 18px; }
.hero .eyebrow { color: var(--ciel); }
.hero h1 { color: #fff; font-size: clamp(32px, 4.6vw, 56px); line-height: 1.1; }
.hero .sous { font-size: 19px; color: var(--clair); max-width: 600px; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; margin-top: 6px; }
.hero-liste { display: flex; flex-direction: column; gap: 9px; align-items: flex-end; margin-top: 4px; }
.hero-liste div { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 600; color: #fff; }
.hero-liste .puce { color: var(--ciel); font-size: 20px; line-height: 1; }
.hero-liste .ouverture { font-size: 14px; font-weight: 600; color: var(--ciel) !important; margin-top: 2px; }
@media (max-width: 900px) {
  nav.desktop { display: none; }
  .header-tel span.txt { display: none; }
  .burger { display: block; }
  .hero::after { background: linear-gradient(180deg, rgba(16,20,37,0.72) 0%, rgba(27,36,82,0.44) 60%, rgba(27,36,82,0.24) 100%); }
  .hero .wrap { justify-content: flex-start; padding-top: 48px; padding-bottom: 44px; }
  .hero-in { text-align: left; align-items: flex-start; }
  .hero-btns { justify-content: flex-start; width: 100%; }
  .hero-btns .btn { width: 100%; }
  .hero-liste { align-items: flex-start; }
}

/* Bande guides */
.guides { background: var(--brume); padding: 26px 0 30px 0; }
.guides-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.guides-head a { font-size: 13px; font-weight: 600; white-space: nowrap; }
.chips { display: flex; gap: 12px; flex-wrap: wrap; }
.chips a { border: 1px solid var(--bord2); border-radius: 8px; padding: 12px 16px; color: var(--encre); font-size: 14px; font-weight: 600; background: #fff; }
.chips a:hover { border-color: var(--bleu); }

/* Sections */
section { padding: 64px 0; }
section.brume { background: var(--brume); }
section.texture { background: linear-gradient(180deg, rgba(255,255,255,0.80), rgba(238,242,251,0.75)), url(/assets/0ec1bbe609e4721a.webp); background-size: cover; }
.sec-head { margin-bottom: 28px; }
.sec-head.centre { text-align: center; }
.sec-head h2 { margin-top: 8px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 36px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
@media (max-width: 900px) { .grid2, .grid3 { grid-template-columns: 1fr; gap: 22px; } .grid4 { grid-template-columns: repeat(2, minmax(0,1fr)); } section { padding: 44px 0; } }
@media (max-width: 480px) { .grid4 { grid-template-columns: 1fr; } }

/* Cabinet */
.cabinet { display: flex; align-items: center; gap: 56px; }
.portrait { flex-shrink: 0; }
.portrait img.photo { width: 300px; height: 380px; object-fit: cover; object-position: top; border-radius: 16px; display: block; }
.lien-fleche { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; margin-top: 14px; }
@media (max-width: 900px) { .cabinet { flex-direction: column; align-items: flex-start; } .portrait { align-self: center; } .portrait img.photo { width: min(340px, 82vw); height: auto; aspect-ratio: 4/5; } }

/* Bandes CTA */
.cta-bande { background: var(--encre); color: #fff; padding: 44px 0; }
.cta-in { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.cta-in h2 { color: #fff; font-size: clamp(22px, 2.6vw, 30px); }
.cta-in p { color: var(--clair2); }
@media (max-width: 900px) { .cta-in { flex-direction: column; align-items: stretch; text-align: left; } }

/* Cards domaines / valeurs / FAQ */
.card { background: #fff; border: 1px solid var(--bord); border-radius: 12px; padding: 26px; box-shadow: 0 6px 18px rgba(27,36,82,0.06); }
.card h3.dom { font-family: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; font-size: 24px; font-weight: 600; color: var(--encre); }
.card img.ill { width: 100%; height: 180px; object-fit: cover; border-radius: 8px; margin-bottom: 16px; display: block; }
.card .lien-fleche { margin-top: 12px; font-size: 14px; }
.card h3.val { font-family: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; font-size: 21px; color: var(--bleu); font-weight: 600; }
.card p.val { font-size: 14px; }
.grid-dom { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
@media (max-width: 900px) { .grid-dom { grid-template-columns: 1fr; } }

/* Étapes */
.etapes { display: flex; gap: 44px; margin-bottom: 30px; }
.etape .num { font-family: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; font-size: 42px; color: var(--bord2); line-height: 1; }
.etape b { display: block; font-size: 18px; color: var(--encre); margin-top: 8px; }
.etape p { font-size: 15px; }
@media (max-width: 900px) { .etapes { flex-direction: column; gap: 22px; } }

/* Contact bandeau */
.confidentiel { display: flex; align-items: center; justify-content: space-between; gap: 22px; background: var(--brume); border-radius: 12px; padding: 24px 28px; margin-top: 30px; }
.confidentiel .t { font-family: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; font-size: 23px; font-weight: 600; color: var(--encre); }
@media (max-width: 900px) { .confidentiel { flex-direction: column; align-items: stretch; text-align: left; } }

/* Avis Google : section dediee, sans citation d'avis (decision Paul 29/08/2026) */
.avis-sec { text-align: center; }
.avis-note { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin-top: 10px; }
.avis-note .chiffre { font-family: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; font-size: clamp(46px, 6vw, 64px); font-weight: 600; color: var(--encre); line-height: 1; }
.avis-note .sur { font-size: 17px; font-weight: 600; color: var(--muted); }
.avis-etoiles { font-size: 24px; letter-spacing: 4px; color: var(--bleu); margin-top: 6px; }
.avis-nb { font-size: 16.5px; font-weight: 600; color: var(--texte); margin-top: 8px; }
.avis-lien { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; margin-top: 14px; }

/* FAQ */
.faq details { background: #fff; border: 1px solid var(--bord); border-radius: 12px; margin-bottom: 12px; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; font-size: 17px; font-weight: 700; color: var(--encre); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "›"; color: var(--bleu); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "⌄"; }
.faq .rep { padding: 0 22px 18px 22px; font-size: 15px; }
.faq-in { max-width: 860px; margin: 0 auto; }

/* Formulaire */
.form { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.form .ligne { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.form input, .form textarea { border: 1px solid var(--bord2); border-radius: 8px; padding: 14px 16px; font-size: 15px; font-family: inherit; color: var(--texte); width: 100%; }
.form textarea { min-height: 110px; resize: vertical; }
@media (max-width: 900px) { .form .ligne { grid-template-columns: 1fr; } .form .btn { width: 100%; } }

/* Footer */
footer { background: var(--nuit); color: var(--clair2); padding: 52px 0 0 0; }
.foot-grid { display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; }
.foot-col h4 { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.foot-col a, .foot-col div.l { display: block; font-size: 14px; color: var(--clair2); margin-bottom: 9px; }
.foot-marque { max-width: 320px; }
.foot-bas { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 36px; padding: 16px 0 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
@media (max-width: 900px) { .foot-grid { flex-direction: column; gap: 30px; } footer { padding-bottom: 70px; } }

/* Callbar mobile : n'apparaît qu'après le hero */
.callbar { display: none; }
@media (max-width: 640px) {
  .callbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff; border-top: 1px solid var(--bord); box-shadow: 0 -3px 12px rgba(0,0,0,0.09); padding: 8px 10px; transition: transform 0.25s ease; }
  .callbar.masquee { transform: translateY(110%); }
  .callbar-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--rouge); color: #fff !important; text-align: center; border-radius: 8px; padding: 13px 0; font-size: 16px; font-weight: 700; box-shadow: 0 4px 12px rgba(208,16,16,0.25); }
  body { padding-bottom: 62px; }
}

/* Sur téléphone, le hero de l'accueil occupe l'écran entier, quelle que soit la
   hauteur du téléphone. `svh` est la hauteur visible barre d'adresse déployée :
   contrairement à `vh`, le hero ne saute pas quand la barre se rétracte.
   `vh` reste écrit avant, comme repli pour les navigateurs anciens. */
@media (max-width: 640px) {
  .hero { min-height: calc(100vh - 72px); min-height: calc(100svh - 72px);
          display: flex; align-items: center; }
  .hero .wrap { width: 100%; padding-top: 26px; padding-bottom: 30px; }
  /* Le bloc de texte est centré : la hauteur en trop se partage au-dessus et
     en dessous, au lieu de s'accumuler en haut et de coller le texte au bas de
     l'écran. Les écarts entre le titre, la liste et le bouton grandissent avec
     la hauteur du téléphone, dans une fourchette bornée : sur un petit écran ils
     se resserrent, sur un grand ils respirent sans se disloquer. */
  /* Tout le bloc se dimensionne sur la hauteur de l'écran, pas sur une valeur
     fixe : sur un grand téléphone le texte grossit et les écarts s'ouvrent, de
     sorte que le hero se remplisse au lieu de laisser deux bandes vides. Les
     bornes basses protègent les petits écrans. */
  .hero-in { gap: clamp(14px, 3.6vh, 42px); }
  .hero-liste { gap: clamp(9px, 1.9vh, 21px); }
  .hero-btns { margin-top: clamp(4px, 2.2vh, 26px); }
  .hero .eyebrow { font-size: clamp(12px, 1.55vh, 15px); }
  .hero h1 { font-size: clamp(31px, 4.9vh, 47px); }
  .hero .sous { font-size: clamp(17px, 2.35vh, 22px); }
  .hero-liste div { font-size: clamp(16px, 2.25vh, 21px); }
  .hero-liste .ouverture { font-size: clamp(13px, 1.7vh, 16px); }
  .hero-btns .btn { font-size: clamp(16px, 2.15vh, 20px);
                    padding: clamp(13px, 1.9vh, 19px) 22px; }
  .hero::before { background-position: center 26%; }
  /* Voile dense au centre, là où se lit le texte ; plus léger en haut et en bas,
     où la photo reste seule. */
  .hero::after { background: linear-gradient(180deg,
      rgba(16,20,37,0.34) 0%, rgba(16,20,37,0.52) 16%, rgba(16,20,37,0.88) 34%,
      rgba(16,20,37,0.90) 74%, rgba(16,20,37,0.62) 100%); }
}