/* =========================================================================
   quentinclenet.com — feuille de style commune aux quatre pages.

   POURQUOI ELLE EXISTE, alors que ce site tenait dans UN fichier. Le 27 aout
   2026 le site est passe de une a quatre pages (accueil, parcours, ecrits,
   contact) pour que Google puisse afficher des liens de site sous le resultat
   du nom : il ne propose des sous-liens que vers des pages qui existent.
   Recopier ces 220 lignes dans quatre fichiers aurait garanti qu'elles
   divergent, et ce depot vient precisement de passer une journee a corriger
   des commentaires qui decrivaient un etat que le code contredisait.

   ELLE EST SERVIE EN immutable POUR UN AN. C'est valide ICI, et seulement
   ici, parce que son adresse porte un ?v=N que les quatre pages incrementent
   ensemble. Ne jamais faire cela d'un fichier dont le nom est impose par une
   convention — c'est ce qui a fige l'ancien favicon Lovable pendant 17 heures.
   APRES TOUTE MODIFICATION DE CE FICHIER : incrementer ?v=N dans les quatre
   pages, sans quoi les visiteurs deja venus gardent l'ancienne feuille.

   Le contenu ci-dessous est celui de l'ancien bloc <style> de index.html,
   repris SANS UNE MODIFICATION pour que le rendu de l'accueil soit strictement
   identique. Ce qui a ete ajoute pour les nouvelles pages est en fin de
   fichier, sous son propre titre.
   ========================================================================= */

/* =========================================================================
   PAGE PERSONNELLE DE QUENTIN CLENET, refaite le 26 aout 2026.

   DESIGN REPRIS de quentinmdb.com (version archivee du 2 mai 2024), a sa
   demande. Ce qui a ete repris est la STRUCTURE et le rythme, releves au
   navigateur sur l'original : page blanche, une seule colonne centree,
   portrait rond en tete, une adresse a la premiere personne en 36px de
   graisse moyenne, puis une carte encadree par projet contenant un texte
   court et un bouton plein, enfin une ligne de cloture avec des liens en
   couleur d'accent. Hauteur totale de l'original : 957px.
   CE QUI N'A PAS ETE REPRIS : ni feuille de style, ni image, ni texte de
   l'original. Le rose #FB035C est leur couleur de marque ; la reprendre
   aurait donne a Quentin l'identite de quelqu'un d'autre.

   CE QUI REMPLACE LE ROSE : #A32D22, la terre cuite deja utilisee sur
   faiseurderoi.com. Une seule couleur d'accent sur toute la page, comme
   dans l'original, mais c'est la sienne.

   AUCUN CADRE, AUCUNE BIBLIOTHEQUE, AUCUN SCRIPT. La version precedente de
   ce site etait un paquet React de 450 ko compile par Lovable, dont la
   source n'est pas sur cette machine : elle n'etait pas modifiable ici.
   Celle-ci est un seul fichier lisible et editable a la main. Consequence
   a connaitre : si le projet Lovable est republie un jour, il ecrasera
   cette page.
   ========================================================================= */

/* UNE REFONTE « QUIET LUXURY » A ETE ESSAYEE LE 27 AOUT 2026 PUIS ANNULEE
   le jour meme, a sa demande : « j'aime pas le nouveau design ». Elle
   changeait les boutons pleins en liens soulignes, les cartes encadrees en
   simples filets, et portait le portrait a 168px. RIEN DE TOUT CELA N'EST
   EN PLACE : les cinq points ont ete reverifies dans le code le 27 aout.
   Le descriptif de cette passe est neanmoins reste seize lignes ici, a
   decrire au present un etat que le code contredisait dix lignes plus bas.
   Retire. Ne pas la represser.

   Polices systeme, comme l'original qui tourne en Arial/Helvetica. Aucun
   fichier a telecharger, donc aucun texte invisible au chargement. */
:root{
  --encre:#202124;        /* le gris tres fonce du texte de l'original */
  --doux:#5B5E66;
  --trait:#E3E3E6;
  --accent:#A32D22;
  --accent-fonce:#8A2318;
  --papier:#FFFFFF;
  --ease:cubic-bezier(.2,.7,.3,1);
}
/* Theme sombre : la page reste blanche par choix, comme l'original. On
   neutralise seulement l'inversion automatique de certains navigateurs. */
