/* ==========================================================================
   A — feuille commune aux pages intérieures
   Employée par a-propos.html, contact.html et merci.html. La page d'accueil
   garde sa feuille en ligne : elle est validée, et la toucher pour un
   partage de code ferait courir un risque sans bénéfice.

   Même squelette sur toutes ces pages : un titre en pleine largeur, puis
   une colonne étroite à gauche et une colonne large à droite.

   Le monde visuel est celui de A/index.html, repris à l'identique — fond
   nuit profonde, serif Newsreader en titre, Inter Tight en texte courant,
   ambre clair pour l'unique accent, zéro rayon, zéro ombre.
   ========================================================================== */

:root {
  --a-fond: #1B2833;
  --a-texte: #F7F3EC;
  --a-attenue: #BCD1D4;
  --a-filet: #3E5163;
  --a-accent: #D98A4A; /* sur fond nuit, la terre cuite passe sous le seuil */

  /* Même corps de lecture que la page d'accueil, pour que le site n'ait
     qu'une seule échelle de texte courant d'une page à l'autre. */
  --a-corps-lecture: clamp(0.8125rem, 1.65vw, 1.275rem);
}

body { background: var(--a-fond); color: var(--a-texte); font: var(--cs-body); }

.a-contenant {
  max-width: var(--cs-contenant);
  margin-inline: auto;
  padding-inline: var(--cs-gouttiere);
}

/* ==========================================================================
   Bandeau de navigation — repris de A/index.html
   ========================================================================== */

.a-bandeau { background: var(--a-fond); }

.a-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--cs-space-lg);
  padding-block: var(--cs-space-lg);
}

.a-entete img { height: 45px; width: auto; }

.a-nav ul { display: flex; gap: 32px; }

.a-nav a {
  font: var(--cs-label);
  font-size: clamp(0.625rem, 2.8vw - 12.5px, 1.03125rem);
  letter-spacing: var(--cs-tracking-label);
  text-transform: uppercase;
  color: var(--a-texte);
  transition: color var(--cs-duree) var(--cs-ease);
}

.a-nav a:hover { color: var(--a-accent); }

/* État actif. La page d'accueil n'en avait pas besoin — elle n'a pas
   d'entrée dans le bandeau. Règle du système : filet simple 1 px sous
   l'entrée, décalé de 6 px, en ambre sur fond nuit. */
.a-nav a[aria-current="page"] {
  border-bottom: 1px solid var(--a-accent);
  padding-bottom: 6px;
}

@media (max-width: 840px) {
  .a-entete { flex-direction: column; align-items: flex-start; }
  .a-nav ul { flex-direction: column; gap: 0; width: 100%; }
  .a-nav li { border-top: 1px solid var(--a-filet); }
  .a-nav a { display: block; padding-block: var(--cs-space-md); }
  .a-nav a[aria-current="page"] { border-bottom: 0; color: var(--a-accent); }
}

/* ==========================================================================
   La page : une photographie, le texte à côté
   ========================================================================== */

.ap-page { padding-block: var(--cs-space-section); }
.ap-filet { height: 1px; background: var(--a-filet); }

/* Le filet double du système : un trait, un blanc, un trait. Il ouvre une
   page ou une section. Jamais en cadre sur les quatre côtés. */
.ap-filet-double {
  height: 3px;
  border-top: 1px solid var(--a-filet);
  border-bottom: 1px solid var(--a-filet);
}

/* La colonne de photographie est bornée à 300 px. C'est un arbitrage :
   plus large, elle prend au texte les signes dont il a besoin. À 300 px
   la colonne de lecture fait environ 60 signes, tout juste sous les 62
   que vise le système — c'est le prix de la mise en page demandée, texte
   à côté de l'image plutôt qu'en dessous. */
.ap-grille {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
  margin-top: var(--cs-space-section);
}

/* La photographie accompagne la lecture au lieu de disparaître au premier
   défilement. Aucun cadre, aucun rayon, aucune ombre : une image posée. */
.ap-photo { margin: 0; position: sticky; top: var(--cs-space-xl); }
.ap-photo img { width: 100%; height: auto; }

/* Le titre est hors de la grille, en pleine largeur au-dessus : il garde
   son échelle au lieu d'être enfermé dans la colonne de texte, et sur
   mobile il passe naturellement devant la photographie sans qu'on ait à
   le dupliquer dans le balisage. */
.ap-page h1 {
  font-family: var(--cs-serif);
  font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.875rem);
  line-height: 1.06;
  letter-spacing: var(--cs-tracking-display);
  max-width: 24ch;
  text-wrap: balance;
  margin-top: var(--cs-space-section);
}

