/*
 * Home Épure — services.css
 * « Nos savoir-faire » : héro typographique, planches numérotées, diagramme.
 *
 * Tout est scopé sous [data-sv="root"] / .sv-* : aucune règle ne peut fuir
 * vers le reste du site, ni recevoir celles de style.css.
 *
 * Vocabulaire : la trame et le filet. Aucun angle arrondi, aucune ombre
 * portée, aucune icône décorative — ce sont les numéros, les filets et les
 * vides qui structurent la page. Même palette et même typographie que
 * l'accueil et le portfolio : les trois pages doivent se lire comme un seul
 * document.
 */

/* ══ Sortie de gouttière ══════════════════════════════════════════════════
   header.php ouvre <main class="container"> (max-width 1360px + padding).
   La page doit occuper toute la largeur de l'écran : on annule ce cadre
   depuis l'intérieur. --sv-sbw (largeur de la barre de défilement, mesurée en
   JS) empêche 100vw de dépasser la fenêtre sur les systèmes à barre permanente. */
main.container:has([data-sv="root"]) { width: 100%; }

[data-sv="root"] {
    --ink:      #131211;
    --ink-2:    #1F1C19;
    --paper:    #ffffff;
    --ivory:    #F6F4F0;
    --sand:     #EDE8E0;
    --line:     #E2DBD1;
    --line-dk:  rgba(255,255,255,.15);
    --mute:     #8A8177;
    --mute-dk:  rgba(255,255,255,.56);

    --f-ui:     'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    --f-serif:  'Cormorant Garamond', 'Playfair Display', Georgia, serif;

    /* Gouttière commune à l'accueil, au portfolio et à l'en-tête en
       superposition : c'est elle qui fait tomber le logo et les titres sur la
       même verticale. À ne pas désynchroniser. */
    --pad:      clamp(20px, 5vw, 76px);
    --sect:     clamp(70px, 9vw, 148px);
    --swing:    cubic-bezier(.16, 1, .3, 1);
    --smooth:   cubic-bezier(.4, 0, .2, 1);

    width:         calc(100vw - var(--sv-sbw, 0px));
    max-width:     calc(100vw - var(--sv-sbw, 0px));
    margin-inline: calc(50% - 50vw + var(--sv-sbw, 0px) / 2);
    margin-top:    calc(-1 * var(--gap-lg, 4rem));
    margin-bottom: calc(-1 * var(--gap-lg, 4rem));
    background:    var(--paper);
    color:         var(--ink);
    font-family:   var(--f-ui);
    overflow-x:    clip;
}

/* style.css réduit le padding vertical de main.container à --gap-md sous 768px.
   La marge négative qui l'annule doit suivre : sinon elle retire 4rem là où le
   conteneur n'en pose que 2, et le héro remonte de 32 px SOUS l'en-tête, où il
   se fait rogner. Même correctif que celui déjà en place sur l'accueil. */
@media (max-width: 768px) {
    [data-sv="root"] {
        margin-top:    calc(-1 * var(--gap-md, 2rem));
        margin-bottom: calc(-1 * var(--gap-md, 2rem));
    }
}

[data-sv="root"] *,
[data-sv="root"] *::before,
[data-sv="root"] *::after { box-sizing: border-box; }
[data-sv="root"] img { display: block; max-width: 100%; }