@media (prefers-color-scheme:dark){ :root{ color-scheme:light; } }

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--papier);color:var(--encre);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.6;}
/* PAS d'anticrenelage force ici. Il y etait ; il est retire le 26 aout
   2026. Ce reglage n'agit que sur macOS, et seulement dans WebKit et
   Blink : son pendant pour Firefox etant absent, Firefox sur Mac l'ignorait
   deja. Ce qu'il faisait : amincir le trait. Autrement dit, le plus petit
   texte de la page, celui qui a le contraste le plus faible (#5B5E66 sur
   blanc, 6,49:1), rendait plus maigre sur la machine ou il a ete concu que
   partout ailleurs. Le retirer n'ajoute aucun effet : il en enleve un. */

/* Une seule colonne, centree, etroite. C'est tout le squelette. */
/* Mesure au navigateur sur l'original, a 1280px de large : le titre y fait
   922px, la carte 333px. Le titre est donc pres de TROIS FOIS plus large que
   la carte. C'est ce rapport qui fait la composition ; une bande uniforme de
   640px, comme ici auparavant, donne des cartes qui paraissent vides parce
   qu'elles sont trop larges pour trois lignes de texte. La colonne porte
   desormais le titre, et les cartes sont ramenees a leur propre largeur. */
.page{max-width:900px;margin:0 auto;padding:clamp(2.5rem,7vw,4.5rem) 1.25rem clamp(3rem,8vw,5rem);
  text-align:center;}

/* Le portrait rond, 140px, la mesure exacte de l'original. La photo est
   volontairement sombre (prise de nuit, luminance moyenne 34 sur 255) : ce
   n'est pas un defaut a corriger, c'est son sujet, et le cheval qui y figure
   est la moitie de ce que la page raconte. La source
   d'origine faisait 528px ; l'historique complet des trois versions est
   dans le commentaire du <img>, plus bas. */
.portrait{width:140px;height:140px;border-radius:50%;display:block;margin:0 auto;}

/* L'adresse. 36px de graisse 500 sur l'original ; ici en clamp pour que la
   phrase ne casse pas en quatre lignes sur un telephone. */
/* 36px de graisse 500 sur l'original, releve au navigateur. Le clamp
   evite que la phrase parte en quatre lignes sur un telephone. Le
   deux-points final n'est pas un ornement : c'est lui qui rattache le
   titre aux deux cartes, comme dans l'original. */
/* SUIVI -.008em et non -.015em, corrige le 26 aout 2026. San Francisco,
   la police du Mac, a deux jeux optiques : Display au-dessus de 20px, Text
   en dessous. Ce titre est toujours en Display, qui resserre DEJA de
   lui-meme ; la valeur d'origine resserrait donc une seconde fois. Mesure
   de la premiere ligne a 1280px : 555px a -.015em, 564px a -.008em, 575px
   sans suivi. Segoe UI et Roboto n'ont aucun jeu optique, la ou -.015em
   etait franchement trop serre. Aucune valeur unique ne peut etre juste sur
   les trois ; -.008em est la moins fausse partout.
   A NE PAS AJOUTER : text-wrap:balance. Remesure apres cette correction, il
   rend toujours 21/15/27/13 a 375px, comme sans lui. */
.bonjour{font-size:clamp(1.5rem,1.15rem + 1.6vw,2.25rem);font-weight:500;
  line-height:1.28;letter-spacing:-.008em;margin:1.9rem 0 0}
/* Pas d'equilibrage de lignes sur ce titre : mesure a 320, 360, 375, 414,
   430, 540, 640 et 720px, il ne change AUCUNE coupure. Le <br> ecrit a la
   main fixe deja le point de rupture, et chaque moitie se recoupe la ou
   l'equilibrage l'aurait mise. Une declaration morte vaut moins que rien. */
/* Les cartes. Un filet, du blanc, rien d'autre : l'original n'a ni ombre
   ni fond. Le texte y est aligne a GAUCHE alors que tout le reste de la
   page est centre, ce qui est exactement ce que fait l'original et ce qui
   rend les paragraphes lisibles. */
/* Deux cartes de 340px cote a cote, centrees : 700px au total sous un titre
   de 860px. Le rapport carte/titre vaut 0,40 ; il valait 1,00. En dessous de
   760px de large il n'y a plus la place pour deux, elles passent l'une sous
   l'autre en restant etroites plutot que de s'etaler. */