.ap-texte p {
  color: var(--a-attenue);
  font-size: var(--a-corps-lecture);
  line-height: 1.55;
  max-width: 66ch;
}

.ap-texte p + p { margin-top: var(--cs-space-lg); }

/* Les trois projets. Une liste, pas un tableau : le nom en grotesque
   demi-gras, la description à la suite. Pas de filet en tête — il
   séparerait « Mes projets actuels sont : » de la liste que ces deux
   points annoncent. */
.ap-projets { margin-top: var(--cs-space-lg); }

.ap-projets li {
  color: var(--a-attenue);
  font-size: var(--a-corps-lecture);
  line-height: 1.55;
  max-width: 66ch;
}

.ap-projets li + li { margin-top: var(--cs-space-md); }
.ap-projets b, .ap-projet-lien { font-weight: 600; color: var(--a-texte); }

/* Deux des trois noms sortent du site. Ils gardent la graisse et la
   couleur des autres : seul un soulignement discret signale qu'ils
   mènent ailleurs, sans transformer la liste en barre de liens. L'ambre
   n'apparaît qu'au survol — au repos, la page n'en compte que deux
   emplois, l'entrée active du bandeau et l'adresse de contact. */
.ap-projet-lien {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--a-filet);
  transition: color var(--cs-duree) var(--cs-ease),
              text-decoration-color var(--cs-duree) var(--cs-ease);
}

.ap-projet-lien:hover { color: var(--a-accent); text-decoration-color: var(--a-accent); }

.ap-projets + p { margin-top: var(--cs-space-xl); }

/* L'adresse : le seul accent de la page avec l'entrée active du bandeau. */
.ap-courriel {
  color: var(--a-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(217, 138, 74, .45);
  transition: color var(--cs-duree) var(--cs-ease),
              text-decoration-color var(--cs-duree) var(--cs-ease);
}

.ap-courriel:hover { color: var(--a-texte); text-decoration-color: var(--a-texte); }

@media (max-width: 860px) {
  /* Sur une colonne : le titre, puis la photographie, puis le texte.
     Le collant n'a plus de sens quand l'image ne borde plus rien. */
  .ap-grille { grid-template-columns: 1fr; gap: var(--cs-space-xl); }
  .ap-photo { position: static; max-width: 340px; }
  .ap-page h1 { max-width: none; }
}

/* ==========================================================================
   Contact — le formulaire
   ========================================================================== */

/* Même squelette que « À propos » : colonne étroite à gauche, colonne
   large à droite. Ici c'est le formulaire qui occupe la large — c'est
   lui l'action de la page — et l'adresse mail qui tient l'étroite,
   comme second chemin pour qui préfère écrire de sa propre boîte. */
.ct-grille {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
  margin-top: var(--cs-space-section);
}

.ct-aside { position: sticky; top: var(--cs-space-xl); }

.ct-aside p {
  color: var(--a-attenue);
  font: var(--cs-note);
  max-width: 34ch;
}

.ct-adresse {
  display: inline-block;
  margin-top: var(--cs-space-md);
  font-family: var(--cs-serif);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: var(--cs-tracking-display);
  color: var(--a-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(217, 138, 74, .45);
  transition: color var(--cs-duree) var(--cs-ease),
              text-decoration-color var(--cs-duree) var(--cs-ease);
}

.ct-adresse:hover { color: var(--a-texte); text-decoration-color: var(--a-texte); }

.ct-intro {
  color: var(--a-attenue);
  font-size: var(--a-corps-lecture);
  line-height: 1.55;
  max-width: 62ch;
}

/* Les champs suivent la règle du système : pas de boîte. Un filet simple
   sous le champ, fond transparent — une ligne à remplir sur un formulaire
   papier, pas un contrôle de logiciel. */
/* L'étiquette est collée à son champ (10 px) et les champs sont séparés
   par 40 px : sans cet écart, chaque étiquette se lit comme la légende du
   champ précédent plutôt que comme le titre du suivant. */
.ct-champ { margin-top: var(--cs-space-xl); }

/* Le formulaire ouvre sa colonne : son premier libellé s'aligne sur la
   première ligne de la colonne de gauche. La marge des champs ne vaut
   qu'entre eux. */
.ct-champ:first-of-type { margin-top: 0; }

.ct-champ label {
  display: block;
  font: var(--cs-label);
  letter-spacing: var(--cs-tracking-label);
  text-transform: uppercase;
  color: var(--a-attenue);
  transition: color var(--cs-duree) var(--cs-ease);
}

.ct-champ input,
.ct-champ textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--a-filet);
  border-radius: 0;
  padding: 10px 0;
  color: var(--a-texte);
  font-family: var(--cs-sans);
  font-size: var(--a-corps-lecture);
  line-height: 1.5;
  transition: border-color var(--cs-duree) var(--cs-ease);
}