/* ── Primitives ─────────────────────────────────────────────────────────── */
.sv-wrap  { padding-inline: var(--pad); }
.sv-sect  { padding-block: var(--sect); }
.sv-ivory { background: var(--ivory); }
.sv-ink   { background: var(--ink); color: #fff; }

.sv-eyebrow {
    font-size: .58rem; font-weight: 600; letter-spacing: .34em;
    text-transform: uppercase; color: var(--mute);
    display: flex; align-items: center; gap: 14px; margin: 0;
}
.sv-eyebrow::before {
    content: ''; width: 30px; height: 1px; background: currentColor;
    opacity: .5; flex: none;
}
.sv-ink .sv-eyebrow { color: var(--mute-dk); }

.sv-h2 {
    font-family: var(--f-ui);
    font-weight: 200;
    font-size: clamp(2rem, 4.6vw, 3.8rem);
    line-height: 1.03;
    letter-spacing: -.035em;
    color: inherit;
    margin: 18px 0 0;
}
.sv-h2 em {
    font-family: var(--f-serif);
    font-style: italic; font-weight: 400; letter-spacing: -.008em;
}

.sv-lede {
    font-family: var(--f-serif);
    font-size: clamp(1.35rem, 2.6vw, 2.15rem);
    line-height: 1.34; font-weight: 300; letter-spacing: -.01em;
    color: var(--ink); margin: 22px 0 0; max-width: 34ch;
}
.sv-lede em { font-style: italic; }
.sv-ink .sv-lede { color: #fff; }

.sv-para {
    font-size: .875rem; line-height: 1.95; color: var(--mute);
    letter-spacing: .012em; margin: 20px 0 0; max-width: 62ch;
}
.sv-ink .sv-para { color: var(--mute-dk); }

.sv-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 32px; flex-wrap: wrap; margin-bottom: clamp(30px, 4vw, 62px);
}

.sv-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    font-family: var(--f-ui); font-size: .62rem; font-weight: 600;
    letter-spacing: .22em; text-transform: uppercase;
    padding: 17px 32px; border: 1px solid transparent; cursor: pointer;
    text-decoration: none;
    transition: background .35s var(--smooth), color .35s var(--smooth),
                border-color .35s var(--smooth), transform .35s var(--swing);
}
.sv-btn--solid { background: #fff; color: var(--ink); }
.sv-btn--solid:hover { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); transform: translateY(-2px); }
.sv-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.sv-btn--ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; transform: translateY(-2px); }
.sv-btn--ink   { background: var(--ink); color: #fff; }
.sv-btn--ink:hover { background: var(--ink-2); color: #fff; transform: translateY(-2px); }
.sv-btn--line  { background: transparent; color: var(--ink); border-color: rgba(19,18,17,.28); }
.sv-btn--line:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-2px); }

.sv-js .sv-rise {
    opacity: 0; transform: translateY(28px);
    transition: opacity .9s var(--smooth), transform 1s var(--swing);
    transition-delay: calc(var(--i, 0) * 80ms);
}
.sv-js .sv-rise.is-in { opacity: 1; transform: none; }

/* ══════════════════════════════════════════════════════════════════════════
   1 · HÉRO TYPOGRAPHIQUE
   ══════════════════════════════════════════════════════════════════════════
   Pas de photographie : l'accueil et le portfolio en ont déjà deux, et une
   troisième grande image en ouverture ferait de ces trois pages la même page.
   Ici, la matière c'est le texte, posé sur la trame. */
/* ── Le héro ────────────────────────────────────────────────────────────────
   La photographie est celle de l'accueil (réglée en back-office). Pour que les
   deux pages ne se confondent pas malgré l'image commune, TROIS choses
   diffèrent, et ce sont elles qui font l'identité de cette page :
     · le cadrage — on descend dans l'image (68 % contre 32 % sur l'accueil) ;
     · l'immobilité — pas de lent zoom, la photo se tient tranquille ;
     · la trame — les filets verticaux restent posés par-dessus.
   Le fond encre subsiste sous l'image : c'est ce qu'on voit le temps qu'elle
   arrive, jamais un rectangle blanc. */
