/* Prestige de Perse : indigo, garance, gaude. Bodoni Moda + Hanken Grotesk. */
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/assets/fonts/bodoni-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/assets/fonts/bodoni-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/bodoni-italic-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/bodoni-italic-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/assets/fonts/hanken-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/assets/fonts/hanken-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --nuit: #141A31;
  --indigo: #22305C;
  --indigo-2: #2E3F74;
  --garance: #9A2A2A;
  --garance-2: #B23A33;
  --gaude: #C99A43;
  --coton: #ECEAE3;
  --coton-2: #E1DED4;
  --encre: #171C30;
  --encre-2: #4A4F63;
  --brume: rgba(236, 234, 227, .74);
  --serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --marge: clamp(16px, 4vw, 48px);
  --tete: 72px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--tete) + 16px); }
body { margin: 0; background: var(--nuit); color: var(--coton); font: 400 1.0625rem/1.65 var(--sans); font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.08; letter-spacing: -.012em; margin: 0 0 .5em; font-variation-settings: "opsz" 72; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 5.6vw, 5.4rem); letter-spacing: -.022em; line-height: 1.0; font-variation-settings: "opsz" 96; }
h2 { font-size: clamp(1.6rem, 2.4vw, 2.15rem); }
h2.grand { font-size: clamp(2rem, 4vw, 3.6rem); font-variation-settings: "opsz" 96; letter-spacing: -.02em; }
h3 { font-size: 1.3rem; font-weight: 600; font-variation-settings: "opsz" 24; }
p { margin: 0 0 1em; }
sup { font-size: .42em; vertical-align: super; line-height: 0; letter-spacing: 0; margin-left: .02em; }
:focus-visible { outline: 2px solid var(--gaude); outline-offset: 3px; border-radius: 2px; }
.sr, .evitement:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement:focus { position: fixed; top: 8px; left: 8px; z-index: 100; background: var(--coton); color: var(--encre); padding: 10px 14px; }

.enveloppe { width: min(1240px, 100% - 2 * var(--marge)); margin-inline: auto; }
.etroit { width: min(820px, 100% - 2 * var(--marge)); }
.clair { background: var(--coton); color: var(--encre); color-scheme: light; padding-bottom: clamp(48px, 8vw, 110px); }
.clair a { color: var(--encre); }
.clair :focus-visible { outline-color: var(--garance); }