.ct-champ textarea { resize: vertical; min-height: 8rem; }

/* Focus. Le système interdit le halo : l'indication passe par le filet,
   qui double d'épaisseur et blanchit, et par l'étiquette qui vire à
   l'ambre. Le contour par défaut est donc retiré sur ces champs seuls,
   et remplacé par un signal au moins aussi visible. */
.ct-champ input:focus,
.ct-champ textarea:focus {
  outline: none;
  border-bottom: 2px solid var(--a-texte);
  padding-bottom: 9px;
}

.ct-champ:focus-within label { color: var(--a-accent); }

/* Erreur native du navigateur : le filet passe à l'ambre dès qu'un champ
   obligatoire est rempli de travers, sans attendre l'envoi. */
.ct-champ input:user-invalid,
.ct-champ textarea:user-invalid { border-bottom-color: var(--a-accent); }

.ct-champ__note { font: var(--cs-label-small); letter-spacing: var(--cs-tracking-label); text-transform: uppercase; color: var(--a-attenue); }

.ct-envoi { margin-top: var(--cs-space-xl); }

.a-bouton {
  display: inline-block;
  font: var(--cs-label);
  font-weight: 700;
  letter-spacing: var(--cs-tracking-label);
  text-transform: uppercase;
  border: 0;
  border-radius: 0;
  background: var(--a-texte);
  color: var(--a-fond);
  padding: 15px 32px;
  cursor: pointer;
  transition: background-color var(--cs-duree) var(--cs-ease),
              color var(--cs-duree) var(--cs-ease);
}

.a-bouton:hover { background: var(--a-accent); color: var(--a-fond); }

.ct-rgpd {
  margin-top: var(--cs-space-lg);
  font: var(--cs-mention);
  color: var(--a-attenue);
  max-width: 62ch;
}

.ct-rgpd a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--a-filet);
  transition: color var(--cs-duree) var(--cs-ease), text-decoration-color var(--cs-duree) var(--cs-ease);
}

.ct-rgpd a:hover { color: var(--a-accent); text-decoration-color: var(--a-accent); }

@media (max-width: 860px) {
  .ct-grille { grid-template-columns: 1fr; gap: var(--cs-space-xl); }

  /* Le formulaire passe devant l'adresse : c'est l'action de la page. */
  .ct-aside { position: static; order: 2; }
  .ct-formulaire { order: 1; }

  /* iOS Safari zoome la page dès qu'un champ passe sous 16 px à la mise
     au point, et le corps de lecture du site descend à 13 px en mobile.
     On planche donc les champs à 16 px — eux seuls, pour ne pas
     désaccorder le reste du texte de la page d'accueil. */
  .ct-champ input, .ct-champ textarea { font-size: 1rem; }
}

/* ==========================================================================
   Méthodologie — commun aux deux versions
   ========================================================================== */

.me-section { padding-block: var(--cs-space-section) 0; }
.me-section:first-of-type { padding-top: var(--cs-space-section); }

.me-section h2 {
  font-family: var(--cs-serif);
  font-weight: 400;
  font-size: clamp(1.625rem, 3vw, 2.375rem);
  line-height: 1.1;
  letter-spacing: var(--cs-tracking-display);
  max-width: 22ch;
}

.me-prose p {
  color: var(--a-attenue);
  font-size: var(--a-corps-lecture);
  line-height: 1.55;
  max-width: 66ch;
}

.me-prose { margin-top: var(--cs-space-lg); }
.me-prose p + p { margin-top: var(--cs-space-lg); }

/* Listes réglées. Un filet entre les entrées, un filet qui ferme le bloc,
   jamais de cadre sur les quatre côtés. */
.me-liste { margin-top: var(--cs-space-xl); border-bottom: 1px solid var(--a-filet); }

.me-liste li {
  padding-block: var(--cs-space-lg);
  border-top: 1px solid var(--a-filet);
  color: var(--a-attenue);
  font-size: var(--a-corps-lecture);
  line-height: 1.55;
}

/* Variante sans intitulés, pour la version à sommaire : la colonne de
   gauche disparaît et le texte occupe toute la mesure. */