.sv-hero {
    position: relative;
    /* Plus court que la fenêtre entière : la composition doit remplir le cadre,
       pas y flotter. Le plafond évite qu'un grand écran rouvre le vide. */
    min-height: clamp(580px, 84svh, 860px);
    display: flex;
    align-items: stretch;
    background: var(--ink);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.sv-hero__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    /* Cadrage bas — l'accueil montre le haut de la même scène. */
    object-position: center 68%;
    z-index: 0;
}
/* Voile de lisibilité. La photo d'ambiance est très claire (murs ivoire, plein
   soleil) : sans un voile appuyé, le texte blanc devient illisible. Contrairement
   à l'accueil, dont le voile est concentré en bas, la composition occupe ICI
   toute la hauteur — le voile doit donc tenir du haut au bas, en laissant
   respirer la diagonale droite de l'image. */
.sv-hero__veil {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(to bottom,
            rgba(10,9,8,.80) 0%, rgba(10,9,8,.60) 26%, rgba(10,9,8,.52) 54%,
            rgba(10,9,8,.66) 82%, rgba(10,9,8,.86) 100%),
        linear-gradient(to right,
            rgba(10,9,8,.62) 0%, rgba(10,9,8,.30) 42%, rgba(10,9,8,.04) 78%);
}
/* Grain — la même matière que sur l'accueil : les deux héros appartiennent au
   même tirage. */
