/* ================================================================== PAGES PROFESSION — vocabulaire de composition « le feuillet » Système graphique identique à l'accueil;en-tête `.phead` commun;toutes les autres structures sont inédites. Motifs:pastille numérotée cerclée · titre et texte en colonnes dont les côtés alternent · filet court sous le titre · cartes de références · bandeau de renvoi vers la page mère. ================================================================== */ .nav-links a[aria-current="page"]::after{transform:scaleX(1)}.nw{white-space:nowrap}.nav-panel a[aria-current="page"]{background:var(--ivoire-2)}:root{--accent-ink:#735B3A}/* ---------- 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}}/* corps de titre un cran sous celui du pilier:« pour médecin et chirurgien » doit tenir sur sa ligne à 1440 px (contrôlé par la sonde) */ .phead__t{font-size:clamp(2rem,3.9vw,3.4rem);line-height:1.08;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}/* v3 (Lucie 25/09):la phrase et les boutons vivent sous le H1,l'aside porte le duo de captures */ .phead__t + .phead__s{margin-top:1.6rem}.phead__cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.9rem}/* v5 (Lucie 25/09):UN SEUL bouton d'en-tête,vers le pilier (il remplace « Voir mes réalisations » + « Parler de votre projet » ET l'ancien rappel .pmere « Le dossier complet »,devenu redondant) */ /* Sous 403 px le bouton se coupait en laissant « santé » seul (28/09):sur téléphone,coupe posée avant « de santé » et bouton à la largeur de sa ligne la plus longue au lieu de toute la colonne */ .phead__l{display:inline}@media(max-width:560px){.phead__l{display:block}}/* la flèche suit « santé » dans le texte (28/09):collée sans espace pour ne jamais passer seule à la ligne,écart = le gap du .btn */ .phead__l .ar{margin-left:.6rem}.crumb{display:flex;align-items:center;gap:.6rem;margin-bottom:1.4rem;flex-wrap:wrap;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 DUO D'EN-TÊTE:deux captures inclinées (Lucie 25/09) ------ */ .duo{position:relative;aspect-ratio:100/94;max-width:560px;margin-left:auto}.duo__c{position:absolute;background:var(--ivoire-2);border:1px solid var(--line-strong);padding:.7rem;box-shadow:0 30px 60px -34px rgba(46,23,38,.55)}.duo__c img{display:block;width:100%;height:auto}.duo__c--a{width:58%;left:0;top:0;transform:rotate(-2.5deg)}.duo__c--b{width:52%;right:0;top:20%;transform:rotate(2deg)}@media(max-width:900px){.duo{margin-left:0;max-width:440px}}/* ---------- L'EXERGUE:la bande de chiffres sur aubergine (médecin) ------ */ .exer{background:var(--aubergine);padding-block:clamp(2.6rem,6vh,4rem)}.exer__k{display:block;font-size:.78rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:1.6rem}.exer__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:clamp(1.6rem,3.5vw,3rem)}.exer__n{font-family:var(--serif);font-style:italic;font-size:clamp(2.2rem,3.8vw,3.2rem);color:var(--ivoire);line-height:1;white-space:nowrap}.exer__l{margin-top:.7rem;font-size:.98rem;line-height:1.55;color:rgba(237,231,221,.72);max-width:34ch}/* ---------- LE SCHÉMA:la preuve dessinée à côté du texte ---------------- */ /* quand un feuillet porte un schéma,le corps s'élargit pour que le texte garde une colonne confortable (jamais de colonne étroite);le centrage vertical vient de la règle générale de .fsec__in */ /* 🐛 corrigé le 25/09 au soir:sans le @media,cette règle (spécificité 0,3,0) battait l'empilement mobile `.fsec__in{1fr}` (0,1,0) À TOUTES les largeurs;la colonne restait à ~114 px à 390 px et « accompagnement » a débordé. */ @media(min-width:901px){.fsec--fig.fsec--alt .fsec__in{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}}.schem{display:grid;grid-template-columns:minmax(0,1fr) clamp(210px,21vw,260px);gap:clamp(1.5rem,3vw,2.5rem);align-items:center}.schem__cadre{margin:0;background:var(--ivoire);border:1px solid var(--line-strong);padding:1.1rem 1.1rem .95rem;box-shadow:0 22px 44px -30px rgba(46,23,38,.5)}.schem__cadre img{display:block;width:100%;height:auto}.schem__cadre figcaption{margin-top:.8rem;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);line-height:1.6}@media(max-width:640px){.schem{grid-template-columns:1fr}.schem__cadre{max-width:300px}}/* ---------- LES FEUILLETS:pastille,titre d'un côté,texte de l'autre --- */ .fsec{padding-block:clamp(3.6rem,8vh,6rem)}.fsec--tone{background:var(--ivoire-2)}.fsec__body a{border-bottom:1px solid var(--accent);transition:color .25s}.fsec__body a:hover{color:var(--accent-deep)}/* 🚨 RÈGLE LUCIE (25/09,valable pour TOUTE conception):deux colonnes adjacentes s'alignent sur leurs CENTRES verticaux,jamais sur le haut. Contrôlé par la sonde (alignMax). Voir mémoire colonnes-adjacentes-centrees. */ .fsec__in{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:clamp(2rem,5vw,5rem);align-items:center}.fsec--alt .fsec__in .fsec__side{order:2}.fsec--alt .fsec__in .fsec__body{order:1}.fsec__puce{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border:1px solid var(--accent);border-radius:50%;font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--accent-deep);margin-bottom:1.2rem}.fsec__t{font-size:clamp(1.7rem,2.9vw,2.5rem);line-height:1.14;max-width:18ch}/* coupe de titre déterministe:une phrase par ligne (Lucie 25/09) */ .fsec__l{display:block}.fsec__t .it{color:var(--accent-deep)}.fsec__t::after{content:"";display:block;width:3.2rem;height:1px;background:var(--accent);margin-top:1.4rem}.fsec__body p{color:var(--ink-2);font-size:1.14rem;max-width:62ch}.fsec__body p + p{margin-top:1.1em}@media(max-width:860px){.fsec__in{grid-template-columns:1fr;gap:1.5rem}.fsec--alt .fsec__in .fsec__side{order:0}.fsec--alt .fsec__in .fsec__body{order:0}.fsec__t{max-width:26ch}}/* ---------- LES RÉFÉRENCES:cartes illustrées vers les fiches projet ----- */ .refs__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1.1rem;margin-top:2.4rem}.refc{display:flex;flex-direction:column;gap:.65rem;border:1px solid var(--line-strong);background:var(--ivoire);padding:1.5rem 1.5rem 1.35rem;transition:border-color .25s,transform .3s,box-shadow .3s}a.refc:hover{border-color:var(--aubergine);transform:translateY(-2px);box-shadow:0 18px 34px -26px rgba(46,23,38,.5)}/* le mockup portfolio en tête de carte,au ras des bords (Lucie 25/09) */ .refc__vue{display:block;margin:-1.5rem -1.5rem .5rem;border-bottom:1px solid var(--line-strong);overflow:hidden}.refc__vue img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;transition:transform .5s}a.refc:hover .refc__vue img{transform:scale(1.03)}.refc__ou{font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-ink)}.refc__nom{font-family:var(--serif);font-size:1.32rem;color:var(--aubergine);line-height:1.2}.refc__txt{color:var(--ink-2);font-size:1rem;flex:1}.refc__lien{display:inline-flex;align-items:center;gap:.45rem;margin-top:.4rem;font-size:.95rem;color:var(--accent-ink)}a.refc:hover .refc__lien{color:var(--aubergine)}.refs__note{margin-top:1.8rem;color:var(--ink-2);font-size:1.05rem}/* ---------- DEVIS,PAIEMENT ET DÉLAI:3 réponses de la FAQ du pilier ----- */ /* (Lucie 28/09) Tout visible,sans accordéon:l'accordéon appartient au pilier. Titre en haut,puis 2 colonnes de longueur voisine,centrées verticalement (règle Lucie);questions en sous-titres,filet fin entre les réponses. Sous 860 px,tout s'empile dans l'ordre V,VI,VII. */ .fsec__qas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,5vw,5rem);align-items:center;margin-top:2.4rem}.fsec__qa + .fsec__qa{margin-top:1.9rem;padding-top:1.9rem;border-top:1px solid var(--line-strong)}@media(max-width:860px){.fsec__qas{grid-template-columns:1fr;gap:0}.fsec__col + .fsec__col{margin-top:1.9rem;padding-top:1.9rem;border-top:1px solid var(--line-strong)}}.fsec__q{font-family:var(--serif);font-weight:400;font-size:clamp(1.18rem,1.7vw,1.4rem);color:var(--aubergine);line-height:1.3;margin-bottom:.85rem}/* ---------- LE RENVOI VERS LA PAGE MÈRE ----------------------------------- */ /* Étoffé le 25/09 (Lucie):bloc de conversion,pas un simple lien. Cadre contrasté,sommaire réel du pilier (aucune section inventée),deux accès. */ .mere{padding-block:clamp(3rem,7vh,5rem)}.mere__cadre{background:var(--ivoire-2);border:1px solid var(--line-strong);padding:clamp(1.8rem,4vw,3.2rem) clamp(1.5rem,3.6vw,3.2rem);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.8rem,4vw,4.2rem);align-items:center;/* centres verticaux:règle Lucie */}.mere__l{display:block;font-size:.78rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:.8rem}.mere__a{display:inline-block;font-family:var(--serif);font-size:clamp(1.55rem,2.6vw,2.15rem);color:var(--aubergine);line-height:1.25;transition:color .25s}.mere__a:hover{color:var(--accent-deep)}.mere__p{margin-top:1rem;color:var(--ink-2);font-size:1.05rem;line-height:1.65;max-width:48ch}.mere__btn{margin-top:1.7rem}.mere__list{list-style:none;margin:0;padding:0}.mere__list li{display:flex;gap:.8rem;align-items:baseline;padding-block:.8rem;color:var(--aubergine);font-size:1.02rem;line-height:1.5}.mere__list li+li{border-top:1px solid var(--line-strong)}.mere__fl{flex:none;color:var(--accent-deep)}@media (max-width:900px){.mere__cadre{grid-template-columns:1fr;gap:1.6rem}}