/* ================================================================== PAGE À PROPOS — « l'entretien »,traitement graphique Système graphique identique à l'accueil;en-tête `.phead` commun (sans sommaire);toutes les autres structures sont inédites. Motifs:bandes alternées dont une EN CAMEL · chiffres géants en filigrane avec parallaxe · portrait incliné sur décalé camel · surlignage camel · filets qui se tracent. ================================================================== */ .nav-links a[aria-current="page"]::after{transform:scaleX(1)}.nav-panel a[aria-current="page"]{background:var(--ivoire-2)}:root{--accent-ink:#735B3A}/* ---------- EN-TÊTE DE PAGE (gabarit commun) + OUVERTURE GRAPHIQUE ------- */ .phead{padding-top:clamp(7.5rem,15vh,10.5rem);padding-bottom:0;position:relative;overflow:hidden}.phead__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(.8rem,2vw,1.6rem);align-items:center;padding-bottom:clamp(3rem,7vh,5rem)}@media(max-width:900px){.phead__in{display:block}}.phead__l{grid-column:1 / span 7;grid-row:1;z-index:2;position:relative}/* 🚨 Corps réduit de 5,6 à 5rem:« conceptrice digitale » (18/07) est bien plus long que « conceptrice » et cassait en 2 lignes,ce qui donnait 2 aplats camel décalés qui se télescopaient et rognaient les jambages. Le surlignage n'a de tenue que sur UNE ligne. Contrôlé par la sonde (`surlignageUneLigne`). */ .phead__t{font-size:clamp(2.3rem,5.8vw,5rem);line-height:1;margin-top:1.4rem}.phead__t .it{color:var(--accent-deep)}/* Surlignage camel:le mot est posé SUR un aplat,pas coloré. `box-decoration-break` pour que le fond suive si le mot passe à la ligne. 🚨 Padding DROIT à zéro:l'aplat doit s'arrêter net sur le « e » final. Avec .16em à droite il dépassait,et le point camel qui suit semblait posé dessus (Lucie,18/07). Le `margin-right` ménage l'espace avant le point. Le padding gauche reste compensé par le `margin-left` négatif,sinon le titre ne s'aligne plus sur la colonne. */ .phead__t .hl{background:var(--accent);color:var(--aubergine);padding:.02em 0 .06em .16em;margin-left:-.16em;margin-right:.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}.phead__meta{margin-top:1.6rem;font-size:clamp(1.15rem,1.6vw,1.5rem);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}.phead__s{color:var(--ink-2);font-size:1.16rem;max-width:44ch;margin-top:1.4rem}.phead__cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.8rem}.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 portrait:incliné,posé sur un aplat camel décalé (impression désaxée). */ .phead__fig{grid-column:8 / span 5;grid-row:1;z-index:1;margin:0;position:relative;transform:rotate(-2.6deg)}@media(max-width:900px){.phead__fig{transform:rotate(-1.6deg);margin-top:2.6rem;max-width:22rem}}.phead__fig::before{content:"";position:absolute;z-index:0;inset:1.6rem -1.6rem -1.6rem 1.6rem;background:var(--accent)}.phead__fig img{display:block;position:relative;z-index:1;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 14%}/* ---------- L'ENTRETIEN:bandes alternées,chiffre en filigrane --------- */ .qa{position:relative;overflow:hidden;padding-block:clamp(3.6rem,9vh,7rem)}.qa--a{background:var(--ivoire-2)}/* sable */ .qa--b{background:var(--aubergine);color:var(--ivoire)}/* aubergine*/ .qa--c{background:var(--ivoire)}/* ivoire */ /* 🚨 La bande 04 était en `--aubergine-2`,comme le CTA `.final` qui la suit:deux sombres collés,avec la lueur radiale du CTA qui dessinait une bavure au raccord. Retour Lucie (18/07):« la couleur de fond de la section Faisons connaissance jure avec celle du dessus ». Elle repasse en sable:le dernier bloc avant le CTA doit être CLAIR,c'est ce qui fait exister la bascule sombre du CTA. On accepte donc qu'elle partage son fond avec la bande 01:la règle qui compte n'est pas « 4 fonds distincts » mais « jamais deux bandes voisines identiques ». */ .qa--d{background:var(--ivoire-2)}/* sable */ /* Le chiffre géant:ENTIER dans sa bande (Lucie a refusé les chiffres rognés le 18/07),en filigrane derrière le texte,et animé en parallaxe au défilement. Conteneur en `inset-block:0` + `display:flex`:la transformation de parallaxe reste libre,elle n'a pas à composer avec un `translateY(-50%)` de centrage. */ .qa__big{position:absolute;inset-block:0;right:clamp(.5rem,3.5vw,4rem);display:flex;align-items:center;pointer-events:none;user-select:none;font-family:var(--serif);font-size:clamp(7rem,20vw,18rem);line-height:.72;color:currentColor;opacity:.11;will-change:transform}@media(max-width:760px){.qa__big{opacity:.07;font-size:clamp(6rem,26vw,10rem)}}.qa__in{position:relative;z-index:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(.8rem,2vw,1.6rem)}@media(max-width:820px){.qa__in{display:block}}/* 🚨 PLUS de décalage horizontal par bande. J'avais mis 0/6/12/4 % pour créer du mouvement d'une bande à l'autre:Lucie l'a lu comme un défaut d'alignement (« la section 3 est légèrement décalée sur la droite comparé à celle du dessous »). Un décalage sans raison lisible passe pour une erreur,pas pour un geste. Toutes les bandes partent maintenant du même bord. Contrôlé par la sonde (`bandesAlignees`). */ .qa__q{grid-column:1 / span 9;grid-row:1;font-size:clamp(1.8rem,4vw,3.3rem);line-height:1.04;letter-spacing:-.006em}/* Les titres sont affirmatifs (18/07):c'est l'italique camel qui porte l'accent,les guillemets de citation n'ont plus d'objet. */ .qa__q .it{color:var(--accent-deep)}.qa--b .qa__q .it{color:var(--accent)}/* Filet camel qui se trace à l'apparition du bloc. */ .qa__r{grid-column:1 / span 9;grid-row:2;height:2px;margin-top:1.5rem;background:var(--accent);width:0;transition:width .9s cubic-bezier(.22,1,.36,1) .1s}.reveal.in .qa__r{width:min(16rem,42%)}@media(max-width:820px){.qa__r{margin-top:1.1rem}}/* L'ESCALIER interne:la réponse démarre 3 colonnes à droite de la question. */ .qa__a{grid-column:4 / span 9;grid-row:3;margin-top:clamp(1.4rem,3vh,2.2rem);max-width:78ch}@media(max-width:820px){.qa__a{margin-top:1.2rem;max-width:none}}.qa__a p{color:var(--ink-2);font-size:1.13rem}/* 🚨 BLANC franc,pas l'ivoire de marque:sur l'aubergine,l'ivoire à 80 % lisait « beige » et manquait de contraste (Lucie,18/07). C'est la seule entorse au système de couleurs,assumée pour la lisibilité du corps de texte. */ .qa--b .qa__a p{color:#FFFFFF}.qa__a p + p{margin-top:1.05em}.qa__a b{font-weight:500;color:var(--aubergine)}.qa--b .qa__a b{color:var(--ivoire)}/* ---------- LES REPÈRES:la bande camel,inédite sur le site ------------ */ /* Camel plein avec texte aubergine:6,3:1,le seul emploi du camel en aplat de section de tout le site. C'est le pic graphique de la page. */ .rep{background:var(--accent);color:var(--aubergine);position:relative;overflow:hidden;padding-block:clamp(3.2rem,8vh,5.5rem)}.rep__in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}@media(max-width:900px){.rep__in{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.rep__in{grid-template-columns:1fr}}.rep__i{padding:0 clamp(1rem,2.4vw,2rem);border-left:1px solid rgba(46,23,38,.28)}.rep__i:first-child{border-left:0;padding-left:0}@media(max-width:900px){.rep__i{padding-block:clamp(.9rem,2vh,1.3rem)}.rep__i:nth-child(3){border-left:0;padding-left:0}.rep__i:nth-child(n+3){border-top:1px solid rgba(46,23,38,.28)}}@media(max-width:560px){.rep__i{border-left:0;padding-left:0}.rep__i + .rep__i{border-top:1px solid rgba(46,23,38,.28)}}/* Aubergine PLEIN sur le camel:à 66 % d'opacité ces petites capitales ne donnaient que 3,69:1,sous le seuil AA de 4,5:1. En plein,7,5:1. */ .rep__k{display:block;margin-bottom:.6rem;font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--aubergine)}.rep__v{display:block;font-family:var(--serif);font-size:clamp(1.18rem,1.75vw,1.46rem);line-height:1.32}/* Note secondaire:aubergine à 80 % sur camel = 5,0:1,au-dessus du seuil AA. Ne pas descendre plus bas,à 66 % on tombe déjà sous 4,5:1. */ .rep__n{display:block;margin-top:.6rem;font-size:.92rem;line-height:1.42;color:rgba(46,23,38,.8)}@media(prefers-reduced-motion:reduce){.qa__big{transform:none !important}.qa__r{transition:none}}