.sv-hero::after {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    opacity: .06; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* La trame : quatre filets verticaux régulièrement espacés. Ils donnent au vide
   une mesure — c'est ce qui distingue une page silencieuse d'une page vide.
   Assez présents pour se voir (le réglage précédent, à 7 %, ne se voyait pas),
   assez discrets pour ne jamais concurrencer le titre. */
.sv-hero__grid {
    position: absolute; inset: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding-inline: var(--pad);
    pointer-events: none;
    z-index: 3;
}
.sv-hero__grid span {
    height: 100%;
    /* Le filet s'éteint vers le bas : il structure le haut de la page et
       s'efface là où le texte prend le relais. Plus discret depuis que la
       photographie occupe le fond — sur une image, un filet à 16 % devient du
       bruit. */
    background: linear-gradient(to bottom, rgba(255,255,255,.11), rgba(255,255,255,.02));
    width: 1px;
}
.sv-hero__grid span:first-child { background: none; }
@media (max-width: 720px) { .sv-hero__grid { display: none; } }

/* La composition occupe TOUTE la hauteur : l'œil-de-bœuf en haut, le titre au
   centre, le sommaire en pied. Le vide se répartit entre les blocs au lieu de
   s'accumuler au-dessus d'eux. */
.sv-hero__body {
    position: relative;
    z-index: 4;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* --hdr-total est publié par includes/header.php sur les grands écrans, où
       l'en-tête est transparent et se superpose au héro. Contrairement à
       l'accueil, dont le texte est en pied, la composition commence ICI en
       haut : sans ce dégagement, l'œil-de-bœuf passerait derrière la barre.
       Le repli à 0 vaut pour le mobile, où l'en-tête est opaque et déjà
       au-dessus du héro. */
    padding-block: calc(var(--hdr-total, 0px) + clamp(24px, 4vh, 52px)) clamp(28px, 5vh, 58px);
}
/* Un filet horizontal sous l'œil-de-bœuf : la trame n'est plus seulement
   verticale, elle devient une vraie grille. */
.sv-hero__body > .sv-eyebrow {
    padding-bottom: clamp(20px, 3vh, 34px);
    border-bottom: 1px solid rgba(255,255,255,.14);
}
.sv-hero__centre { flex: none; }
.sv-hero__title { margin-top: 0; }
.sv-hero .sv-eyebrow { color: rgba(255,255,255,.78); }

.sv-hero__title {
    font-family: var(--f-ui);
    font-weight: 200;
    font-size: clamp(2.7rem, 9.4vw, 8.4rem);
    line-height: .95;
    letter-spacing: -.05em;
    margin: clamp(16px, 2.4vw, 30px) 0 0;
    color: #fff;
}
.sv-hero__title em {
    font-family: var(--f-serif);
    font-style: italic; font-weight: 300; letter-spacing: -.02em;
}
.sv-line { display: block; overflow: hidden; }
.sv-line > span { display: block; }
.sv-js .sv-line > span {
    transform: translateY(105%);
    animation: sv-up 1.15s var(--swing) forwards;
    animation-delay: calc(.12s + var(--i, 0) * .11s);
}
@keyframes sv-up { to { transform: none; } }

.sv-hero__sub {
    max-width: 52ch; margin: clamp(22px, 2.8vw, 34px) 0 0;
    font-size: .9rem; line-height: 1.85; color: rgba(255,255,255,.78);
    letter-spacing: .015em;
}

.sv-js .sv-fade {
    opacity: 0; transform: translateY(20px);
    animation: sv-fade .95s var(--smooth) forwards;
    animation-delay: calc(.34s + var(--i, 0) * .1s);
}
@keyframes sv-fade { to { opacity: 1; transform: none; } }

/* Le sommaire — l'index d'un dossier de plans. */
.sv-index {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: clamp(34px, 5vh, 62px);
    border-top: 1px solid rgba(255,255,255,.16);
}
@media (min-width: 760px) { .sv-index { grid-template-columns: repeat(3, 1fr); } }
.sv-index__i {
    display: flex; align-items: baseline; gap: 14px;
    padding: 18px 0 17px;
    border-bottom: 1px solid rgba(255,255,255,.16);
    text-decoration: none; color: rgba(255,255,255,.82);
    transition: color .4s var(--smooth), padding-left .5s var(--swing);
}
@media (min-width: 760px) {
    .sv-index__i { border-bottom: 0; border-left: 1px solid rgba(255,255,255,.16); padding-inline: 20px; }
    .sv-index__i:first-child { border-left: 0; padding-left: 0; }
}
.sv-index__i:hover { color: #fff; padding-left: 8px; }
@media (min-width: 760px) { .sv-index__i:hover { padding-left: 28px; } .sv-index__i:first-child:hover { padding-left: 8px; } }
.sv-index__n {
    font-size: .55rem; font-weight: 600; letter-spacing: .2em;
    color: rgba(255,255,255,.45); flex: none;
}
.sv-index__t {
    font-family: var(--f-serif); font-style: italic;
    font-size: 1.08rem; line-height: 1.2;
}

.sv-scroll {
    position: absolute; right: var(--pad); bottom: clamp(58px, 9vh, 118px);
    width: 1px; height: clamp(48px, 8vh, 84px);
    background: rgba(255,255,255,.28); overflow: hidden;
}
.sv-scroll span {
    position: absolute; inset: 0; background: #fff;
    transform: translateY(-100%);
    animation: sv-scroll 2.4s var(--smooth) infinite;
}
@keyframes sv-scroll {
    0%   { transform: translateY(-100%); }
    55%  { transform: translateY(0); }
    100% { transform: translateY(100%); }
}
@media (max-width: 900px) { .sv-scroll { display: none; } }

/* ══ 2 · MANIFESTE ════════════════════════════════════════════════════════ */
.sv-manifeste { max-width: 1180px; }
.sv-manifeste .sv-lede { max-width: 26ch; }
@media (min-width: 900px) { .sv-manifeste .sv-lede { max-width: 32ch; } }
.sv-manifeste__cols {
    display: grid; grid-template-columns: 1fr; gap: clamp(18px, 3vw, 54px);
    margin-top: clamp(26px, 3.4vw, 48px);
}
@media (min-width: 820px) { .sv-manifeste__cols { grid-template-columns: 1fr 1fr; } }
.sv-manifeste__cols .sv-para { margin-top: 0; }

/* ══ 3 · LES PLANCHES ═════════════════════════════════════════════════════
   Une prestation = une planche pleine largeur, séparée de la suivante par un
   filet. Le numéro est en filigrane derrière la composition, comme l'annotation
   d'un plan : lisible si on le cherche, silencieux sinon. */
.sv-planches { border-top: 1px solid var(--line); }
.sv-planche {
    position: relative;
    padding-block: clamp(58px, 7.5vw, 118px);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}
.sv-planche__num {
    position: absolute;
    top: clamp(18px, 2.4vw, 40px);
    right: var(--pad);
    font-family: var(--f-ui);
    font-weight: 200;
    font-size: clamp(5rem, 15vw, 15rem);
    line-height: .8;
    letter-spacing: -.06em;
    color: var(--ink);
    opacity: .045;
    pointer-events: none;
    user-select: none;
    transition: opacity 1s var(--smooth);
}
.sv-planche:hover .sv-planche__num { opacity: .075; }
.sv-planche--inv .sv-planche__num { right: auto; left: var(--pad); }

.sv-planche__in {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(26px, 4vw, 72px);
    align-items: center;
}
@media (min-width: 900px) {
    .sv-planche__in { grid-template-columns: 6fr 5fr; }
    /* Sur une planche inversée, ce n'est pas seulement l'ORDRE qui change :
       les largeurs suivent, sinon le visuel passe de la colonne large à la
       colonne étroite d'une planche à l'autre et la série perd son rythme. */
    .sv-planche--inv .sv-planche__in { grid-template-columns: 5fr 6fr; }
    .sv-planche--inv .sv-planche__visuel { order: 2; }
    .sv-planche--inv .sv-planche__texte  { order: 1; }
}

/* Le cadre porte lui-même une teinte et son rapport de forme : si l'image
   manque, est en cours de chargement ou s'avère illisible, la composition
   tient quand même — on ne voit jamais un trou dans la page. */
.sv-planche__visuel {
    overflow: hidden;
    background: var(--sand);
    aspect-ratio: 4 / 3;
}
.sv-planche__visuel img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.6s var(--swing);
}
.sv-planche:hover .sv-planche__visuel img { transform: scale(1.04); }
.sv-planche__vide { display: block; width: 100%; height: 100%; }

.sv-planche__desc { max-width: 46ch; }

/* La liste des prestations : numérotée et filetée, jamais à puces.
   Une puce ronde ne dit rien ; un numéro et un filet disent l'ordre et le
   nombre. */
.sv-liste { list-style: none; margin: clamp(24px, 3vw, 38px) 0 0; padding: 0; }
.sv-liste li {
    display: flex; align-items: baseline; gap: 16px;
    padding: 13px 0;
    border-top: 1px solid var(--line);
    font-size: .84rem; line-height: 1.6; color: var(--ink);
}
.sv-liste li:last-child { border-bottom: 1px solid var(--line); }
.sv-liste__n {
    font-size: .53rem; font-weight: 600; letter-spacing: .18em;
    color: var(--mute); flex: none;
}

.sv-more {
    display: inline-flex; align-items: center; gap: 12px;
    margin-top: clamp(26px, 3vw, 40px);
    font-size: .6rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
    color: var(--ink); text-decoration: none;
    position: relative; padding-bottom: 8px;
}
.sv-more::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px; background: currentColor; opacity: .22;
}
.sv-more::after {
    content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
    background: currentColor; transition: width .6s var(--swing);
}
.sv-more:hover::after { width: 100%; }
.sv-more svg { transition: transform .45s var(--swing); }
.sv-more:hover svg { transform: translateX(6px); }