.me-liste--simple li { grid-template-columns: 1fr; }
.me-liste--simple p { max-width: 66ch; }

/* Le sommaire renvoie à chaque section : on laisse respirer au-dessus du
   titre visé plutôt que de le coller au bord haut de la fenêtre. */
.me-section { scroll-margin-top: var(--cs-space-xl); }

/* ---------- Clôture de page ---------- */

.me-fin { margin-top: var(--cs-space-section); }

.me-fin p {
  margin-top: var(--cs-space-xl);
  font-family: var(--cs-serif);
  font-weight: 400;
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  line-height: 1.32;
  letter-spacing: var(--cs-tracking-display);
  max-width: 34ch;
}

.me-fin .a-bouton { margin-top: var(--cs-space-xl); }

/* ==========================================================================
   Méthodologie — version à sommaire collant
   ========================================================================== */

.me-avec-sommaire .me-grille {
  display: grid;
  grid-template-columns: minmax(200px, 15rem) 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  margin-top: var(--cs-space-section);
}

.me-sommaire { position: sticky; top: var(--cs-space-xl); }

.me-sommaire__titre {
  font: var(--cs-label);
  letter-spacing: var(--cs-tracking-label);
  text-transform: uppercase;
  color: var(--a-attenue);
  padding-bottom: var(--cs-space-sm);
  border-bottom: 1px solid var(--a-filet);
}

.me-sommaire li { border-bottom: 1px solid var(--a-filet); }

.me-sommaire a {
  display: block;
  padding-block: var(--cs-space-md);
  font-family: var(--cs-sans);
  font-weight: 500;
  font-size: clamp(0.875rem, 1.1vw, 1rem);
  line-height: 1.35;
  color: var(--a-attenue);
  transition: color var(--cs-duree) var(--cs-ease);
}

.me-sommaire a:hover { color: var(--a-texte); }

/* L'entrée courante est marquée par la couleur ET par un filet en marge :
   la couleur seule ne suffirait pas à qui ne la distingue pas. */
.me-sommaire a[aria-current="true"] {
  color: var(--a-accent);
  box-shadow: inset 2px 0 0 var(--a-accent);
  padding-left: var(--cs-space-md);
}

@media (max-width: 860px) {
  .me-avec-sommaire .me-grille { grid-template-columns: 1fr; gap: var(--cs-space-xl); }
  /* Un sommaire collant qui occupe un tiers de l'écran gêne plus qu'il
     n'aide : sous 860 px il redevient un simple sommaire en tête. */
  .me-sommaire { position: static; }
}

/* ==========================================================================
   Pied de page — repris de A/index.html
   ========================================================================== */

.a-pied { padding-block: var(--cs-space-xl) var(--cs-space-section); }
.a-pied-haut { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--cs-space-lg); padding-block: var(--cs-space-lg); }
.a-pied img { height: 30px; width: auto; }
.a-pied-phrase { font: var(--cs-note); color: var(--a-attenue); max-width: 40ch; }
.a-pied-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--cs-space-xl); padding-block: var(--cs-space-lg); }
.a-pied-liens a { font: var(--cs-label); letter-spacing: var(--cs-tracking-label); text-transform: uppercase; transition: color var(--cs-duree) var(--cs-ease); }
.a-pied-liens a:hover { color: var(--a-accent); }
/* max-width: none est indispensable. tokens.css pose « p { max-width:
   64ch } » sur tous les paragraphes : sans cette ligne, la mention est
   centrée à l'intérieur d'une boîte de 518 px calée à gauche du pied,
   soit 280 px à gauche du vrai centre. */
.a-mention { font: var(--cs-mention); color: var(--a-attenue); text-align: center; max-width: none; }

.a-mention a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--a-filet);
  transition: color var(--cs-duree) var(--cs-ease), text-decoration-color var(--cs-duree) var(--cs-ease);
}
.a-mention a:hover { color: var(--a-accent); text-decoration-color: var(--a-accent); }

/* ==========================================================================
   Impression
   ========================================================================== */

@media print {
  .a-nav { display: none; }
  body { background: none; color: #293A4A; }
  .ap-filet { background: #CFC7B8; }
  .ap-photo { position: static; }
  .ap-projets { border-color: #CFC7B8; }
  .ap-texte p, .ap-projets li, .a-pied-phrase, .a-mention { color: #5A6C7C; }
  .ap-projets b { color: #293A4A; }
  .ap-courriel { color: #B5540F; }
  .ap-grille { break-inside: avoid; }
}