.projets{margin:clamp(2.2rem,5vw,3rem) 0 0;display:grid;gap:1.25rem;
  grid-template-columns:minmax(0,420px);justify-content:center;}
/* TROIS CARTES DEPUIS LE 3 SEPTEMBRE 2026. Deux colonnes en auraient laisse
   une seule, orpheline, sur une deuxieme rangee. Trois colonnes de 280px font
   880px avec les ecarts, soit la largeur du titre a 20px pres : la rangee et
   le titre se tiennent. Le minmax(0,...) laisse les colonnes RETRECIR quand la
   fenetre est plus etroite, ce qui evite un debordement entre 760 et 920px. */
@media (min-width:760px){
  .projets{grid-template-columns:repeat(3,minmax(0,280px));}
}
/* 16px de rayon, releve sur l'original, ou le bouton en garde 5. Deux rayons
   coexistent donc, mais suivant une regle constante : la carte est douce, ce
   qui se clique est net. */
.projet{border:1px solid var(--trait);border-radius:16px;
  padding:clamp(1.4rem,3.5vw,1.9rem);text-align:left;
  display:flex;flex-direction:column;}
/* L'interligne est pose explicitement. Sans lui, ce titre retombait sur le
   1,6 du corps de texte, soit 31,2px pour un corps de 19,5px : un interligne
   de paragraphe applique a un titre, qui noyait sous 6px de demi-interligne
   parasite la marge de 2,4px le separant de son URL. faiseurderoi.com a
   rencontre et corrige exactement ce piege sur son h3 (site-mono.css,
   lignes 99-101) ; la correction n'avait jamais ete reportee ici. */
.projet-nom{font-size:1.22rem;font-weight:700;letter-spacing:-.01em;margin:0;
  line-height:1.28;}
/* Les chiffres tabulaires ont ete retires : les deux valeurs affichees ici
   sont « faiseurderoi.com » et « rufusparis.com », qui ne contiennent aucun
   chiffre. La declaration ne faisait rien. */
.projet-url{font-size:.86rem;color:var(--doux);margin:.15rem 0 0;}
/* La marge basse n'est pas decorative : le bouton est pousse en bas par une
   marge automatique, et c'est elle qui garantit l'ecart minimal quand le
   texte est long. Les deux cartes n'ont pas le meme nombre de lignes ; sans
   cela leurs boutons ne seraient pas alignes. */
.projet-quoi{margin:.85rem 0 1.25rem;color:var(--encre);
  /* Contre le mot seul en derniere ligne. Pose le 28 aout pour « Systemes
     d'acquisition pour / infopreneurs. », une phrase remplacee depuis ; la
     regle reste utile pour les trois textes actuels, qui n'ont pas la meme
     longueur. Le moteur decline la retouche quand la derniere ligne fait deja
     pres de la moitie de la colonne : ce n'est plus un orphelin. */
  text-wrap:pretty;}
/* Le bouton : plein, coins de 5px, graisse 700, comme l'original. Sa
   hauteur tient les 44px de cible tactile par le remplissage, pas par une
   hauteur fixe. */
/* Sur l'original le bouton fait 271px dans une carte de 333px remplie de
   30px de chaque cote : il occupe donc TOUTE la largeur utile. Repris tel
   quel. Marge haute automatique pour le plaquer au bas de la carte. */
.bouton{display:block;margin:auto 0 0;padding:.72rem 1.4rem;text-align:center;
  background:var(--accent);color:#FFF;text-decoration:none;
  font-size:1.02rem;font-weight:700;border-radius:5px;
  transition:background .18s var(--ease),transform .12s var(--ease);}
.bouton:active{transform:translateY(1px);}
.bouton:hover{background:var(--accent-fonce);}

/* La cloture : un paragraphe centre avec des liens en accent, comme
   l'original. */
.cloture{margin:clamp(2.4rem,5vw,3.2rem) 0 0;font-size:1.06rem;}
/* inline-block + remplissage : le lien mesurait 21px de haut, pour un
   plancher tactile de 44. Il en fait 44 desormais, sans boite ni cadre :
   c'est le remplissage qui porte la hauteur, pas une hauteur fixe. */
/* Le bouton doit etre INDISCERNABLE de l'ancien lien : memes couleur,
   graisse, remplissage et soulignement au survol. Les quatre premieres
   declarations ne font qu'annuler ce qu'un navigateur impose d'office a un
   <button> (fond gris, bordure, police systeme plus petite, alignement). */