/* ══ 4 · LA MÉTHODE ═══════════════════════════════════════════════════════
   Un diagramme : une ligne, quatre jalons. Le filet supérieur porte le point
   de chaque étape — c'est la lecture d'une coupe, pas une rangée d'icônes. */
.sv-etapes {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr; gap: 0;
}
@media (min-width: 820px) { .sv-etapes { grid-template-columns: repeat(4, 1fr); } }
.sv-etape {
    position: relative;
    padding: 28px 0 30px;
    border-top: 1px solid var(--line);
}
@media (min-width: 820px) {
    .sv-etape { padding-inline: clamp(14px, 2vw, 30px) clamp(20px, 3vw, 46px); }
    .sv-etape:first-child { padding-left: 0; }
}
/* Le jalon : un carré plein posé SUR le filet, à cheval. */
.sv-etape::before {
    content: '';
    position: absolute;
    top: -3px; left: 0;
    width: 6px; height: 6px;
    background: var(--ink);
    transition: transform .6s var(--swing);
    transform-origin: center;
}
@media (min-width: 820px) { .sv-etape:not(:first-child)::before { left: clamp(14px, 2vw, 30px); } }
.sv-etape:hover::before { transform: scale(1.9); }
.sv-etape__n {
    display: block;
    font-size: .53rem; font-weight: 600; letter-spacing: .24em; color: var(--mute);
}
.sv-etape__t {
    display: block; margin-top: 14px;
    font-family: var(--f-ui); font-weight: 200;
    font-size: clamp(1.2rem, 2vw, 1.6rem); letter-spacing: -.025em; color: var(--ink);
}
.sv-etape__d {
    display: block; margin-top: 12px;
    font-size: .8rem; line-height: 1.85; color: var(--mute); max-width: 34ch;
}

