/* ================================================================== PAGE PRESTATIONS — vocabulaire de composition « les déclinaisons » Une même signature déclinée sur tous les supports. Système graphique identique à l'accueil;en-tête `.phead` commun aux pages intérieures;toutes les autres structures sont inédites. Motifs:rail « système » en marge · applications montées comme des tirages (traits de coupe) · bandeaux de déclinaisons. ================================================================== */ .nav-links a[aria-current="page"]::after{transform:scaleX(1)}.nav-panel a[aria-current="page"]{background:var(--ivoire-2)}:root{--gut:5.5rem;/* Camel « encre »:même teinte que --accent-deep (H 34° S 33%) assombri à L 34%. Réservé aux petits labels capitales sur fond clair,où le camel normal tombe à 2,24:1 (WCAG AA exige 4,5:1). Celui-ci donne 4,74:1. */ --accent-ink:#735B3A}@media(max-width:900px){:root{--gut:3rem}}/* ---------- EN-TÊTE DE PAGE (gabarit commun aux pages intérieures) -------- */ .phead{padding-top:clamp(7.5rem,15vh,10.5rem);padding-bottom:0}.phead__in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(2rem,4vw,4rem);align-items:center;padding-bottom:clamp(2.6rem,5vh,3.6rem);border-bottom:1px solid var(--line-strong)}@media(max-width:900px){.phead__in{grid-template-columns:1fr;gap:2.2rem;align-items:start}}.phead__t{font-size:clamp(2.2rem,4.6vw,4.1rem);line-height:1.05;margin-top:1.5rem}.phead__t .it{color:var(--accent-deep)}.phead__meta{margin-top:1.7rem;font-size:1.05rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}.phead__aside{padding-bottom:0}.phead__s{color:var(--ink-2);font-size:1.18rem;max-width:38ch}.phead__cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.9rem}.somm{border-bottom:1px solid var(--line-strong)}.somm__in{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.8rem);flex-wrap:wrap;padding-block:clamp(2.1rem,4vh,3rem)}.somm__l{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);flex:0 0 auto}.somm__in a{display:inline-flex;align-items:baseline;gap:.5rem;font-size:1.12rem;transition:color .25s}.somm__in a i{font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--accent-deep)}.somm__in a:hover{color:var(--accent-deep)}.crumb{display:flex;align-items:center;gap:.6rem;margin-bottom:1.4rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}.crumb a{transition:color .25s}.crumb a:hover{color:var(--accent-deep)}.crumb i{font-style:normal;color:var(--accent)}/* ---------- LE PRINCIPE:la signature,énoncée ------------------------- */ /* Amorce de la page:tout part d'une même signature,déclinée partout. */ .sign{padding-block:clamp(4.4rem,9vh,7rem);border-bottom:1px solid var(--line)}.sign__in{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}@media(max-width:900px){.sign__in{grid-template-columns:1fr;gap:1.5rem}}.sign__l{display:block;margin-bottom:1.2rem;font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink)}.sign__t{font-size:clamp(2rem,3.6vw,3.1rem);line-height:1.1;max-width:20ch}.sign__t .it{color:var(--accent-deep)}.sign__body p{color:var(--ink-2);font-size:1.15rem;max-width:60ch}.sign__body p + p{margin-top:1.1em}.sign__body b{font-weight:500;color:var(--aubergine)}/* ---------- LES APPLICATIONS:le rail « système » + les tirages -------- */ .asec{padding-block:clamp(5rem,11vh,9rem)}.asec__head{max-width:60ch}.asec__l{display:inline-flex;align-items:center;gap:.7rem;margin-bottom:1.2rem;font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-ink)}.asec__l::before{content:"";width:1.8rem;height:1px;background:var(--accent-deep)}.asec__t{font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.12;max-width:22ch}.asec__t .it{color:var(--accent-deep)}.asec__chapo{color:var(--ink-2);font-size:1.14rem;margin-top:1.1rem;max-width:60ch}/* le rail est la colonne de gauche;sa ligne verticale continue relie les cinq applications:une seule ossature,plusieurs déclinaisons. */ .appls{display:grid;grid-template-columns:var(--gut) minmax(0,1fr);gap:clamp(1.4rem,3vw,3rem);margin-top:clamp(2.6rem,5vh,3.6rem)}@media(max-width:760px){.appls{grid-template-columns:1fr}}.appls__rail{position:relative}.appls__rail::before{content:"";position:absolute;left:50%;top:.5rem;bottom:.5rem;width:1px;background:var(--line-strong)}.appls__rail span{position:sticky;top:38vh;display:block;width:max-content;margin:0 auto;writing-mode:vertical-rl;transform:rotate(180deg);font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-ink);background:var(--ivoire);padding:.8rem 0}@media(max-width:760px){.appls__rail{display:none}}.appls__flow{display:flex;flex-direction:column;gap:clamp(1.5rem,3vw,2.4rem);min-width:0}/* chaque prestation:une feuille montée,repérée par des traits de coupe */ .appl{position:relative;border:1px solid var(--line-strong);background:var(--ivoire);padding:clamp(1.6rem,3vw,2.6rem);scroll-margin-top:6rem}.appl::before,.appl::after{content:"";position:absolute;width:11px;height:11px;opacity:.55;background:linear-gradient(var(--accent-ink),var(--accent-ink)) center/1px 100% no-repeat,linear-gradient(var(--accent-ink),var(--accent-ink)) center/100% 1px no-repeat}.appl::before{top:-6px;left:-6px}.appl::after{bottom:-6px;right:-6px}.appl__head{display:flex;align-items:baseline;gap:clamp(.9rem,2vw,1.4rem)}.appl__no{flex:0 0 auto;font-family:var(--serif);font-style:italic;line-height:1;font-size:clamp(1.9rem,3.2vw,2.7rem);color:var(--accent-deep)}.appl__t{font-family:var(--serif);font-size:clamp(1.5rem,2.5vw,2.1rem);letter-spacing:.015em;line-height:1.12}.appl__lead{margin-top:1rem;font-size:1.18rem;color:var(--aubergine);max-width:60ch}.appl__body{margin-top:.9rem}.appl__body p{color:var(--ink-2);font-size:1.09rem;max-width:72ch}.appl__body p + p{margin-top:.9em}.appl__body b{font-weight:500;color:var(--aubergine)}/* le bandeau de déclinaisons:les supports sur lesquels la prestation s'applique */ .appl__decl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem 1.3rem;align-items:baseline;margin-top:1.7rem}@media(max-width:560px){.appl__decl{grid-template-columns:1fr;gap:.7rem}}.appl__declh{font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);padding-top:.4rem}.appl__chips{display:flex;flex-wrap:wrap;gap:.55rem}.appl__chips span{border:1px solid var(--line-strong);padding:.45rem .95rem;font-size:1.02rem}/* la référence:un cas réel,ou une note factuelle quand aucun cas n'est nommé */ .appl__ref{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:1.05rem;color:var(--ink-2);max-width:72ch}.appl__ref b{display:block;margin-bottom:.5rem;font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)}/* les deux tirages sociaux (prestation réseaux sociaux) */ .appl__figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem);margin-top:1.8rem}@media(max-width:640px){.appl__figs{grid-template-columns:1fr}}.appl__fig{margin:0;border:1px solid var(--line-strong);background:var(--ivoire-2)}.appl__fig a{display:block;overflow:hidden}.appl__fig img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top;transition:transform .8s cubic-bezier(.22,.61,.36,1)}.appl__fig a:hover img{transform:scale(1.03)}.appl__cap{padding:.9rem 1.05rem;font-size:.98rem;color:var(--ink-2);line-height:1.5;border-top:1px solid var(--line)}.appl__cap b{color:var(--aubergine);font-weight:500}/* lien sortant visible vers le compte,sous la légende */ .appl__u{display:inline-flex;align-items:center;gap:.45rem;margin-top:.7rem;font-size:.92rem;color:var(--accent-ink);word-break:break-word;border-bottom:1px solid var(--line-strong);padding-bottom:.15rem;transition:color .25s,border-color .25s}.appl__u:hover{color:var(--aubergine);border-color:var(--aubergine)}/* ---------- LE FIL CONDUCTEUR:une seule interlocutrice --------------- */ .uniq{background:var(--aubergine);color:var(--ivoire);padding-block:clamp(5rem,11vh,9rem)}.uniq__in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}@media(max-width:900px){.uniq__in{grid-template-columns:1fr;gap:1.6rem}}.uniq__l{display:block;margin-bottom:1.3rem;font-size:.8rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}.uniq__t{font-size:clamp(2.2rem,4.2vw,3.5rem);line-height:1.08;max-width:16ch}.uniq__t .it{color:var(--accent)}.uniq__body p{color:rgba(237,231,221,.82);font-size:1.15rem;max-width:58ch}.uniq__body p + p{margin-top:1em}.uniq__body b{color:var(--ivoire);font-weight:500}.uniq__list{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}.uniq__list span{border:1px solid rgba(201,168,127,.5);padding:.5rem 1rem;font-size:1.02rem;color:var(--ivoire)}/* ---------- CTA FINAL sur sable -------------------------------------- */ /* La section aubergine « le fil conducteur » précède immédiatement le CTA:deux aubergines qui se suivent se heurtaient. Le CTA passe sur sable (le `.final` de l'accueil est aubergine + texte ivoire + bouton `--iv`,à annuler). */ .final{background:var(--ivoire-2);color:var(--aubergine)}.final::before{display:none}.final__t{color:var(--aubergine)}.final__t .it{color:var(--accent-deep)}.final__s{color:var(--ink-2)}