.cloture .copie{display:inline-block;padding:.7rem .2rem;
  background:none;border:0;font:inherit;line-height:inherit;
  -webkit-user-select:text;user-select:text;
  color:var(--accent);font-weight:700;text-decoration:none;cursor:pointer;
  border-bottom:1px solid transparent;transition:border-color .18s var(--ease);}
.cloture .copie:hover{border-bottom-color:var(--accent);}
/* La confirmation. Elle occupe sa ligne meme vide : sans min-height, son
   apparition pousserait le pied de page vers le bas. */
.copie-dit{display:block;min-height:1.5em;margin:.15rem 0 0;
  font-size:.86rem;color:var(--doux);}

/* Les comptes. Jusqu'au 26 aout 2026 cette page ne pointait vers AUCUN
   profil : rien, ni dans le texte ni dans le balisage, ne reliait le nom
   aux comptes qui portent l'autorite. Volontairement plus discrets que
   l'adresse au-dessus, qui reste la seule action attendue : gris doux au
   lieu de la terre cuite, graisse 600 au lieu de 700. Le remplissage porte
   la hauteur tactile, comme partout ailleurs sur cette page. */
.comptes{margin:.1rem 0 0;font-size:.95rem;}
/* GRAISSE 400, et non 600 comme au depart. Les polices systeme n'ont pas
   les memes graisses, et la regle de correspondance CSS substitue en
   silence : Roboto, sur Android, n'a pas de demi-gras et remonte donc au
   gras, exactement la graisse du lien email juste au-dessus. La hierarchie
   decrite plus bas n'existait alors plus que par la couleur. Seules la
   romaine et le gras rendent a l'identique sur Mac, Windows et Android ;
   en romaine grise face au gras terre cuite, la distinction tient partout,
   et elle est meme plus nette. */
.comptes a{display:inline-block;padding:.7rem .5rem;color:var(--doux);
  font-weight:400;text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .18s var(--ease),border-color .18s var(--ease);}
.comptes a:hover{color:var(--encre);border-bottom-color:var(--trait);}

.pied{margin:clamp(2.4rem,5vw,3.2rem) 0 0;font-size:.82rem;color:var(--doux);}
.pied p{margin:.35rem 0;}

/* Les deux boutons ET les deux liens de comptes ouvrent un nouvel onglet.
   Un lecteur d'ecran doit l'annoncer, sinon la personne ne comprend pas
   pourquoi le bouton « retour » ne fait plus rien. Le texte est retire de l'oeil, pas du
   DOM : clip-path plutot que display:none, qui le retirerait aussi de la
   restitution vocale. */
.hors-ecran{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}

/* Focus visible au clavier, sur tout ce qui se clique. */
a:focus-visible,.copie:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px;}

@media (prefers-reduced-motion:reduce){
  .bouton,.cloture .copie,.comptes a,.pied-nav a{transition:none;}
  .bouton:active{transform:none;}
}

/* =========================================================================
   AJOUTS DU 27 AOUT 2026 : navigation et pages internes.

   Le site est passe de une a quatre pages. Tout ce qui suit reutilise les
   jetons deja definis plus haut — aucune couleur, aucune police, aucune ombre
   nouvelle. Les regles de navigation sont calquees sur .comptes, dont elles
   sont le voisin immediat dans la page : meme gris doux, meme romaine, meme
   remplissage qui porte les 44px de cible tactile, meme soulignement au survol.
   ========================================================================= */

/* LES LIENS DU SITE, DANS LE PIED. Ils ont d'abord ete entre les cartes et
   l'adresse, puis en tete de page. Il n'en veut pas en menu : « pour moi le
   menu est pas necessaire, juste tu mets le reste dans le footer ».
   C'est aussi ce qui resout le defaut de fond des deux emplacements
   precedents : trois rangees de liens de MEME POIDS se suivaient (menu,
   adresse, comptes) et se disputaient l'oeil. Ici elles s'echelonnent —
   l'adresse en terre cuite a 1.06rem, les comptes en gris moyen a .95rem, les
   pages en gris petit a la taille du pied. On lit de haut en bas par ordre
   d'importance, ce qui est le contraire de ce qu'on avait.
   Le remplissage de .75rem n'est pas cosmetique : a la taille du pied, il
   porte la cible tactile a 45px, au-dessus du plancher de 44. */