/* ══ 5 · PRINCIPES ════════════════════════════════════════════════════════ */
.sv-principes {
    display: grid; grid-template-columns: 1fr;
    gap: clamp(30px, 4vw, 0px);
}
@media (min-width: 860px) {
    .sv-principes { grid-template-columns: repeat(3, 1fr); gap: 0; }
    /* Les colonnes sont séparées par un filet, pas par du vide : la page garde
       sa trame jusqu'au bout. */
    .sv-principe + .sv-principe {
        border-left: 1px solid var(--line);
        padding-left: clamp(24px, 3.4vw, 56px);
    }
    .sv-principe { padding-right: clamp(24px, 3.4vw, 56px); }
}
.sv-principe__n {
    display: block;
    font-family: var(--f-serif);
    font-size: 1.5rem; font-style: italic; color: var(--mute);
    letter-spacing: .04em;
}
.sv-principe__t {
    font-family: var(--f-ui); font-weight: 300;
    font-size: clamp(1.1rem, 1.8vw, 1.42rem);
    letter-spacing: -.02em; color: var(--ink);
    margin: 16px 0 0; line-height: 1.25;
}

/* ══ 6 · APPEL FINAL ══════════════════════════════════════════════════════ */
.sv-cta__in { display: grid; grid-template-columns: 1fr; gap: clamp(30px, 5vw, 70px); }
@media (min-width: 900px) { .sv-cta__in { grid-template-columns: 1.1fr 1fr; align-items: end; } }
.sv-cta__side { display: flex; flex-direction: column; }
.sv-cta__btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }

.sv-empty { text-align: center; padding-block: clamp(40px, 8vw, 90px); }
.sv-empty .sv-eyebrow { justify-content: center; }
.sv-empty .sv-lede { margin-inline: auto; max-width: 26ch; }
.sv-empty .sv-btn { margin-top: 34px; }

/* ══ Adaptations écran ════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .sv-hero__sub { font-size: .84rem; }
    .sv-btn { padding: 15px 24px; width: 100%; }
    .sv-cta__btns .sv-btn { width: auto; flex: 1 1 auto; }
    .sv-planche__num { font-size: 4.6rem; opacity: .05; }
}

/* ══ Confort de mouvement ═════════════════════════════════════════════════
   Aucune animation ne subsiste ; tous les contenus restent visibles. */
@media (prefers-reduced-motion: reduce) {
    [data-sv="root"] *,
    [data-sv="root"] *::before,
    [data-sv="root"] *::after {
        animation: none !important;
        transition-duration: .01ms !important;
    }
    .sv-line > span { transform: none; }
    .sv-rise, .sv-fade { opacity: 1 !important; transform: none !important; }
}