*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--laque); color: var(--porcelaine); font: 400 1.0625rem/1.65 var(--font-texte); }
body.nav-ouverte { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .2em; transition: color 180ms ease, opacity 180ms ease, text-decoration-thickness 180ms ease; }
a:hover { color: var(--dorure-vif); }
:is(.lait, .carte-fenetre, .modules, .message-formulaire) a:hover { color: inherit; text-decoration-thickness: .16em; }
.porte { transition: background-color 180ms ease; }
.porte:hover { background: var(--lait); color: var(--encre); }
.trois-portes .porte:first-child:hover { background: var(--laque-2); color: var(--porcelaine); }
:is(.lait, .porte, .carte-fenetre, .modules, .capture, .message-formulaire) :focus-visible,
.lait :focus-visible { outline-color: var(--encre); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p, blockquote { margin-top: 0; }
h1, h2, h3, .wordmark, .prix, .hero-ligne { font-family: var(--font-lettrage); font-weight: 400; }
h1 { margin-bottom: var(--s3); font-size: var(--fs-vitrine); line-height: .98; letter-spacing: .04em; text-transform: uppercase; }
h2 { margin: var(--s4) 0 var(--s2); font-size: var(--fs-enseigne); line-height: 1.08; letter-spacing: .04em; }
h3 { margin: var(--s3) 0 var(--s1); font-size: 1.35rem; line-height: 1.2; letter-spacing: .03em; }
p, li { max-width: 72ch; }
address { font-style: normal; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; top: var(--s2); left: var(--s2); transform: translateY(-200%); padding: .7rem 1rem; background: var(--dorure); color: var(--encre); }
.skip-link:focus { transform: translateY(0); }
.conteneur { width: min(100% - 2.5rem, 1160px); margin-inline: auto; }
.mesure { max-width: 75ch; }
.section { padding-block: var(--s5); }
.laque { background: var(--laque); color: var(--porcelaine); }
.lait { background: var(--lait); color: var(--encre); }
.texte-large { font-size: clamp(1.12rem, 2vw, 1.35rem); }
.chrome { margin-block: var(--s3); font-size: .8125rem; font-weight: 500; letter-spacing: .12em; }

.enseigne { position: sticky; z-index: 90; top: 0; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; min-height: 64px; padding-inline: .75rem; background: var(--laque); border-bottom: 1px solid var(--dorure); }
.wordmark { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; color: var(--dorure); font-size: 1.18rem; letter-spacing: .08em; text-align: center; text-decoration: none; text-transform: uppercase; }
.menu-bouton, .nav-fermer { display: grid; place-content: center; width: 44px; min-height: 44px; padding: .65rem; border: 0; background: transparent; color: var(--porcelaine); cursor: pointer; }
.menu-bouton span:not(.sr-only) { display: block; width: 22px; height: 1px; margin: 3px 0; background: currentColor; }
.enseigne-reserver { visibility: hidden; }
.panneau-nav { position: fixed; z-index: 100; inset: 0; display: flex; flex-direction: column; align-items: flex-start; padding: var(--s3) var(--s4) var(--s4); background: var(--laque); transform: translateX(-100%); visibility: hidden; transition: transform 550ms cubic-bezier(.22,1,.36,1), visibility 0s linear 550ms; }
.panneau-nav.ouvert { transform: translateX(0); visibility: visible; transition: transform 550ms cubic-bezier(.22,1,.36,1), visibility 0s; }
.nav-fermer { align-self: flex-end; font-size: 2rem; }
.panneau-nav ul { display: grid; gap: .25rem; width: 100%; margin: var(--s3) 0; padding: 0; list-style: none; }
.panneau-nav li { max-width: none; }
.panneau-nav li a { display: flex; align-items: center; min-height: 48px; font-family: var(--font-lettrage); font-size: clamp(1.35rem, 7vw, 2.4rem); letter-spacing: .04em; text-decoration: none; }

.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .72rem 1.25rem; border: 1px solid var(--dorure); border-radius: var(--r-pill); background: var(--dorure); color: var(--encre); font-size: .8125rem; font-weight: 700; letter-spacing: .12em; line-height: 1.2; text-align: center; text-decoration: none; text-transform: uppercase; transition: background-color 180ms ease, color 180ms ease, transform 180ms ease; }
.bouton:hover { background: var(--dorure-vif); color: var(--encre); }
.bouton:active { transform: scale(.98); }
.bouton-fantome { background: transparent; color: var(--porcelaine); }
.lait .bouton-fantome { color: var(--encre); }
.bouton-petit { min-height: 44px; padding: .5rem 1rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.lien-action, .lien-texte { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

.hero { min-height: calc(100svh - 64px); padding: var(--s4) 0 var(--s5); background: var(--laque); }
.hero-grille { display: grid; gap: var(--s4); }
.mot-arque { width: min(100%, 520px); overflow: visible; }
.mot-arque text { fill: var(--dorure); font-family: var(--font-lettrage); font-size: 50px; letter-spacing: 4px; }
.hero-ligne { color: var(--dorure); font-size: clamp(1.4rem, 6vw, 2.2rem); letter-spacing: .04em; }
.fenetre { position: relative; overflow: hidden; min-height: 360px; margin: 0; border-radius: var(--r-vitrine); background: var(--laque-2); box-shadow: inset 0 0 0 2px var(--dorure); }
.fenetre::after, .carte-fenetre::after, .formation::after { position: absolute; inset: 0; pointer-events: none; content: ''; background: linear-gradient(120deg, rgba(255,255,255,.07), transparent 40%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); background-size: 230% 100%; }
.fenetre.reflet-passe::after, .carte-fenetre.reflet-passe::after, .formation.reflet-passe::after { animation: reflet 900ms ease both; }
@keyframes reflet { from { background-position: 100% 0; } to { background-position: 0 0; } }
.fenetre img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.monogramme { width: 100%; min-height: 440px; color: var(--laque-2); background: var(--laque-2); }
.monogramme text { fill: var(--dorure); font-family: var(--font-lettrage); font-size: 9rem; letter-spacing: -.08em; }

.trois-portes { display: grid; gap: var(--s2); }
.porte { display: block; min-height: 190px; padding: var(--s3); border-radius: var(--r-panel); background: var(--lait-2); color: var(--encre); text-decoration: none; }
.porte:first-child { min-height: 260px; background: var(--encre); color: var(--porcelaine); }
.porte h2 { color: inherit; }
.duo { display: grid; gap: var(--s4); align-items: center; }
.ardoise { margin: 0; padding: var(--s4); border-radius: var(--r-panel); background: var(--laque-2); }
.ardoise p { font-family: var(--font-lettrage); font-size: clamp(1.25rem, 3vw, 1.8rem); line-height: 1.45; }
.ardoise cite { color: var(--dorure); font-style: normal; }
.cartes-services, .formations, .galerie, .contact-grille { display: grid; gap: var(--s3); }
.carte-fenetre, .formation { position: relative; overflow: hidden; padding: var(--s3); border-radius: var(--r-panel); background: var(--lait-2); color: var(--encre); }
.prix { margin-bottom: var(--s2); font-size: var(--fs-prix); line-height: 1.05; }
.prix sup { position: relative; top: -.35em; font-size: .6em; }
.academy-bande { border-block: 1px solid var(--dorure); }
.sceau { width: min(70vw, 280px); margin-inline: auto; color: var(--dorure); }
.sceau circle { fill: none; stroke: currentColor; stroke-width: 2; }
.sceau text { fill: currentColor; font-family: var(--font-lettrage); font-size: 14px; letter-spacing: 2px; }
.sceau .sceau-cn { font-size: 54px; letter-spacing: 0; }
.bande-cta { padding-block: var(--s4); background: var(--laque-2); color: var(--porcelaine); text-align: center; }
.bande-cta .conteneur { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; justify-content: center; }
.bande-cta h2, .bande-cta p { margin: 0; }

.page-hero { padding: var(--s5) 0; }
.page-hero h1 { color: var(--dorure); }
.categorie h2 { font-size: clamp(1.4rem, 4vw + .5rem, 2.2rem); letter-spacing: .07em; text-transform: uppercase; }
.categorie:nth-child(odd) { background: var(--lait); color: var(--encre); }
.categorie:nth-child(even) { background: var(--laque); color: var(--porcelaine); }
.liste-services { margin-bottom: var(--s3); }
.service-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, auto); gap: var(--s2); padding: var(--s3) 0; border-bottom: 1px solid currentColor; }
.service-item h3 { margin-top: 0; }
.service-item .prix { text-align: right; }
.a-confirmer { display: block; font-family: var(--font-texte); font-size: .875rem; font-weight: 500; letter-spacing: .04em; opacity: .78; }
.note-prix, .note-honnete, .attribution { padding-block: var(--s3); font-size: .875rem; }
.faq details { border-bottom: 1px solid currentColor; }
.faq summary { display: flex; align-items: center; min-height: 56px; padding-block: .75rem; font-family: var(--font-lettrage); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { margin-left: auto; content: '+'; color: var(--dorure); font-family: var(--font-lettrage); font-size: 1.5rem; }
.faq details[open] summary::after { content: '−'; }
.nav-fermer { font-family: var(--font-lettrage); }
.faq details > div { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 550ms cubic-bezier(.22,1,.36,1); }
.faq details > div > p { overflow: hidden; }
.faq details[open] > div { grid-template-rows: 1fr; }
.registre { margin: 0; padding: 0; list-style: none; }
.registre li { padding: var(--s3) 0; border-bottom: 1px solid currentColor; }
.formation { display: flex; flex-direction: column; background: var(--laque-2); color: var(--porcelaine); }
.formation .bouton { align-self: flex-start; margin-top: var(--s3); }
.modules { display: grid; gap: var(--s3); padding: 0; list-style: none; counter-reset: modules; }
.modules li { padding: var(--s3); background: var(--lait-2); border-radius: var(--r-panel); counter-increment: modules; }
.prix-geant { padding-block: var(--s5); text-align: center; }
.prix-geant .prix { color: var(--dorure); font-size: clamp(5rem, 25vw, 13rem); }
.capture label { display: block; margin-bottom: .35rem; font-weight: 700; }
.champ-action { display: grid; gap: .75rem; }
.capture input { width: 100%; min-height: 52px; padding: .75rem 1rem; border: 1px solid #7A6660; border-radius: var(--r-panel); background: var(--porcelaine); color: var(--encre); }
.piege { position: absolute; left: -10000px; }
.message-formulaire { padding: var(--s2); border-radius: var(--r-panel); background: var(--lait-2); }
.galerie .fenetre { aspect-ratio: 1 / 1.15; min-height: 0; }
.galerie .fenetre img { min-height: 0; }
.vide { display: grid; min-height: 300px; place-items: center; }
.prose p + p { margin-top: var(--s3); }
.liens-sociaux { display: flex; flex-wrap: wrap; gap: var(--s3); }
.liens-sociaux a, .pied a, address a { display: inline-flex; align-items: center; min-height: 44px; }
.introuvable { display: grid; min-height: 70svh; place-items: center; padding-block: var(--s5); }

.pied { padding: var(--s5) 0 var(--s4); border-top: 1px solid var(--dorure); background: var(--laque); color: var(--porcelaine); }
.pied-grille { display: grid; gap: var(--s3); }
.pied-marque .wordmark { display: inline-block; font-size: 1.5rem; }
.pied-colonne { border-bottom: 1px solid var(--laque-2); }
.pied-colonne summary { display: flex; align-items: center; min-height: 48px; font-family: var(--font-lettrage); cursor: pointer; }
.pied-colonne ul { margin: 0 0 var(--s2); padding: 0; list-style: none; }
.pied-colonne a { display: inline-flex; align-items: center; min-height: 44px; }
.pied-adresse h2 { margin-top: 0; font-size: 1.15rem; }
.pied-legal { margin-top: var(--s4); padding-top: var(--s2); border-top: 1px solid var(--laque-2); font-size: .875rem; }
.plaque { position: fixed; z-index: 80; right: 0; bottom: 0; left: 0; padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom)); background: var(--laque); border-top: 1px solid var(--dorure); }
body.a-plaque { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
.plaque[hidden] { display: none; }
.plaque a { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: var(--r-pill); background: var(--dorure); color: var(--encre); font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }

.js .js-fenetre.attente { opacity: 0; transform: translateY(12px); }
.js .js-fenetre.est-allumee { animation: allume 550ms cubic-bezier(.22,1,.36,1) both; }
.js .js-fenetre.est-allumee.deja-la { animation: none; }
@keyframes allume { from { opacity: 0; transform: translateY(12px); } }

@media (min-width: 768px) {
    .enseigne { grid-template-columns: 120px 1fr 120px; padding-inline: var(--s3); }
    .enseigne-reserver { visibility: visible; }
    .hero-grille, .duo { grid-template-columns: 1.05fr .95fr; }
    .hero-grille { align-items: center; }
    .trois-portes { grid-template-columns: 1.45fr 1fr .8fr; align-items: stretch; }
    .porte, .porte:first-child { min-height: 280px; }
    .cartes-services, .formations { grid-template-columns: repeat(3, 1fr); }
    .galerie { grid-template-columns: repeat(2, 1fr); }
    .contact-grille { grid-template-columns: repeat(2, 1fr); }
    .champ-action { grid-template-columns: 1fr auto; }
    .pied-grille { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; }
    .pied-colonne { border: 0; }
    .pied-colonne summary { pointer-events: none; }
    .plaque { display: none !important; }
}

@media (min-width: 1024px) {
    .section { padding-block: var(--s6); }
    .page-hero { padding: var(--s6) 0; }
    .hero { padding-block: var(--s5); }
    .hero-copy { padding-right: var(--s4); }
    .galerie { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1440px) {
    .hero-grille { grid-template-columns: 1.15fr .85fr; }
    .fenetre { max-width: 640px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .js .js-fenetre.est-allumee { animation: none; }
}

@media print {
    .enseigne, .panneau-nav, .plaque, .bouton, .pied { display: none !important; }
    body, .laque, .lait { background: white !important; color: black !important; }
    a { color: black; text-decoration: underline; }
    .section, .page-hero { padding-block: 1rem; }
}