.pied-nav{margin:0 0 .7rem;}
.pied-nav a{display:inline-block;padding:.75rem .45rem;color:var(--doux);
  font-weight:400;text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .18s var(--ease),border-color .18s var(--ease);}
.pied-nav a:hover{color:var(--encre);border-bottom-color:var(--trait);}
/* La page courante, marquee sans gras : a cette taille le gras crierait, et
   aria-current porte deja l'information pour les lecteurs d'ecran. */
.pied-nav a[aria-current="page"]{color:var(--encre);}

/* LE TITRE DES PAGES INTERNES. Meme echelle et meme graisse que le « Bonjour »
   de l'accueil, pour que les quatre pages se ressemblent au premier coup d'oeil.
   Pas de portrait au-dessus : le titre prend le remplissage de .page. */
.titre-page{font-size:clamp(1.5rem,1.15rem + 1.6vw,2.25rem);font-weight:500;
  line-height:1.28;letter-spacing:-.008em;margin:0;}

/* LE CORPS DE TEXTE. Aligne a GAUCHE alors que la page est centree, exactement
   comme .projet : au-dela de deux lignes, du texte centre se lit mal.
   34rem, soit environ 65 caracteres : la mesure classique de confort de lecture,
   et nettement moins que les 900px de la colonne. */
.texte{max-width:34rem;margin:1.5rem auto 0;text-align:left;}
/* text-wrap:pretty demande au navigateur d'eviter qu'un paragraphe finisse par
   un mot seul sur sa derniere ligne. La technique n'est PAS neuve ici :
   .projet-quoi l'emploie deja sur les cartes de l'accueil, avec le meme motif
   ecrit dans son commentaire. Les blocs des pages internes ne l'avaient pas.
   Mesure sur cinq largeurs de colonne (280, 320, 335, 390 et 544px, soit les
   fenetres de 320 a 430px plus le bureau) : 31 dernieres lignes d'un seul mot
   avant, 2 apres. Exemple : sur /faiseur-de-roi en 544px, « parus. » restait
   seul sur 45px.
   A NE PAS CONFONDRE avec text-wrap:balance, refuse sur le h1 pour une raison
   documentee plus haut : balance egalise les lignes d'un TITRE, pretty ne
   touche que la derniere ligne d'un PARAGRAPHE. */
.texte p,.jalon p,.identite p{text-wrap:pretty;}

.texte p{margin:0 0 1rem;}
.texte p:last-child{margin:0;}
.texte a{color:var(--accent);font-weight:700;text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .18s var(--ease);}
.texte a:hover{border-bottom-color:var(--accent);}

/* LES JALONS du parcours. Une liste, parce que c'en est une : la date d'abord
   en petit gris, le role ensuite en gras. Pas de trait vertical, pas de pastille,
   pas de ligne de temps dessinee — il a fait retirer ce genre d'ornement en
   disant « trop charge, trop designe ». L'ordre et l'espace suffisent. */
.jalons{max-width:34rem;margin:1.9rem auto 0;text-align:left;
  list-style:none;padding:0;}
.jalon{margin:0 0 1.4rem;}
.jalon:last-child{margin:0;}
/* margin:0 n'est pas cosmetique : sans elle, ce <p> prend la marge par defaut
   du navigateur (1em, soit 13,76px a cette taille) et la date flotte loin de
   l'intitule qu'elle date. Personne n'avait ecrit cette marge, elle etait
   heritee. Mesure apres : 1,59px, la date se pose sur son titre. */
.jalon-quand{font-size:.86rem;color:var(--doux);margin:0;}
.jalon-quoi + p{margin:.3rem 0 0;}


/* L'IDENTITE DE LA SOCIETE, sur la page contact. Petit, gris, aligne a gauche :
   c'est une information de reference, pas un argument. Le site n'en portait
   AUCUNE jusqu'ici, alors qu'il presente deux entreprises. */
.identite{max-width:34rem;margin:1.9rem auto 0;text-align:left;
  font-size:.9rem;color:var(--doux);}
.identite p{margin:0 0 .3rem;}
.identite p:last-child{margin:0;}

@media (prefers-reduced-motion:reduce){
  .texte a{transition:none;}
}

