/* ========================================================================= MOSAICA / PERSPECTIVES — LA REVUE ------------------------------------------------------------------------- Feuille chargee par perspectives.html. Prefixe `per-` exclusivement. POURQUOI UN NOUVEAU FICHIER `assets/perspectives.css` reste charge par en/insights.html, en/insights/articles/index.html et perspectives/articles/index.html, qui ne sont pas dans la portee de cette phase. Le reecrire aurait casse trois pages. L'ancien fichier n'est donc pas du code mort : il est encore vivant ailleurs. Il devra etre retire le jour ou ces pages seront reprises. `assets/service-hero-premium.css`, emprunte a la famille Services par l'ancienne page mere, n'est plus charge ici : Perspectives cesse d'habiter le heros d'une autre famille. CE QUE PERSPECTIVES EST Ni une Expertise, ni un Service, ni un blogue. La quatrieme question du site : qu'est-ce que Mosaica observe, apprend, analyse et pense ? La section est donc traitee comme une REVUE DE CABINET, et sa grammaire propre est celle d'un index editorial : le filet une publication est separee de la suivante par un trait, jamais enfermee dans une carte le numero les formats et les mouvements sont numerotes : la revue a un sommaire, pas une grille la metadonnee surtitre, auteur, date, duree — sobres, sur une ligne la mesure un texte long garde une largeur de lecture confortable le blanc le registre dominant ; le mineral et le bleu nuit ne servent qu'a marquer un changement de registre TROIS GRAMMAIRES, TROIS FAMILLES exp- une coupe : ce qui est visible, puis ce qui le produit prep- un seuil : avant l'arrivee, le passage, la suite per- un sommaire : ce qui est publie, date et signe Aucune de ces feuilles n'en consomme une autre. Perspectives ne depend pas du socle des Expertises pour fabriquer une fausse coherence. CE QUE CETTE FEUILLE REFUSE Pas de carte par defaut, pas de coin arrondi au dela du filet, pas d'ombre, pas de degrade decoratif, pas d'icone generique, pas de badge colore, pas de vignette systematique, pas de bouton « Lire plus ». ANIMATION Les etats d'attente n'existent que sous `html.per-anim`, posee par le filet du et confirmee par assets/perspectives-revue.js. Sans JavaScript ou en mouvement reduit, la page est complete. ========================================================================= */ /* ============================== 1. JETONS ============================= */ .per-page{ --per-white:#FFFFFF; --per-surface:#F7F8F8; --per-deep:#061F2C; --per-deep-lift:#0B3448; --per-navy:var(--navy,#0e4d6c); --per-navy-deep:var(--navy-deep,#0a3850); --per-gold:#C7A66A; --per-gold-soft:#D9BE8C; --per-gold-ink:#7A5A24; --per-ink:#37444C; --per-ink-dim:#59666E; --per-steel-ink:#4A6A7D; --per-on-dark:rgba(255,255,255,0.87); --per-on-dark-dim:rgba(255,255,255,0.70); --per-rule:rgba(6,31,44,0.14); --per-rule-dark:rgba(255,255,255,0.20); --per-hair:rgba(6,31,44,0.09); --per-shell:1240px; --per-pad:clamp(1.25rem,4vw,3.5rem); --per-ease:cubic-bezier(.22,.61,.36,1); font-family:'Space Grotesk',sans-serif; color:var(--per-ink); background:var(--per-white); } .per-page [data-per-theme="deep"]{ --per-rule:rgba(255,255,255,0.20); --per-hair:rgba(255,255,255,0.12); } .per-page [id]{scroll-margin-top:calc(var(--per-nav-h,var(--nav-h,68px)) + 1rem)} /* ===================== 2. SCENES ET CONTENEUR ========================= */ /* Aucune scene n'impose de hauteur. Le blanc domine ; le mineral et le bleu nuit ne marquent qu'un changement de registre, jamais une decoration. */ .per-scene{position:relative;padding-block:clamp(3rem,7.5vh,5.5rem)} .per-scene--white{background:var(--per-white)} .per-scene--surface{background:var(--per-surface)} .per-scene--night{background:var(--per-deep)} /* Le seul ornement d'une scene profonde : un filet dore en bord haut. */ .per-scene--night::before{ content:"";position:absolute;left:0;right:0;top:0;height:1px; background:linear-gradient(90deg,var(--per-gold) 0%,rgba(199,166,106,0.40) 46%,rgba(199,166,106,0.10) 100%); } .per-shell{ width:min(var(--per-shell),100%); margin-inline:auto; padding-inline:var(--per-pad); } .per-shell > *{min-width:0} /* La mesure de lecture. Un texte de revue ne s'etale jamais sur toute la largeur disponible. */ .per-narrow{max-width:70ch} /* ============================ 3. TYPOGRAPHIE ========================== */ .per-eyebrow{ font-size:0.78rem;font-weight:700; letter-spacing:0.18em;text-transform:uppercase;line-height:1.55; color:var(--per-gold-ink);margin:0 0 1.1rem; } [data-per-theme="deep"] .per-eyebrow{color:var(--per-gold)} .per-h1{ font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(2rem,1.05rem + 3.1vw,3.9rem); line-height:1.08;letter-spacing:-0.014em; color:var(--per-navy-deep); margin:0 0 1.4rem;max-width:min(96%,26ch); } .per-h2{ font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.55rem,1.05rem + 2.05vw,2.6rem); line-height:1.16;color:var(--per-navy-deep); margin:0 0 1.2rem;max-width:28ch; } .per-h2--wide{max-width:36ch} [data-per-theme="deep"] .per-h2{color:#fff} .per-lead{ font-size:clamp(1.08rem,1rem + 0.4vw,1.28rem); line-height:1.66;color:var(--per-ink);max-width:56ch;margin:0; } [data-per-theme="deep"] .per-lead{color:var(--per-on-dark)} .per-p{font-size:1.05rem;line-height:1.75;color:var(--per-ink);max-width:62ch;margin:0} .per-p + .per-p{margin-top:1rem} [data-per-theme="deep"] .per-p{color:var(--per-on-dark)} .per-strong{ margin:1.85rem 0 0;padding-left:1.2rem; border-left:2px solid var(--per-gold); font-family:'Ibarra Real Nova',serif; font-size:clamp(1.16rem,1rem + 0.7vw,1.5rem); line-height:1.45;color:var(--per-navy);max-width:46ch; } [data-per-theme="deep"] .per-strong{color:var(--per-gold-soft)} .per-note{ margin:1.15rem 0 0;padding-left:1rem; border-left:1px solid var(--per-rule); font-size:0.96rem;line-height:1.62;color:var(--per-ink-dim);max-width:60ch; } [data-per-theme="deep"] .per-note{color:var(--per-on-dark-dim)} .per-crumb{ font-size:0.82rem;line-height:1.6;color:var(--per-ink-dim);margin-bottom:1.5rem; } .per-crumb a{color:var(--per-navy);text-decoration:none;border-bottom:1px solid var(--per-hair)} .per-crumb a:hover{color:var(--per-gold-ink);border-bottom-color:currentColor} .per-page a:focus-visible, .per-page button:focus-visible{outline:2px solid var(--per-gold-ink);outline-offset:3px} [data-per-theme="deep"] a:focus-visible, [data-per-theme="deep"] button:focus-visible{outline-color:var(--per-gold)} /* ---- LA METADONNEE ---- Surtitre, auteur, date, duree : une seule ligne, sobre, jamais des badges empiles. C'est ce qui donne son grain a une revue. */ .per-meta{ display:flex;flex-wrap:wrap;align-items:baseline; gap:0.25rem 0.7rem;margin:0 0 0.8rem; font-size:0.8rem;line-height:1.5;color:var(--per-ink-dim); } .per-meta b{ font-weight:700;letter-spacing:0.15em;text-transform:uppercase; font-size:0.72rem;color:var(--per-gold-ink); } .per-meta span::before{content:"·";margin-right:0.6rem;color:var(--per-rule)} .per-meta span:first-of-type::before{content:none;margin:0} [data-per-theme="deep"] .per-meta{color:var(--per-on-dark-dim)} [data-per-theme="deep"] .per-meta b{color:var(--per-gold)} /* Le nom de la signature mène à ses seules chroniques. Discret dans la ligne de métadonnées — le titre reste l'action principale de l'entrée — mais souligné, donc reconnaissable comme lien sans avoir à le survoler. */ .per-meta__auteur{ color:inherit;text-decoration:underline; text-decoration-color:var(--per-rule);text-underline-offset:3px; } .per-meta__auteur:hover, .per-meta__auteur:focus-visible{ color:var(--per-gold-ink);text-decoration-color:currentColor; } [data-per-theme="deep"] .per-meta__auteur:hover, [data-per-theme="deep"] .per-meta__auteur:focus-visible{color:var(--per-gold)} .per-link{ display:inline-flex;align-items:center;gap:0.55rem; margin-top:1rem;min-height:44px; font-size:1rem;font-weight:600; color:var(--per-gold-ink);text-decoration:none; border-bottom:1px solid currentColor;padding-bottom:0.1rem; transition:color .22s ease; } .per-link::after{content:"\2192";font-weight:400} .per-link:hover{color:var(--per-navy-deep)} .per-link--minor{ font-size:0.94rem;font-weight:500; color:var(--per-ink-dim);border-bottom-color:var(--per-rule); margin-top:0.5rem; } .per-link--minor:hover{color:var(--per-gold-ink);border-bottom-color:var(--per-gold-ink)} [data-per-theme="deep"] .per-link{color:var(--per-gold)} [data-per-theme="deep"] .per-link:hover{color:#fff} /* ============================ 4. LE HEROS ============================= */ /* Editorial et rien d'autre : un surtitre, un titre, une ligne. Pas de statistique, pas de carrousel, pas de CTA, pas de grand paragraphe. L'ancienne page mere empruntait ici le heros immersif des Services. */ .per-hero{ background:var(--per-white); padding-block:clamp(2.25rem,5.5vh,4.25rem); border-bottom:1px solid var(--per-rule); } .per-hero__lead{max-width:60ch} /* ==================== 5. MOUVEMENT 02 : A LIRE MAINTENANT ============= */ /* Une vraie hierarchie : une publication principale, deux au plus a cote. Jamais une grille uniforme. La principale recoit la mesure large et le filet dore ; les secondaires se lisent en liste. */ .per-now{ display:grid; grid-template-columns:minmax(0,1.32fr) minmax(0,0.68fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; margin-top:clamp(1.75rem,4.5vh,2.75rem); } .per-now__main{padding-top:1.35rem;border-top:2px solid var(--per-gold)} .per-now__main .per-h2{margin-bottom:0.9rem;max-width:30ch} .per-now__main .per-p{max-width:56ch} .per-now__side{padding-top:1.35rem;border-top:1px solid var(--per-rule)} .per-now__label{ margin:0 0 0.85rem; font-size:0.72rem;font-weight:700; letter-spacing:0.16em;text-transform:uppercase;color:var(--per-steel-ink); } .per-now__list{list-style:none;margin:0;padding:0} .per-now__list li{padding-block:0.95rem;border-top:1px solid var(--per-hair)} .per-now__list li:first-child{border-top:0;padding-top:0} .per-now__list a{ display:block;text-decoration:none; font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:1.06rem;line-height:1.3;color:var(--per-navy-deep); } .per-now__list a:hover{color:var(--per-gold-ink)} .per-now__list .per-meta{margin:0.35rem 0 0;font-size:0.78rem} /* ============ 6. MOUVEMENT 03 : LES QUATRE FORMATS ==================== */ /* Un sommaire, pas quatre cartes. Numero, nom, une phrase, un lien — et pour un format qui n'a rien publie, un etat dit franchement plutot qu'un lien vers un contenant vide. */ .per-formats{ list-style:none;margin:clamp(1.75rem,4.5vh,2.75rem) 0 0;padding:0; border-top:1px solid var(--per-rule); } .per-format{ display:grid; grid-template-columns:auto minmax(0,0.3fr) minmax(0,0.7fr); gap:0.4rem clamp(1.25rem,3vw,2.75rem); align-items:baseline; padding-block:clamp(1.15rem,3vh,1.8rem); border-bottom:1px solid var(--per-rule); } .per-format__n{ font-family:'Ibarra Real Nova',serif;font-weight:400; font-size:clamp(1.3rem,1.1rem + 0.6vw,1.72rem); line-height:1;color:var(--per-gold-ink); } .per-format__name{ margin:0; font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.2rem,1.02rem + 0.8vw,1.6rem); line-height:1.2;color:var(--per-navy-deep); } .per-format__say{ grid-column:3;margin:0; font-size:1.01rem;line-height:1.66;color:var(--per-ink); } .per-format__state{ grid-column:3;margin:0.5rem 0 0; font-size:0.9rem;line-height:1.55;color:var(--per-ink-dim); } .per-format__state b{ font-weight:700;letter-spacing:0.14em;text-transform:uppercase; font-size:0.7rem;color:var(--per-steel-ink);margin-right:0.5rem; } .per-format .per-link{grid-column:3;margin-top:0.6rem} /* Un format encore sans publication n'est pas mis en avant : son nom garde l'encre du texte courant plutot que celle des titres. */ .per-format--soon .per-format__name{color:var(--per-ink-dim)} .per-format--soon .per-format__n{color:var(--per-steel-ink)} /* ============ 7. MOUVEMENT 04 : LE TRAVAIL INTELLECTUEL =============== */ /* LA GRAMMAIRE FAIT / INTERPRETATION. L'exigence majeure du format Analyse : le lecteur doit distinguer d'un coup d'oeil ce que dit une source de ce que Mosaica en deduit. La distinction est portee par la structure et le filet, jamais par dix gros encadres empiles. Un filet gris pour le document, un filet dore pour la lecture : deux registres, deux poids. */ .per-grammar{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.5rem,4vw,3.25rem); margin-top:clamp(1.75rem,4.5vh,2.75rem); } .per-grammar__col{padding-left:1.2rem;border-left:1px solid var(--per-rule-dark)} .per-grammar__col--read{border-left:2px solid var(--per-gold)} .per-grammar__kind{ margin:0 0 0.6rem; font-size:0.74rem;font-weight:700; letter-spacing:0.16em;text-transform:uppercase;color:var(--per-on-dark-dim); } .per-grammar__col--read .per-grammar__kind{color:var(--per-gold)} .per-grammar__col p{margin:0;font-size:1.01rem;line-height:1.68;color:var(--per-on-dark)} .per-grammar__col p + p{margin-top:0.7rem} /* L'exemple : une phrase du document, puis la deduction. En serif pour la citation, en sans pour la lecture — la typographie fait le travail. */ .per-grammar__quote{ font-family:'Ibarra Real Nova',serif;font-style:italic; font-size:1.08rem !important;line-height:1.5 !important; color:var(--per-on-dark-dim) !important; } /* Les moments d'une Analyse : un registre numerote, pas cinq cartes. */ .per-moments{ list-style:none;margin:clamp(1.75rem,4.5vh,2.75rem) 0 0;padding:0; border-top:1px solid var(--per-rule-dark); } .per-moments li{ display:grid; grid-template-columns:auto minmax(0,0.32fr) minmax(0,0.68fr); gap:0.35rem clamp(1.25rem,3vw,2.5rem); align-items:baseline; padding-block:0.85rem; border-bottom:1px solid var(--per-rule-dark); font-size:1rem;line-height:1.6;color:var(--per-on-dark); } .per-moments i{ font-style:normal; font-size:0.74rem;font-weight:700;letter-spacing:0.08em;color:var(--per-gold); } .per-moments b{ font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:1.06rem;line-height:1.28;color:#fff;letter-spacing:0; text-transform:none; } /* ============ 8. MOUVEMENT 05 : CAS ET TERRAIN ======================== */ /* Trois entrees au plus, choisies pour leur diversite. Le libelle de format dit s'il s'agit d'un mandat documente ou d'une note prise sur le terrain : les deux ne promettent pas la meme chose au lecteur. */ .per-field{ list-style:none;margin:clamp(1.75rem,4.5vh,2.75rem) 0 0;padding:0; border-top:1px solid var(--per-rule); } .per-field li{ display:grid; grid-template-columns:minmax(0,0.38fr) minmax(0,0.62fr); gap:0.5rem clamp(1.5rem,4vw,3.25rem); align-items:start; padding-block:clamp(1.15rem,3vh,1.8rem); border-bottom:1px solid var(--per-rule); } .per-field__head{margin:0} .per-field__name{ margin:0.4rem 0 0; font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.16rem,1rem + 0.68vw,1.48rem); line-height:1.24; } .per-field__name a{color:var(--per-navy-deep);text-decoration:none} .per-field__name a:hover{color:var(--per-gold-ink)} .per-field__learn{margin:0;font-size:1.01rem;line-height:1.68;color:var(--per-ink)} .per-field__learn b{ display:block; font-size:0.7rem;font-weight:700;letter-spacing:0.15em; text-transform:uppercase;color:var(--per-gold-ink);margin-bottom:0.3rem; } /* ============ 9. MOUVEMENT 06 : LES VOIX ============================== */ /* Deux lignes, pas deux biographies. Portrait, nom, fonction actuelle, champ de lecture tres court, volume publie, un lien. */ .per-voices{ list-style:none;margin:clamp(1.75rem,4.5vh,2.75rem) 0 0;padding:0; border-top:1px solid var(--per-rule); } .per-voice{ display:grid; grid-template-columns:auto minmax(0,0.34fr) minmax(0,0.66fr); gap:0.4rem clamp(1.25rem,3vw,2.5rem); align-items:start; padding-block:clamp(1.15rem,3vh,1.75rem); border-bottom:1px solid var(--per-rule); } /* Un portrait, pas une vignette ronde : le meme rectangle sobre que partout ailleurs sur le site. */ .per-voice__portrait{ display:block;width:clamp(64px,7vw,84px);height:auto; border-top:2px solid var(--per-gold); } .per-voice__who{margin:0} .per-voice__name{ margin:0; font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.14rem,1rem + 0.6vw,1.4rem); line-height:1.22;color:var(--per-navy-deep); } .per-voice__role{ margin:0.25rem 0 0; font-size:0.88rem;line-height:1.5;color:var(--per-gold-ink); font-weight:600; } .per-voice__field{margin:0;font-size:1rem;line-height:1.66;color:var(--per-ink)} .per-voice__count{ display:block;margin-top:0.4rem; font-size:0.86rem;color:var(--per-ink-dim); } .per-voice .per-link{grid-column:3;margin-top:0.5rem} /* ============ 10. L'INFOLETTRE ======================================== */ /* AUCUN FAUX FORMULAIRE. Le site ne dispose d'aucune infrastructure d'infolettre : la fonction Supabase existante ne traite que les demandes de contact, il n'y a ni table d'abonnes, ni confirmation, ni desabonnement. L'ancienne page affichait un champ de courriel qui ouvrait en realite le logiciel de messagerie du visiteur. Presenter cela comme une inscription serait mensonger : on affiche donc ce qui se passe reellement, un message a envoyer, et le besoin technique est signale dans le rapport. */ .per-letter{ margin-top:clamp(1.5rem,4vh,2.25rem); padding-top:1.5rem;border-top:2px solid var(--per-gold); max-width:62ch; } .per-letter__promise{ margin:0; font-family:'Ibarra Real Nova',serif; font-size:clamp(1.3rem,1.05rem + 1vw,1.85rem); line-height:1.3;color:var(--per-gold-soft); } .per-letter__say{ margin:0.9rem 0 0; font-size:1.01rem;line-height:1.7;color:var(--per-on-dark); } .per-letter__how{ margin:1.1rem 0 0; font-size:0.9rem;line-height:1.6;color:var(--per-on-dark-dim); } .per-letter .per-link{margin-top:1.1rem} /* ============ 11. L'INDEX D'UN FORMAT ================================ */ /* Utilise par ressources/chroniques/index.html. Un index de revue : une annee, une date, une signature, un titre, une ligne. Ni mosaique de vignettes, ni archives mensuelles, ni nuage de mots-cles. */ .per-annot{ margin:0 0 clamp(1.5rem,4vh,2.25rem); font-size:0.74rem;font-weight:700; letter-spacing:0.18em;text-transform:uppercase; color:var(--per-steel-ink);line-height:1.55; } .per-year + .per-year{margin-top:clamp(2.5rem,6vh,4rem)} /* L'annee est un reperage, pas un titre de section a concurrencer les titres des textes : elle reste discrete et porte son decompte. */ .per-year__n{ display:flex;flex-wrap:wrap;align-items:baseline;gap:0.3rem 1rem; margin:0 0 0.5rem;padding-bottom:0.85rem; border-bottom:2px solid var(--per-gold); font-family:'Ibarra Real Nova',serif;font-weight:400; font-size:clamp(1.5rem,1.15rem + 1.1vw,2.1rem); line-height:1;color:var(--per-gold-ink); } .per-year__n span{ font-family:'Space Grotesk',sans-serif;font-weight:700; font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase; color:var(--per-steel-ink); } .per-entries{list-style:none;margin:0;padding:0} .per-entry{ padding-block:clamp(1.15rem,3vh,1.75rem); border-bottom:1px solid var(--per-rule); } .per-entry .per-meta{margin-bottom:0.5rem} .per-entry__title{ margin:0; font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.2rem,1.02rem + 0.8vw,1.6rem); line-height:1.24;max-width:34ch; } .per-entry__title a{color:var(--per-navy-deep);text-decoration:none} .per-entry__title a:hover{color:var(--per-gold-ink)} .per-entry__extrait{ margin:0.6rem 0 0; font-size:1.01rem;line-height:1.68;color:var(--per-ink);max-width:62ch; } /* Le lien vers la parution d'origine : une mention, pas un bouton. */ .per-entry__src{margin:0.6rem 0 0;font-size:0.88rem;line-height:1.55} .per-entry__src a{ color:var(--per-ink-dim);text-decoration:none; border-bottom:1px solid var(--per-rule); } .per-entry__src a:hover{color:var(--per-gold-ink);border-bottom-color:var(--per-gold-ink)} /* ============ 12. REVELATIONS (ARMEES) =============================== */ @keyframes perFade{from{opacity:0}} .per-anim [data-per-in]{ opacity:0;transform:translateY(14px); transition:opacity .7s ease,transform .7s var(--per-ease); } .per-anim [data-per-in].is-in{opacity:1;transform:none} .per-anim [data-per-in][data-per-delay="1"]{transition-delay:.12s} .per-anim [data-per-in][data-per-delay="2"]{transition-delay:.24s} /* Le heros ne se revele jamais. */ .per-anim .per-hero [data-per-in]{opacity:1;transform:none;transition:none} /* ==================== 12. TABLETTE (<= 1080px) ======================= */ @media(max-width:1080px){ /* La hierarchie de « A lire maintenant » ne se perd pas : la principale reste au dessus, les secondaires passent dessous, toujours en liste. */ .per-now{grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,4.5vh,2.5rem)} .per-format{grid-template-columns:auto minmax(0,1fr);gap:0.35rem 1.25rem} .per-format__say, .per-format__state, .per-format .per-link{grid-column:2} .per-grammar{grid-template-columns:minmax(0,1fr);gap:1.5rem} .per-moments li{grid-template-columns:auto minmax(0,1fr);gap:0.3rem 1.1rem} .per-moments li > span:last-child{grid-column:2} .per-field li{grid-template-columns:minmax(0,1fr);gap:0.6rem} .per-voice{grid-template-columns:auto minmax(0,1fr);gap:0.35rem 1.25rem} .per-voice__field, .per-voice .per-link{grid-column:2} } /* ==================== 13. TELEPHONE (<= 900px) ======================= */ @media(max-width:900px){ .per-scene{padding-block:clamp(2.5rem,6.5vh,3.5rem)} .per-hero{padding-block:clamp(1.75rem,4.5vh,2.5rem)} .per-crumb a{display:inline-block;padding-block:0.4rem;margin-block:-0.4rem} /* Sur telephone, une publication se lit comme une entree de revue : metadonnee courte, titre, une ligne. Jamais une carte empilee. */ .per-now__list a{font-size:17px} .per-voice{grid-template-columns:minmax(0,1fr)} .per-voice__portrait{width:72px} .per-voice__who, .per-voice__field, .per-voice .per-link{grid-column:1} .per-format{grid-template-columns:minmax(0,1fr)} .per-format__n{margin-bottom:0.15rem} .per-format__name, .per-format__say, .per-format__state, .per-format .per-link{grid-column:1} .per-moments li{grid-template-columns:minmax(0,1fr)} /* Le selecteur de la tablette (`li > span:last-child`) pese (0,2,2) : une remise a plat en `li > *` (0,1,1) ne passerait pas devant, quel que soit l'ordre, et la derniere cellule resterait placee dans une colonne 2 implicite. On reprend donc le meme selecteur. */ .per-moments li > *, .per-moments li > span:last-child{grid-column:1} /* Reprise de la hierarchie typographique face a mobile-premium.css, qui impose sous 900px `main p, main li, main span { font-size:max(1em,13px) !important }`. Sur une page qui porte sa propre echelle, `1em` vaut la taille du PARENT : toute la hierarchie disparaitrait. Les selecteurs de mobile-premium pesent (0,2,3) : on repasse devant avec trois classes, jamais avec un !important arbitraire. */ .per-page .per-shell .per-p{font-size:16px !important;line-height:1.72 !important} .per-page .per-shell .per-lead{font-size:17px !important;line-height:1.66 !important} .per-page .per-shell .per-strong{font-size:clamp(1.15rem,4.8vw,1.4rem) !important;line-height:1.44 !important} .per-page .per-shell .per-note{font-size:15px !important;line-height:1.62 !important} .per-page .per-shell .per-eyebrow{font-size:13.5px !important;letter-spacing:0.15em} .per-page .per-shell .per-crumb, .per-page .per-shell .per-crumb a{font-size:13px !important} .per-page .per-shell .per-link{font-size:16px !important} .per-page .per-shell .per-link--minor{font-size:15px !important} .per-page .per-shell .per-h1{font-size:clamp(2rem,8.2vw,2.8rem) !important;line-height:1.1 !important} .per-page .per-shell .per-h2{font-size:clamp(1.5rem,6.2vw,2rem) !important;line-height:1.18 !important} .per-page .per-shell .per-format__name, .per-page .per-shell .per-field__name, .per-page .per-shell .per-voice__name{font-size:19px !important;line-height:1.24 !important} .per-page .per-shell .per-format__say, .per-page .per-shell .per-field__learn, .per-page .per-shell .per-voice__field, .per-page .per-shell .per-grammar__col p, .per-page .per-shell .per-moments li, .per-page .per-shell .per-letter__say{font-size:16px !important;line-height:1.66 !important} .per-page .per-shell .per-grammar__quote{font-size:17px !important;line-height:1.5 !important} .per-page .per-shell .per-format__state, .per-page .per-shell .per-voice__count, .per-page .per-shell .per-letter__how{font-size:14.5px !important;line-height:1.58 !important} .per-page .per-shell .per-meta{font-size:13px !important} .per-page .per-shell .per-meta b, .per-page .per-shell .per-now__label, .per-page .per-shell .per-grammar__kind, .per-page .per-shell .per-field__learn b, .per-page .per-shell .per-format__state b, .per-page .per-shell .per-moments i{font-size:12.5px !important;letter-spacing:0.14em} .per-page .per-shell .per-voice__role{font-size:14px !important} .per-page .per-shell .per-moments b{font-size:17px !important} .per-page .per-shell .per-letter__promise{font-size:clamp(1.3rem,5.6vw,1.6rem) !important} .per-page .per-shell .per-entry__title{font-size:19px !important;line-height:1.24 !important} .per-page .per-shell .per-entry__extrait{font-size:16px !important;line-height:1.66 !important} .per-page .per-shell .per-entry__src{font-size:14.5px !important} .per-page .per-shell .per-annot, .per-page .per-shell .per-year__n span{font-size:12.5px !important;letter-spacing:0.16em} .per-page .per-shell .per-year__n{font-size:1.6rem !important} } @media(max-width:420px){ .per-shell{padding-inline:1.15rem} .per-h1{max-width:none} } /* Ordinateur portable peu haut : on resserre les respirations, jamais la taille des titres. */ @media(min-width:1081px) and (max-height:800px){ .per-scene{padding-block:clamp(2.25rem,5vh,3.5rem)} .per-hero{padding-block:clamp(1.75rem,4vh,3rem)} .per-h1{font-size:clamp(2rem,1.05rem + 2.7vw,3.4rem)} } /* Telephone en paysage. */ @media(orientation:landscape) and (max-height:520px){ .per-scene{padding-block:clamp(2rem,7vh,3rem)} .per-hero{padding-block:clamp(1.5rem,6vh,2.25rem)} } /* ============ 14. VERSION SANS MOUVEMENT ============================= */ @media(prefers-reduced-motion:reduce){ .per-page *, .per-page *::before, .per-page *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } .per-page [data-per-in], .per-page [data-per-in].is-in{opacity:1 !important;transform:none !important} }