/* Bordure : les galons d'un tapis, entre deux zones */
.bordure { height: 22px; background:
  linear-gradient(var(--gaude), var(--gaude)) 0 3px / 100% 1px no-repeat,
  linear-gradient(var(--gaude), var(--gaude)) 0 18px / 100% 1px no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='22'%3E%3Cpath d='M0 7h6v4h6V7h6v4h6v4h-6v-4h-6v4H6v-4H0z' fill='%239A2A2A'/%3E%3Cpath d='M6 11h6v4H6zM18 7h6v4h-6z' fill='%2322305C'/%3E%3C/svg%3E") 0 0 / 24px 22px repeat-x, var(--nuit); }

/* Boutons */
.bouton { display: inline-flex; align-items: center; gap: .55em; min-height: 48px; padding: .7em 1.35em; border-radius: 2px; font: 600 1rem/1.2 var(--sans); text-decoration: none; letter-spacing: .01em; transition: background-color .2s, color .2s, border-color .2s; }
.bouton svg { width: 1.15em; height: 1.15em; flex: none; }
.bouton-garance { background: var(--garance); color: #FBF6EE !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.bouton-garance:hover { background: var(--garance-2); }
.bouton-trait { color: var(--coton) !important; box-shadow: inset 0 0 0 1px rgba(236, 234, 227, .45); font-family: var(--serif); font-weight: 500; font-size: 1.12rem; font-variant-numeric: lining-nums; }
.bouton-trait:hover { box-shadow: inset 0 0 0 1px var(--gaude); color: #fff !important; }
.bouton-trait-sombre { color: var(--encre) !important; box-shadow: inset 0 0 0 1px rgba(23, 28, 48, .4); font-family: var(--serif); font-size: 1.12rem; }
.lien { font-weight: 600; text-decoration: underline; text-decoration-color: var(--gaude); text-underline-offset: .3em; }
.lien:hover { text-decoration-thickness: 2px; }

/* En-tête */
.tete { position: fixed; inset: 0 0 auto; z-index: 50; transition: background-color .3s, box-shadow .3s; }
.tete.plein, body:not(.accueil) .tete { background: rgba(20, 26, 49, .94); box-shadow: 0 1px 0 rgba(201, 154, 67, .35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tete-in { display: flex; align-items: center; gap: 28px; height: var(--tete); width: min(1400px, 100% - 2 * var(--marge)); margin-inline: auto; }
.marque { display: flex; align-items: center; gap: 12px; text-decoration: none; font: 500 1.42rem/1 var(--serif); letter-spacing: -.01em; white-space: nowrap; font-variation-settings: "opsz" 36; }
.etoile { width: 34px; height: 34px; color: var(--gaude); flex: none; }
.nav { margin-left: auto; }
.nav > ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nav a, .nav button { display: block; padding: 10px 12px; font: 500 .96rem/1 var(--sans); color: var(--coton); text-decoration: none; background: none; border: 0; cursor: pointer; }
.nav a:hover, .nav button:hover, .nav [aria-current] { color: #fff; text-decoration: underline; text-decoration-color: var(--gaude); text-underline-offset: .5em; }
.deroule { position: relative; }
.deroule button::after { content: ""; display: inline-block; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-3px) rotate(45deg); margin-left: 8px; }
.sous { position: absolute; top: calc(100% + 8px); left: -20px; width: 420px; list-style: none; margin: 0; padding: 10px; background: var(--nuit); box-shadow: 0 0 0 1px rgba(201, 154, 67, .45), 0 24px 60px rgba(0, 0, 0, .45); display: none; }
.deroule[data-ouvert] .sous, .deroule:focus-within .sous { display: block; }
@media (hover: hover) { .deroule:hover .sous { display: block; } .deroule::after { content: ""; position: absolute; inset: 100% 0 -12px; } }
.sous a { padding: 12px 14px; display: grid; gap: 4px; }
.sous a span { font: 500 1.2rem/1.1 var(--serif); }
.sous a small { color: var(--brume); font-size: .86rem; line-height: 1.35; }
.sous a:hover { background: var(--indigo); text-decoration: none; }
.tete-tel { font: 500 1.18rem/1 var(--serif); text-decoration: none; white-space: nowrap; font-variant-numeric: lining-nums; }
.tete-tel:hover { color: var(--gaude); }
.tete-cta { min-height: 42px; padding: .55em 1.05em; font-size: .94rem; }
.burger { display: none; margin-left: auto; width: 46px; height: 46px; background: none; border: 0; color: var(--coton); position: relative; cursor: pointer; }
.burger span:not(.sr) { position: absolute; left: 11px; right: 11px; height: 1.5px; background: currentColor; transition: transform .25s; }
.burger span:nth-child(1) { top: 18px; } .burger span:nth-child(2) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }
.menu-mobile { position: fixed; inset: var(--tete) 0 0; background: var(--nuit); padding: 24px var(--marge) 120px; overflow: auto; }
.menu-mobile ul { list-style: none; margin: 0; padding: 0; }
.menu-mobile a { display: block; padding: 12px 0; font: 500 1.6rem/1.15 var(--serif); text-decoration: none; border-bottom: 1px solid rgba(201, 154, 67, .25); }
.menu-mobile .menu-tel { border: 0; margin-top: 20px; font-size: 2rem; color: var(--gaude); }
@media (max-width: 1180px) { .nav { display: none; } .burger { display: block; } .tete-tel { margin-left: auto; } .tete-in { gap: 16px; } }
@media (max-width: 760px) { .tete-cta, .tete-tel { display: none; } .marque { font-size: 1.22rem; } .etoile { width: 30px; height: 30px; } }

/* Ouverture de l'accueil : vraies photos */
.ouverture-photo { position: relative; padding: calc(var(--tete) + clamp(28px, 5vw, 72px)) 0 clamp(56px, 8vw, 110px); background: radial-gradient(100% 90% at 78% 30%, #22305C 0%, var(--nuit) 62%); overflow: hidden; }
.ouverture-in { width: min(1320px, 100% - 2 * var(--marge)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.ouverture-texte h1 { font-size: clamp(2.4rem, 4.6vw, 4.5rem); max-width: 14ch; margin-bottom: .35em; }
.devise { font: italic 400 clamp(1.25rem, 2vw, 1.7rem)/1.3 var(--serif); color: var(--gaude); margin-bottom: 1.1em; }
.definition { color: var(--brume); max-width: 54ch; font-size: 1.08rem; }
.ouverture-boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ouverture-visuel { position: relative; justify-self: end; width: min(520px, 100%); padding-bottom: 64px; }
.ouverture-tapis img { width: 100%; box-shadow: 0 40px 90px rgba(0, 0, 0, .55); }
.ouverture-atelier { position: absolute; left: -18%; bottom: 0; width: min(46%, 240px); }
.ouverture-atelier img { width: 100%; aspect-ratio: 760 / 789; object-fit: cover; border: 6px solid var(--nuit); box-shadow: 0 0 0 1px rgba(201, 154, 67, .6), 0 24px 50px rgba(0, 0, 0, .5); }
.ouverture-credit { position: absolute; right: 0; bottom: 0; margin: 0; width: 52%; font-size: .74rem; line-height: 1.4; color: rgba(236, 234, 227, .55); text-align: right; }
@media (max-width: 860px) {
  .ouverture-in { grid-template-columns: 1fr; }
  .ouverture-visuel { justify-self: center; width: min(440px, 100%); padding-bottom: 0; }
  .ouverture-atelier { left: auto; right: -4px; bottom: 0; width: 38%; }
  .ouverture-credit { position: static; width: auto; text-align: left; margin-top: 14px; padding-right: 42%; min-height: 8.5em; }
}

/* Cinq gestes */
.gestes { padding-top: clamp(64px, 9vw, 130px); }
.geste { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding: clamp(36px, 5vw, 64px) 0; border-top: 1px solid rgba(23, 28, 48, .18); }
.geste:nth-of-type(even) .geste-texte { order: 2; }
.geste h3 { display: grid; gap: .08em; margin-bottom: .5em; }
.geste .verbe { font-size: clamp(3rem, 6.5vw, 5.8rem); line-height: .9; letter-spacing: -.035em; font-variation-settings: "opsz" 96; font-weight: 500; }
.geste .titre { font-style: italic; font-weight: 400; font-size: clamp(1.2rem, 1.8vw, 1.55rem); color: var(--garance); }
.geste p { color: var(--encre-2); max-width: 46ch; }
.geste-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.geste-ph-1 { margin-top: 48px; }
.geste-photos img { width: 100%; }
@media (max-width: 760px) { .geste { grid-template-columns: 1fr; } .geste:nth-of-type(even) .geste-texte { order: 0; } .geste-ph-1 { margin-top: 24px; } }

/* L'essentiel, mise à jour, guides, lexique */
.essentiel { margin: 0 0 clamp(32px, 5vw, 56px); padding: 22px 26px; background: var(--coton-2); border-left: 3px solid var(--garance); max-width: 980px; }
.essentiel h2 { font: 600 1rem var(--sans); margin: 0 0 12px; color: var(--garance); }
.essentiel dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
.essentiel dt { font-size: .82rem; color: var(--encre-2); }
.essentiel dd { margin: 2px 0 0; font-size: .98rem; }
.essentiel ul { margin: 0; padding-left: 1.1em; }
.essentiel li { margin-bottom: 6px; }
@media (max-width: 600px) { .essentiel dl { grid-template-columns: 1fr; } }
.maj { font-size: .84rem; color: var(--encre-2); margin-top: 18px; }
.guides-accueil { padding-top: clamp(64px, 9vw, 120px); }
.liste-guides { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 32px; }
.liste-guides a { display: grid; gap: 6px; padding: 20px 0; border-top: 1px solid rgba(23, 28, 48, .2); text-decoration: none; }
.liste-guides span { font: 500 1.35rem/1.2 var(--serif); }
.liste-guides small { color: var(--encre-2); font-size: .95rem; }
.liste-guides a:hover span { color: var(--garance); }
.lien-clair { color: var(--coton); }
.lettres ul { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-wrap: wrap; gap: 6px; }
.lettres a { display: inline-block; min-width: 38px; padding: 6px 10px; text-align: center; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(23, 28, 48, .22); font: 500 1.1rem var(--serif); }
.termes { margin: 0; }
.terme { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 66ch); gap: 8px 40px; padding: 18px 0; border-top: 1px solid rgba(23, 28, 48, .16); scroll-margin-top: calc(var(--tete) + 20px); }
.terme dt { font: 500 1.35rem/1.2 var(--serif); scroll-margin-top: calc(var(--tete) + 20px); }
.terme dd { margin: 0; color: #2A2F43; }
.terme dd p { margin: 0 0 6px; }
.voir-aussi { font-size: .9rem; color: var(--encre-2); }
.voir { margin-left: 6px; }
@media (max-width: 760px) { .terme { grid-template-columns: 1fr; } }
.ent-photo img { width: 100%; height: 100%; object-fit: cover; }
.ent-visuel .ph { position: absolute; inset: 0; }

/* Métiers */
.metiers { padding-top: clamp(64px, 9vw, 130px); }
.liste-metiers { list-style: none; margin: 36px 0 0; padding: 0; border-top: 1px solid rgba(23, 28, 48, .2); }
.metier a { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 1.25fr) 180px; align-items: center; gap: clamp(16px, 3vw, 48px); padding: 22px 0; text-decoration: none; border-bottom: 1px solid rgba(23, 28, 48, .2); }
.metier-nom { font: 500 clamp(1.7rem, 3vw, 2.7rem)/1.05 var(--serif); letter-spacing: -.02em; font-variation-settings: "opsz" 96; }
.metier-texte { color: var(--encre-2); max-width: 52ch; }
.metier-ph img { width: 180px; height: 120px; object-fit: cover; filter: saturate(.85); transition: filter .3s; }
.metier a:hover .metier-nom { color: var(--garance); }
.metier a:hover img { filter: none; }
@media (max-width: 760px) { .metier a { grid-template-columns: 1fr 96px; } .metier-texte { grid-column: 1; font-size: .96rem; } .metier-ph { grid-row: 1 / span 2; grid-column: 2; } .metier-ph img { width: 96px; height: 96px; } }

/* Comparateur */
.comparer { padding-top: clamp(40px, 6vw, 90px); }
.comparer-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.comparateur { position: relative; overflow: hidden; touch-action: pan-y; aspect-ratio: 1050 / 618; background: var(--coton-2); }
.comparateur picture, .comparateur img { width: 100%; height: 100%; object-fit: cover; }
.comp-dessus { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.comparateur input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.comp-poignee { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: #fff; transform: translateX(-1px); pointer-events: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.comp-poignee::after { content: ""; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%) rotate(45deg); background: var(--nuit); border: 1px solid var(--gaude); }
.comparateur input:focus-visible ~ .comp-poignee::after { outline: 2px solid var(--gaude); outline-offset: 3px; }
.comp-l { position: absolute; bottom: 12px; padding: 3px 10px; background: rgba(20, 26, 49, .82); color: var(--coton); font: italic 400 .95rem var(--serif); pointer-events: none; }
.comp-avant { left: 12px; } .comp-apres { right: 12px; }
@media (max-width: 860px) { .comparer-in { grid-template-columns: 1fr; } }

/* Lire un tapis */
.lecture { padding: clamp(64px, 9vw, 130px) 0; background: var(--nuit); }
.lecture-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 90px); align-items: start; }
.lecture-texte p { color: var(--brume); max-width: 48ch; }
.notes { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid rgba(201, 154, 67, .3); }
.notes li { padding: 14px 0; border-bottom: 1px solid rgba(201, 154, 67, .2); opacity: .55; transition: opacity .3s; }
.notes li h3 { margin: 0 0 4px; font-size: 1.2rem; }
.notes li p { margin: 0; font-size: .98rem; max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.notes li.vu { opacity: 1; }
.notes li.vu p { max-height: 12em; }
.lecture-image { position: relative; position: sticky; top: calc(var(--tete) + 20px); }
.lecture-cadre { position: relative; }
.lecture-image img { width: 100%; box-shadow: 0 30px 70px rgba(0, 0, 0, .45); }
.point { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 0; padding: 0; background: none; cursor: pointer; }
.point::before { content: ""; position: absolute; inset: 9px; background: var(--nuit); border: 1.5px solid var(--gaude); transform: rotate(45deg); transition: background-color .2s, transform .2s; }
.point::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(201, 154, 67, .6); transform: rotate(45deg) scale(.6); opacity: 0; animation: onde 2.8s ease-out infinite; }
.point.vu::before, .point:hover::before { background: var(--gaude); transform: rotate(45deg) scale(1.15); }
@keyframes onde { 0% { opacity: .9; transform: rotate(45deg) scale(.6); } 100% { opacity: 0; transform: rotate(45deg) scale(1.35); } }
.credit-image { font-size: .74rem; color: rgba(236, 234, 227, .5); margin-top: 10px; }
@media (max-width: 860px) { .lecture-in { grid-template-columns: 1fr; } .lecture-image { position: relative; top: 0; order: -1; max-width: 520px; } }

/* Étapes */
.etapes-accueil { padding-top: clamp(64px, 9vw, 120px); }
.etapes, .etapes-longues { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 0; counter-reset: e; }
.etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(23, 28, 48, .25); }
.etapes li { padding: 26px 28px 10px 0; display: grid; gap: 14px; align-content: start; }
.etapes li + li { padding-left: 28px; border-left: 1px solid rgba(23, 28, 48, .18); }
.n { font: 400 3.6rem/.9 var(--serif); color: var(--garance); font-variant-numeric: lining-nums; font-variation-settings: "opsz" 96; }
.etapes p { font-size: 1.1rem; max-width: 32ch; }
@media (max-width: 760px) { .etapes { grid-template-columns: 1fr; } .etapes li + li { padding-left: 0; border-left: 0; border-top: 1px solid rgba(23, 28, 48, .18); } }
.etapes-longues li { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 20px; padding: 22px 0; border-top: 1px solid rgba(23, 28, 48, .18); }
.etapes-longues h3 { margin: 4px 0 6px; }
.etapes-longues p { max-width: 64ch; color: var(--encre-2); }
.deroule-etapes { padding-top: clamp(40px, 6vw, 80px); }

/* Zones et cartes */
.zones { padding: clamp(64px, 9vw, 130px) 0; }
.zones-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 100px); }
.zones p { color: var(--brume); max-width: 50ch; }
.clair .zones-in p { color: var(--encre-2); }
.carte-paris { width: 100%; margin-top: 18px; }
.carte-paris path { fill: rgba(46, 63, 116, .55); stroke: var(--nuit); stroke-width: 2.4; stroke-linejoin: round; transition: fill .2s; }
.carte-paris text { font: 500 26px var(--serif); fill: var(--coton); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.carte-paris a:hover path, .carte-paris a:focus-visible path { fill: var(--garance); }
.carte-paris path.actif { fill: var(--garance); }
.clair .carte-paris path { fill: rgba(34, 48, 92, .16); stroke: var(--coton); }
.clair .carte-paris text { fill: var(--encre); }
.clair .carte-paris a:hover path { fill: var(--garance); } .clair .carte-paris a:hover text { fill: #fff; }
.carte-france { width: min(100%, 440px); margin: 18px 0; }
.carte-france .terre { fill: rgba(46, 63, 116, .4); stroke: rgba(236, 234, 227, .25); stroke-width: 1.2; }
.carte-france circle { fill: var(--nuit); stroke: var(--gaude); stroke-width: 3; transition: fill .2s; }
.carte-france .base circle { fill: var(--gaude); }
.carte-france .actif circle { fill: var(--garance); stroke: #fff; }
.carte-france text { font: 500 30px var(--serif); fill: var(--coton); }
.carte-france a:hover circle { fill: var(--garance); }
.clair .carte-france .terre { fill: rgba(34, 48, 92, .12); stroke: rgba(23, 28, 48, .2); }
.clair .carte-france text { fill: var(--encre); } .clair .carte-france circle { fill: var(--coton); }
.liste-villes { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.liste-villes a { font: 500 1.35rem/1.6 var(--serif); text-decoration: none; border-bottom: 1px solid var(--gaude); }
.liste-compacte { list-style: none; padding: 0; margin: 14px 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.liste-compacte a { display: inline-block; padding: 7px 12px; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(23, 28, 48, .22); font-size: .95rem; }
.liste-compacte a:hover { box-shadow: inset 0 0 0 1px var(--garance); color: var(--garance); }
.liste-arr { list-style: none; padding: 0; margin: 18px 0 0; columns: 2 220px; column-gap: 28px; }
.liste-arr a { display: block; padding: 6px 0; text-decoration: none; border-bottom: 1px solid rgba(23, 28, 48, .12); break-inside: avoid; }
.liste-arr b { font: 500 1.3rem var(--serif); margin-right: 8px; }
.note { font-size: .95rem; color: var(--encre-2); }
@media (max-width: 860px) { .zones-in { grid-template-columns: 1fr; } }

/* FAQ */
.faq { padding-top: clamp(48px, 7vw, 90px); }
.faq details { border-top: 1px solid rgba(23, 28, 48, .2); }
.faq details:last-of-type { border-bottom: 1px solid rgba(23, 28, 48, .2); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 44px 18px 0; position: relative; font: 500 1.24rem/1.3 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; border: solid var(--garance); border-width: 0 1.5px 1.5px 0; transform: translateY(-70%) rotate(45deg); transition: transform .25s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq details div { padding: 0 0 18px; color: var(--encre-2); max-width: 66ch; }

/* Appel final */
.appel { background: var(--indigo); padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.appel::before { content: ""; position: absolute; inset: 0 0 auto; height: 22px; background: inherit; }
.appel-in { width: min(980px, 100% - 2 * var(--marge)); margin-inline: auto; }
.appel h2 { font-size: clamp(2.2rem, 5vw, 4.4rem); font-variation-settings: "opsz" 96; letter-spacing: -.025em; max-width: 14ch; }
.appel p { color: var(--brume); max-width: 56ch; font-size: 1.1rem; }
.quatre { list-style: none; margin: 30px 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.quatre li { display: grid; gap: 10px; font: italic 400 1.02rem var(--serif); color: var(--coton); }
.v { aspect-ratio: 4 / 3; border: 1px solid rgba(201, 154, 67, .55); position: relative; background: rgba(20, 26, 49, .35); }
.v::before { content: ""; position: absolute; }
.v-face::before { inset: 20% 28%; border: 1.5px solid var(--gaude); box-shadow: inset 0 0 0 5px rgba(154, 42, 42, .65); }
.v-envers::before { inset: 20% 28%; background: repeating-linear-gradient(90deg, rgba(201, 154, 67, .75) 0 1px, transparent 1px 5px), repeating-linear-gradient(0deg, rgba(201, 154, 67, .75) 0 1px, transparent 1px 5px); }
.v-angle::before { left: 30%; top: 30%; right: -1px; bottom: -1px; border-left: 1.5px solid var(--gaude); border-top: 1.5px solid var(--gaude); box-shadow: inset 6px 6px 0 rgba(154, 42, 42, .65); }
.v-frange::before { left: 18%; right: 18%; top: 22%; height: 22%; background: rgba(154, 42, 42, .65); border-bottom: 1.5px solid var(--gaude); }
.v-frange::after { content: ""; position: absolute; left: 18%; right: 18%; top: 44%; height: 30%; background: repeating-linear-gradient(90deg, var(--coton) 0 1px, transparent 1px 6px); }
.appel-boutons { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 600px) { .quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Pied */
.pied { background: var(--nuit); padding-bottom: 90px; }
.pied-in { width: min(1240px, 100% - 2 * var(--marge)); margin: 0 auto; padding-top: 70px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.pied-marque { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; font: 500 clamp(2.4rem, 7vw, 6.4rem)/1 var(--serif); letter-spacing: -.03em; margin: 0; font-variation-settings: "opsz" 96; }
.pied-marque .etoile { width: clamp(44px, 6vw, 84px); height: auto; }
.pied-tel { grid-column: 1 / -1; margin: 0 0 20px; }
.pied-tel a { font: 400 clamp(1.6rem, 3vw, 2.4rem) var(--serif); color: var(--gaude); text-decoration: none; font-variant-numeric: lining-nums; }
.pied-col h2 { font: 600 .98rem var(--sans); color: var(--gaude); margin-bottom: 12px; letter-spacing: .01em; }
.pied-col h2 a { text-decoration: none; }
.pied-col ul { list-style: none; margin: 0; padding: 0; }
.pied-col li { margin: 0 0 8px; }
.pied-col a { color: var(--brume); text-decoration: none; }
.pied-col a:hover { color: #fff; text-decoration: underline; }
.pied-arr ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
.pied-arr a { display: block; padding: 4px 0; font: 500 1.05rem var(--serif); }
.pied-bas { width: min(1240px, 100% - 2 * var(--marge)); margin: 50px auto 0; padding-top: 20px; border-top: 1px solid rgba(201, 154, 67, .25); display: flex; flex-wrap: wrap; gap: 10px 30px; font-size: .88rem; color: var(--brume); }
.pied-bas a { margin-right: 18px; }
.pied-bas .credit { flex-basis: 100%; font-size: .78rem; opacity: .7; }
@media (max-width: 860px) { .pied-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Barre de contact mobile */
.barre { display: none; }
@media (max-width: 760px) {
  .barre { display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; inset: auto 0 0; z-index: 40; background: rgba(20, 26, 49, .97); box-shadow: 0 -1px 0 rgba(201, 154, 67, .45); padding-bottom: env(safe-area-inset-bottom); }
  .barre a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px 8px; font-size: .78rem; font-weight: 600; text-decoration: none; color: var(--coton); }
  .barre a:first-child { background: var(--garance); }
  .barre svg { width: 21px; height: 21px; }
  body { padding-bottom: 62px; }
}

/* En-têtes des pages intérieures */
.ent { padding: calc(var(--tete) + clamp(24px, 4vw, 56px)) 0 clamp(36px, 5vw, 70px); background: radial-gradient(90% 120% at 85% 20%, #1f2a52 0%, var(--nuit) 60%); }
.ent-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.ent h1 { font-size: clamp(2.3rem, 4.6vw, 4.6rem); max-width: 15ch; }
.ent .accroche { font: italic 400 clamp(1.15rem, 1.7vw, 1.45rem)/1.4 var(--serif); color: var(--coton); max-width: 40ch; }
.ent .geste { color: var(--brume); }
.ent-boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.ariane ol { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: .88rem; color: var(--brume); }
.ariane li + li::before { content: ""; display: inline-block; width: 5px; height: 5px; border: 1px solid var(--gaude); transform: rotate(45deg); margin: 0 10px 2px; }
.ariane a { color: var(--brume); }
.ent-visuel { position: relative; aspect-ratio: 4 / 5; max-height: 72vh; justify-self: end; width: 100%; max-width: 520px; }
.ent-visuel::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(201, 154, 67, .45); pointer-events: none; }
.ent-grand { margin: 0 0 6px; line-height: .8; color: var(--garance-2); font-family: var(--serif); font-variation-settings: "opsz" 96; letter-spacing: -.05em; }
.grand-num { font-size: clamp(6rem, 15vw, 13rem); display: block; }
.grand-num sup { font-size: .32em; letter-spacing: 0; vertical-align: .95em; margin-left: .03em; }
.grand-nom { font-size: clamp(3.6rem, 9vw, 8.2rem); display: block; letter-spacing: -.04em; }
.ent-sl .grand-num { font-size: clamp(4.6rem, 10vw, 8.6rem); }
.ent-sl .grand-nom { font-size: clamp(3rem, 6.5vw, 5.8rem); }
.ent-service-nom { font: italic 400 1.2rem var(--serif); color: var(--gaude); margin: 0 0 10px; }
.ent-lieu h1 { font-size: clamp(2rem, 3.6vw, 3.4rem); max-width: 22ch; }
.ent-sous { color: var(--brume); font-size: .95rem; }
.ent-carte { justify-self: end; width: 100%; max-width: 520px; }
.ent-carte .carte-paris path { fill: rgba(46, 63, 116, .45); }
.ent-carte .carte-paris path.actif { fill: var(--garance); }
.ent-carte .carte-france { width: 100%; }
.ent-simple { padding-bottom: clamp(36px, 5vw, 64px); }
.ent-simple h1 { max-width: 18ch; }
@media (max-width: 860px) {
  .ent-in { grid-template-columns: 1fr; }
  .ent-visuel { justify-self: start; max-width: 100%; aspect-ratio: 4 / 3.4; }
  .ent-carte { justify-self: start; max-width: 360px; }
}

/* Article */
.article { width: min(1240px, 100% - 2 * var(--marge)); padding-top: clamp(48px, 7vw, 96px); }
.chapeau { font: 400 clamp(1.2rem, 1.65vw, 1.48rem)/1.5 var(--serif); max-width: 52ch; margin: 0 0 clamp(36px, 5vw, 64px); font-variation-settings: "opsz" 24; color: var(--encre); }
.bloc { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 66ch) minmax(0, 1fr); gap: 0 clamp(24px, 4vw, 64px); padding: 34px 0; border-top: 1px solid rgba(23, 28, 48, .16); }
.bloc > h2 { grid-column: 1; grid-row: 1 / span 20; font-size: clamp(1.45rem, 2.1vw, 1.95rem); position: sticky; top: calc(var(--tete) + 20px); align-self: start; }
.bloc > p, .bloc > ul { grid-column: 2; }
.bloc > .encart { grid-column: 3; grid-row: 1 / span 20; align-self: start; margin: 6px 0 0; }
.bloc p { color: #2A2F43; }
.encart img, .ph img { width: 100%; }
.ph { margin: 0; }
.ph figcaption { font: italic 400 .92rem/1.4 var(--serif); color: var(--encre-2); margin-top: 8px; }
.large { margin: 40px 0; max-width: 980px; }
@media (max-width: 1100px) {
  .bloc { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
  .bloc > .encart { grid-column: 2; grid-row: auto; max-width: 420px; margin: 8px 0 18px; }
}
@media (max-width: 760px) {
  .bloc { grid-template-columns: 1fr; }
  .bloc > h2 { position: static; grid-row: auto; }
  .bloc > p, .bloc > ul, .bloc > .encart { grid-column: 1; }
}
.repere { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 28px; align-items: baseline; padding: 26px 0 30px; border-top: 2px solid var(--garance); margin-bottom: 20px; max-width: 920px; }
.repere .repere-chiffre { grid-row: 1 / span 2; font: 400 clamp(3.4rem, 7vw, 6rem)/.9 var(--serif); color: var(--garance); margin: 0; font-variation-settings: "opsz" 96; letter-spacing: -.03em; font-variant-numeric: lining-nums; }
.repere p { margin: 0; max-width: 54ch; font-size: 1.08rem; }
.repere-src { font-size: .85rem; } .repere-src a { color: var(--encre-2); }
@media (max-width: 600px) { .repere { grid-template-columns: 1fr; } .repere-chiffre { grid-row: auto; } }
.conseil { margin: 40px 0; padding: 30px 0 0 clamp(0px, 4vw, 60px); border-top: 1px solid var(--gaude); max-width: 980px; }
.conseil p { font: italic 400 clamp(1.3rem, 2.2vw, 1.85rem)/1.4 var(--serif); margin: 0 0 12px; color: var(--encre); max-width: 46ch; }
.conseil footer { font-size: .9rem; color: var(--encre-2); }
.signes ul { list-style: none; padding: 0; margin: 0; }
.signes li { position: relative; padding: 10px 0 10px 28px; border-bottom: 1px solid rgba(23, 28, 48, .12); }
.signes li::before { content: ""; position: absolute; left: 4px; top: 1.05em; width: 8px; height: 8px; background: var(--garance); transform: rotate(45deg); }
.quartiers { display: flex; flex-wrap: wrap; gap: 8px 10px; list-style: none; padding: 0; margin: 0; }
.quartiers li { padding: 5px 12px; background: var(--coton-2); font-size: .95rem; }
.soins { padding-top: clamp(30px, 5vw, 60px); }
.liste-soins { list-style: none; margin: 24px 0 30px; padding: 0; border-top: 1px solid rgba(23, 28, 48, .2); }
.liste-soins a { display: grid; grid-template-columns: minmax(180px, 300px) minmax(0, 66ch); gap: 8px clamp(24px, 4vw, 64px); padding: 20px 0; border-bottom: 1px solid rgba(23, 28, 48, .2); text-decoration: none; }
.liste-soins .sn { font: 500 1.6rem/1.1 var(--serif); }
.liste-soins .st { color: var(--encre-2); }
.liste-soins a:hover .sn { color: var(--garance); }
@media (max-width: 760px) { .liste-soins a { grid-template-columns: 1fr; } }
.intro-sl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: clamp(24px, 5vw, 80px); align-items: start; margin-bottom: clamp(28px, 4vw, 52px); }
.intro-sl .chapeau { margin: 0; }
.rendu-etat { margin: 0; }
.rendu-etat img { width: 100%; box-shadow: 0 18px 40px rgba(20, 26, 49, .25); }
.rendu-etat figcaption { font: italic 400 .92rem/1.4 var(--serif); color: var(--encre-2); margin-top: 8px; }
@media (max-width: 760px) { .intro-sl { grid-template-columns: 1fr; } .rendu-etat { max-width: 340px; } }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 980px; margin: 40px 0; }
.modalites { width: min(1240px, 100% - 2 * var(--marge)); margin: clamp(40px, 6vw, 80px) auto 0; padding: clamp(28px, 4vw, 44px); background: var(--nuit); color: var(--coton); }
.modalites h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.modalites ol { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.modalites li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.modalites li span { font: 400 2.2rem/1 var(--serif); color: var(--gaude); }
.modalites li p { margin: 0; color: var(--brume); }
@media (max-width: 760px) { .modalites ol { grid-template-columns: 1fr; } }
.liste-cas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin-top: 20px; }
.cas { padding: 22px 0; border-top: 1px solid rgba(23, 28, 48, .2); }
.cas p { color: var(--encre-2); max-width: 56ch; }
@media (max-width: 760px) { .liste-cas { grid-template-columns: 1fr; } }
.galerie { padding-top: clamp(40px, 6vw, 80px); }
.grille-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 20px; align-items: start; }
@media (max-width: 760px) { .grille-photos, .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
.ailleurs { padding-top: clamp(48px, 7vw, 90px); }
.ailleurs-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); }
.ailleurs .carte-paris { max-width: 560px; }
@media (max-width: 760px) { .ailleurs-in { grid-template-columns: 1fr; } }
.sources { margin-top: 50px; font-size: .86rem; color: var(--encre-2); }
.sources h2 { font: 600 .9rem var(--sans); margin-bottom: 8px; }
.sources ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.sources a { color: var(--encre-2); }
.principe { grid-template-columns: minmax(0, 300px) minmax(0, 66ch); }
.legal h2 { font-size: 1.5rem; margin-top: 1.4em; }
.legal p { max-width: 70ch; }
.plan { columns: 3 260px; font-size: .92rem; }
.plan li { margin-bottom: 4px; break-inside: avoid; }

/* Formulaire */
.devis-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 80px); padding-top: clamp(40px, 6vw, 80px); }
.formulaire { display: grid; gap: 18px; }
.formulaire label { display: grid; gap: 6px; font-weight: 600; font-size: .96rem; }
.formulaire input, .formulaire select, .formulaire textarea { font: 400 1.05rem var(--sans); padding: 12px 14px; border: 1px solid rgba(23, 28, 48, .35); background: #F7F6F2; color: var(--encre); border-radius: 2px; min-height: 48px; }
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { outline: 2px solid var(--garance); outline-offset: 1px; }
.form-intro, .form-note { font-size: .92rem; color: var(--encre-2); }
.formulaire button { justify-self: start; border: 0; cursor: pointer; }
.devis-aide { background: var(--coton-2); padding: clamp(22px, 3vw, 36px); align-self: start; }
.photos-aide { padding-left: 1.2em; }
.photos-aide li { margin-bottom: 8px; }
.devis-direct { display: grid; gap: 10px; justify-items: start; margin-top: 20px; }
@media (max-width: 860px) { .devis-in { grid-template-columns: 1fr; } }

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

.sommaire-faq ul { list-style: none; padding: 0; margin: 0; }
.sommaire-faq li a { display: block; padding: 12px 0; border-top: 1px solid rgba(23, 28, 48, .16); text-decoration: none; font: 500 1.12rem/1.35 var(--serif); }
.sommaire-faq li a:hover { color: var(--garance); }

.piege { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-etat { min-height: 1.4em; margin: 0; font-weight: 600; }
.form-etat.erreur { color: var(--garance); }
.formulaire button[disabled] { opacity: .6; cursor: progress; }

/* Formulaire de rappel dans chaque bloc de contact */
.appel-in.appel-avec-form { width: min(1180px, 100% - 2 * var(--marge)); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.formulaire-rappel { background: rgba(20, 26, 49, .55); box-shadow: inset 0 0 0 1px rgba(201, 154, 67, .45); padding: clamp(22px, 3vw, 32px); gap: 14px; }
.formulaire-rappel .form-titre { font: 500 1.6rem/1.1 var(--serif); margin: 0 0 4px; color: var(--coton); }
.formulaire-rappel label { color: var(--coton); }
.formulaire-rappel .form-note, .formulaire-rappel .form-note a { color: var(--brume); }
.formulaire-rappel .form-etat { color: var(--coton); }
.formulaire-rappel .form-etat.erreur { color: #F0A49B; }
.formulaire-rappel input, .formulaire-rappel select, .formulaire-rappel textarea { background: #F7F6F2; }
.formulaire-rappel input:focus, .formulaire-rappel select:focus, .formulaire-rappel textarea:focus { outline-color: var(--gaude); }
@media (max-width: 900px) { .appel-in.appel-avec-form { grid-template-columns: 1fr; } }