/* L'ecart avant l'adresse email. .cloture porte une grande marge haute, calibree
   sur l'accueil ou elle suit les deux cartes. Sur /contact elle suit un simple
   paragraphe, et le meme ecart y ouvre un trou. Mesure au navigateur : le bloc
   flottait a 2,4rem d'un texte de deux lignes. */
.texte + .cloture{margin-top:1.1rem;}

/* Le lien vers le site d'une marque, sur ses deux pages internes. Il occupe la
   place de l'adresse email sur l'accueil et joue le meme role — la seule action
   attendue de la page — donc la meme couleur d'accent et la meme graisse.
   Ce n'est PAS un .bouton plein : les boutons pleins sont sur l'accueil, ou ils
   closent une carte. Ici la page entiere mene a ce lien, un pave de couleur y
   serait redondant. */
.lien-marque{display:inline-block;padding:.7rem .2rem;
  color:var(--accent);font-weight:700;text-decoration:none;font-size:1.06rem;
  border-bottom:1px solid transparent;transition:border-color .18s var(--ease);}
.lien-marque:hover{border-bottom-color:var(--accent);}

@media (prefers-reduced-motion:reduce){ .lien-marque{transition:none;} }

/* DES TITRES QUI S'IGNORAIENT, corriges le 1er septembre 2026. Les intitules de role
   sur /a-propos, les titres d'article sur /ecrits et « Éditeur du site » sur
   /contact etaient des <p> et des <b>. Ce sont des titres : un lecteur d'ecran
   qui parcourt une page saute de titre en titre, et n'en trouvait aucun.
   L'accueil, lui, employait DEJA des <h2> pour ses deux cartes — les pages
   internes contredisaient donc la convention du site lui-meme.
   /ecrits a ete retiree le 1er septembre a sa demande ; ses regles .liste, .ecrit et
   h2.ecrit-titre sont parties avec elle. Ce depot n'a aucune CSS morte, on ne
   commence pas aujourd'hui.

   LES TROIS REGLES CI-DESSOUS NE FONT QU'ANNULER ce qu'un navigateur impose
   d'office a un <h2> : corps a 1.5em, graisse, et marges de .83em. Le rendu est
   identique au pixel a ce qu'il etait avant — verifie au navigateur. Sans elles,
   la correction se verrait, et ce serait alors un changement de design. */
h2.jalon-quoi{font-size:inherit;line-height:inherit;font-weight:700;margin:.1rem 0 0;}
h2.identite-titre{font-size:inherit;line-height:inherit;font-weight:700;
  color:var(--encre);margin:0 0 .3rem;}

/* LES TITRES DE SECTION des pages de marque, poses le 1er septembre 2026 : « mets les
   h1, h2, h3 [...] pour chaque page pour le seo ». Ces deux pages n'avaient
   qu'un h1 et des paragraphes, quand /a-propos et /contact portaient deja des
   h2 — le site se contredisait une fois de plus.
   ILS NE SONT PAS PLUS GROS QUE LE TEXTE. Un <h2> par defaut fait 1.5em et
   crierait sur une page de cent vingt mots ; ici il se distingue par la
   GRAISSE et par l'air au-dessus, exactement comme les intitules de jalon sur
   /a-propos. Meme langage sur les six pages. */
.texte h2{font-size:inherit;line-height:inherit;font-weight:700;
  margin:1.7rem 0 .35rem;}
.texte h2:first-child{margin-top:0;}

/* LA PHOTO DE /a-propos, posee le 1er septembre 2026. Elle occupe la largeur du
   bloc de texte et pas celle de la page : une image plus large que le texte
   qu'elle accompagne prend le dessus sur lui, et cette page est faite pour etre
   LUE. Aucun arrondi : c'est une photographie dans une colonne, pas une vignette.
   Le fond gris tient la place pendant le chargement, sur une image de 680px de
   haut le saut serait sinon tres visible. */
.photo{margin:clamp(1.6rem,4vw,2.4rem) auto 0;max-width:34rem;}
/* margin AUTO a gauche et a droite : sans elle la figure se colle au bord
   gauche de la page pendant que le texte, lui, est centre — l'image et le
   paragraphe qu'elle accompagne cessent d'etre sur le meme axe. Un <figure>
   porte en plus une marge laterale de 40px par defaut, que la valeur ci-dessus
   annule. */
.photo img{display:block;width:100%;height:auto;background:var(--trait);}