@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;0,700;1,600&family=Public+Sans:wght@400;600;700;900&display=swap');
:root{--paper:#f4efe4;--ink:#1c1b1a;--slate:#3e5566;--acid:#f4ff3b;--line:rgba(28,27,26,.42)}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.62 'Public Sans',Arial,sans-serif}a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem;z-index:9}header{border-bottom:4px solid var(--ink);display:flex;justify-content:space-between;align-items:stretch;padding:0 4vw}.brand{font:900 1.55rem/.76 'Public Sans';padding:1.2rem 0;text-decoration:none;text-transform:uppercase;letter-spacing:-.08em}.brand em{font-family:'Cormorant Garamond';font-weight:700;font-size:2rem;letter-spacing:-.05em;text-transform:none}nav{display:flex;align-items:stretch}nav a{border-left:2px solid var(--ink);padding:1.35rem 1rem;text-decoration:none;font-size:.78rem;font-weight:700;text-transform:uppercase}.nav-cta{background:var(--acid)}main{max-width:1440px;margin:auto}.hero{min-height:590px;padding:8vw 4vw 4vw;position:relative;overflow:hidden;background:linear-gradient(115deg,var(--paper) 57%,var(--slate) 57%)}.eyebrow{text-transform:uppercase;letter-spacing:.11em;font-size:.72rem;font-weight:900;margin:0 0 1.2rem}.hero h1,.page-intro h1{font:700 clamp(4.5rem,12vw,10rem)/.76 'Cormorant Garamond',serif;letter-spacing:-.07em;max-width:950px;margin:0}.hero h1 i,.page-intro i{font-weight:600}.lede{max-width:640px;font-size:1.18rem;margin:2.3rem 0}.button{display:inline-block;background:var(--acid);border:3px solid var(--ink);box-shadow:7px 7px 0 var(--ink);padding:.8rem 1.1rem;font-size:.8rem;font-weight:900;text-transform:uppercase;text-decoration:none}.hero-mark{position:absolute;right:10%;bottom:8%;font:900 9rem/.55 'Public Sans';letter-spacing:-.12em;color:var(--acid)}.hero-mark small{font-size:.7rem;line-height:1;letter-spacing:.05em;text-transform:uppercase;display:block;margin-left:1rem}.staff{height:22px;margin:3rem 4vw;background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,var(--line) 3px,var(--line) 4px,transparent 4px,transparent 7px)}.local{padding:3rem 4vw 6rem;display:grid;grid-template-columns:1.2fr .8fr;gap:4rem}.local h2,.editorial h2,.routes strong{font:700 clamp(2.4rem,5vw,5rem)/.88 'Cormorant Garamond';letter-spacing:-.055em;margin:0}.fact{border:3px solid var(--ink);background:white;padding:1.5rem;box-shadow:8px 8px 0 var(--slate)}.routes{border-top:4px solid var(--ink);margin:0 4vw 5rem}.routes>a{border-bottom:2px solid var(--ink);padding:1.2rem 0;display:grid;grid-template-columns:90px 1fr 1fr;gap:1rem;text-decoration:none;align-items:center}.routes>a:hover{background:var(--acid)}.routes span{font-weight:900;color:var(--slate)}.routes em{font-size:.86rem;font-style:normal}.editorial{background:var(--slate);color:#fff;padding:4rem}.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--ink);margin-top:2rem}.article-grid article{background:var(--paper);color:var(--ink);padding:1.5rem;min-height:300px}.article-grid h2{font-size:2.5rem;margin:.5rem 0}.article-grid article>a{text-decoration:none}.page-intro{padding:8vw 10vw;max-width:1100px}.page-intro h1{font-size:clamp(4rem,10vw,8rem)}.prose,.contact{max-width:800px;margin:0 auto 6rem;padding:0 1.5rem}.prose h2{font:700 3rem/.9 'Cormorant Garamond'}.contact label{display:block;font-weight:700;margin:1rem 0}.contact input,.contact textarea{width:100%;display:block;background:#fff;border:2px solid var(--ink);padding:.8rem;font:inherit}.crumb{display:block;margin:2rem 6vw;font-size:.8rem}.article{max-width:940px;margin:auto;padding:1rem 2rem 5rem}.article-head h1{font:700 clamp(3.6rem,8vw,7rem)/.82 'Cormorant Garamond';letter-spacing:-.065em;margin:0}.article figure{margin:4rem -8vw}.article img{width:100%;height:auto;display:block;max-height:620px;object-fit:cover;border-block:4px solid var(--ink)}.credit{font-size:.72rem;margin:.5rem 0}.article section{margin:4.5rem 0}.article h2,.faq h2{font:700 clamp(2.6rem,5vw,4.5rem)/.85 'Cormorant Garamond';letter-spacing:-.055em;margin:0 0 1.3rem}.article section>div{font-size:1.08rem}.article table{width:100%;border-collapse:collapse;background:#fff;font-size:.88rem}.article th,.article td{padding:.8rem;border:2px solid var(--ink);text-align:left;vertical-align:top}.article th{background:var(--acid)}.faq{border:4px solid var(--ink);background:#fff;padding:2rem}.faq details{border-top:1px solid var(--ink);padding:1rem 0}.faq summary{font-weight:700;cursor:pointer}.related{margin:0 4vw 6rem;padding:2rem;border-top:4px solid var(--ink);display:grid;gap:1rem}.related a{font:700 2rem/.95 'Cormorant Garamond';max-width:600px}footer{background:var(--ink);color:var(--paper);padding:5vw 4vw;display:flex;justify-content:space-between;gap:2rem}footer .footer-title{font:700 clamp(4rem,10vw,9rem)/.7 'Cormorant Garamond';letter-spacing:-.07em;margin:0}footer div{display:grid;align-content:end;gap:.6rem}footer a{font-weight:700}@media(max-width:700px){header{padding:0 1rem}nav a{padding:1.2rem .5rem;font-size:.62rem}.nav-cta{display:none}.hero{min-height:560px;background:linear-gradient(135deg,var(--paper) 70%,var(--slate) 70%)}.hero-mark{right:14%;bottom:10%}.local{grid-template-columns:1fr;gap:2rem}.routes>a{grid-template-columns:45px 1fr}.routes em{grid-column:2}.article-grid{grid-template-columns:1fr}.editorial{padding:3rem 1rem}.article{padding:1rem}.article figure{margin:3rem -1rem}.article th,.article td{padding:.5rem}footer{display:block}footer .footer-title{margin-bottom:3rem}}

/* Tokens de direction artistique (project-spec.json -> art_direction), posés par 02b.
   Le front conserve ses propres noms (--paper / --ink / --slate / --acid) : ce sont eux
   que les regles ci-dessous utilisent, et ils portent DEJA les valeurs de la DA. Les
   noms ci-dessous sont ceux de la convention du parc, lus par les etapes aval et par
   le validateur de 02b. Valeurs identiques : aucun changement de rendu. */
:root{
--primary: #3E5566;--primary-color: #3E5566;--primary-hover: #2E4150;--on-primary: #FFFFFF;
--secondary: #1C1B1A;--secondary-color: #1C1B1A;--secondary-hover: #2E2C2A;
--bg: #F4EFE4;--light-color: #F4EFE4;--surface: #FBF8F1;
--text: #1C1B1A;--dark-color: #1C1B1A;--text-secondary: #3F3B37;--dark-light: #3F3B37;
--text-strong: #0F0E0D;--gray-800: #0F0E0D;--text-muted: #6B6560;--gray-600: #6B6560;
--text-faint: #B3AA9B;--gray-300: #B3AA9B;--fill: #EAE3D4;--gray-100: #EAE3D4;
--border: #DCD3C2;--gray-200: #DCD3C2;--white: #FFFFFF;
--callout-bg: #E8E1D2;--callout-text: #2E4150;--callout-border: #3E5566;
}


/* BLOC SOUS-MENU OUTILS (05b) — sans JavaScript.
   Ouverture par :hover et :focus-within, pour que le clavier ouvre le menu comme
   la souris. Sous 850px le sous-menu se deplie en liste indentee : le front
   n'ayant pas de drawer, un menu flottant y serait inatteignable au doigt. */
.nav-item.has-sub{position:relative;display:flex;align-items:stretch}
.nav-item.has-sub>a{display:flex;align-items:center}
.sub-nav{position:absolute;top:100%;left:0;z-index:40;display:none;min-width:290px;
  background:var(--paper);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--slate)}
.nav-item.has-sub:hover .sub-nav,.nav-item.has-sub:focus-within .sub-nav{display:block}
.sub-nav a{display:block;border-left:0;border-bottom:1px solid var(--line);
  padding:.75rem 1rem;text-transform:none;font-size:.82rem;line-height:1.3}
.sub-nav a:last-child{border-bottom:0}
.sub-nav a:hover,.sub-nav a:focus{background:var(--acid)}
.sub-nav small{display:block;font-weight:400;font-size:.7rem;color:var(--slate);margin-top:.15rem}
.sub-nav-all{font-weight:900;text-transform:uppercase;font-size:.72rem}
footer .sub-nav small{display:none}
@media(max-width:850px){
  .nav-item.has-sub{display:block}
  .sub-nav{position:static;display:block;min-width:0;border:0;box-shadow:none;background:transparent}
  .sub-nav a{padding:.45rem 0 .45rem 1rem;font-size:.62rem;text-transform:uppercase}
  .sub-nav small{display:none}
}
/* FIN BLOC SOUS-MENU OUTILS (05b) */

/* ===== BLOC LARGEUR UNIFIÉE — toutes les pages à la largeur de la home ===== */
/*
 * Posé par 06a2-largeur-contenu. Les sélecteurs ci-dessous ont été RELEVÉS
 * dans les feuilles réellement chargées par le front, pas devinés : c'est la
 * correction du défaut d'origine, où une liste de classes supposées rendait
 * le bloc inerte sans que rien ne le signale.
 *
 * Largeur de référence relevée sur `.container` : la largeur de `.container`.
 *
 * `!important` est délibéré. Une contrainte peut être déclarée dans une
 * feuille chargée APRÈS celle-ci, ou plus bas dans ce même fichier par un
 * bloc appendu ultérieurement : à spécificité égale elle gagnerait, et le
 * bloc serait posé, validé, et sans effet.
 *
 * Les contrôles de formulaire, les images et les cartes sont épargnés.
 *
 * Ce qui suit la borne « relevé automatique : fin » est CONSERVÉ au rejeu :
 * c'est là que vivent les règles tranchées à la main. N'écris rien au-dessus.
 */

/* --- relevé automatique : début --- */
main{max-width:none!important}   /* style.css : 1440px */
.lede{max-width:none!important}   /* style.css : 640px */
.page-intro{max-width:none!important}   /* style.css : 1100px */
.article{max-width:none!important}   /* style.css : 940px */
.related a{max-width:none!important}   /* style.css : 600px */
.source-list{max-width:none!important}   /* style.css : 820px */

/* Grilles à deux colonnes relevées, NON collapsées d'office : une grille de
   cartes se collapserait à tort. À trancher au brief 06a2, puis à écrire
   SOUS la borne de fin ci-dessous. */
/*   .local { grid-template-columns: 1.2fr .8fr }  (style.css) */
/*   .routes>a { grid-template-columns: 90px 1fr 1fr }  (style.css) */
/* --- relevé automatique : fin --- */

/* Règles tranchées à la main, conservées au rejeu de 06a2. */
/* Règles tranchées à la main, conservées au rejeu de 06a2. */
.content-narrow{max-width:none!important}
.content-narrow select,.content-narrow input[type=number],.content-narrow input[type=text]{max-width:520px}
.article-layout{width:min(1140px,calc(100% - 40px));margin-inline:auto}
.article-body{max-width:72ch}
.article-layout{width:min(100% - 28px,1140px)}
.breadcrumb{display:block;margin:2rem 6vw;font-size:.8rem}

/* ===== ENVELOPPE + OUVERTURE NORMÉE (couches 1 et 2 du gabarit) ===== */
.author-card{display:flex;gap:18px;align-items:flex-start;margin:0 0 22px;padding:20px 22px;background:var(--fill);border-left:3px solid var(--primary)}
.author-card .author-avatar{flex:0 0 auto;line-height:0}
.author-card .author-img{object-fit:cover}
.author-footer .author-card .author-img{width:88px;height:88px;object-fit:cover;border-radius:var(--radius-round, 50%)}
.author-footer .author-card .author-monogram{width:88px;height:88px;font-size:30px}
.author-name{margin:0;font-family:var(--font-heading);font-size:16px;font-weight:700;line-height:1.3}
.author-name a{color:var(--text-strong)}
.author-name a:hover{color:var(--primary)}
.author-job{display:block;margin-top:3px;font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:1.1px;color:var(--text-muted)}
.author-legit{margin:11px 0 0;font-size:14.5px;line-height:1.5;font-weight:600;color:var(--text-strong)}
.author-bio{margin:7px 0 0;font-size:13.5px;line-height:1.55;color:var(--text-secondary)}
.author-links{margin:10px 0 0;font-size:13px}
.author-links a{color:var(--primary);font-weight:700;border-bottom:1px solid currentColor}
.page-dates{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0 0 22px;font-size:12px;color:var(--text-muted)}
.page-dates time{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-secondary)}
.method-note{margin:0 0 26px;padding:17px 19px;background:var(--callout-bg);border:1px solid var(--callout-border);border-left:3px solid var(--primary)}
.method-note-title{margin:0 0 6px;font-family:var(--font-heading);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--callout-text)}
.method-note p:last-child{margin:0;font-size:14px;line-height:1.6;color:var(--callout-text)}
.opening{margin:0 0 34px}
.opening .answer{margin:0;padding:22px 24px;background:var(--secondary);color:var(--white);font-family:var(--font-heading);font-size:clamp(17px,1.9vw,20px);line-height:1.45;letter-spacing:-.2px}
.essentials{margin:0;padding:20px 24px;background:var(--surface);border:1px solid var(--border);border-top:0}
.essentials-title{margin:0 0 10px;font-family:var(--font-heading);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-muted)}
.essentials ul{margin:0;padding:0;list-style:none}
.essentials li{position:relative;padding:7px 0 7px 22px;font-size:15px;line-height:1.5;color:var(--text)}
.essentials li::before{content:"";position:absolute;left:0;top:15px;width:8px;height:2px;background:var(--primary)}
.scope{margin:0;padding:14px 24px;background:var(--fill);border:1px solid var(--border);border-top:0;font-size:13.5px;line-height:1.55;color:var(--text-secondary)}
.scope span{font-family:var(--font-heading);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.1px;color:var(--text-muted);margin-right:6px}
.scope a{color:var(--secondary);font-weight:700;border-bottom:1px solid currentColor}
.scope a:hover{color:var(--primary)}
.update-log{margin:0;padding:20px 22px;border-top:2px solid var(--secondary);background:var(--fill)}
.update-log-title{margin:0 0 9px;font-family:var(--font-heading);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-muted)}
.update-log ul{margin:0;padding:0;list-style:none}
.update-log li{padding:6px 0;font-size:13.5px;line-height:1.5;color:var(--text-secondary);border-bottom:1px solid var(--border)}
.update-log li:last-child{border-bottom:0}
.update-log time{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:500;color:var(--text-strong)}
@media(max-width:640px){.author-card{padding:16px}.opening .answer{padding:18px}.essentials,.scope{padding:16px 18px}}

/* Signature de tête — identité et dates sur une seule ligne. Le parcours de
   l'auteur n'est pas ici : il se lit en pied, via .author-footer. */
.author-byline{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin:0 0 26px;padding-bottom:14px;border-bottom:1px solid var(--border,#D3CEC1);font-size:13px;color:var(--text-secondary,#4A554D)}
.byline-author a{color:var(--secondary,#3A4A3F);font-weight:700;border-bottom:1px solid currentColor}
.byline-author a:hover{color:var(--primary,#A65E2E)}
.author-byline .page-dates{margin:0;gap:6px 18px}

/* Pied d'article — la carte auteur complète, détachée du corps du texte. */
.author-footer{margin:38px 0 22px;border-top:2px solid var(--secondary,#3A4A3F)}
.author-footer .author-card{margin:0}

/* Signature dans le hero d'article (blog) : le hero est un aplat sombre, la
   signature doit y passer en blanc. Sans cette règle, elle hérite des couleurs
   pensées pour un fond clair et devient illisible (contraste ~1,1:1). */
.guide-hero .author-byline,
.guide-hero .author-byline .page-dates,
.guide-hero .byline-author a,
.guide-hero .page-dates time{color:#FFFFFF}
.guide-hero .author-byline{border-bottom-color:rgba(255,255,255,.28)}

/* ===== SOURCES — liens sortants cités près de l'affirmation ===== */
.source-note a[rel~="nofollow"]{color:var(--secondary);font-weight:600;border-bottom:1px solid var(--text-faint)}
.source-note a[rel~="nofollow"]:hover{color:var(--primary);border-bottom-color:var(--primary)}
.tool-table a[rel~="nofollow"]{font-weight:600;text-decoration:none;border-bottom:1px solid var(--text-faint)}
.tool-table a[rel~="nofollow"]:hover{color:var(--primary);border-bottom-color:var(--primary)}
.source-list{list-style:none;margin:0;padding:0;max-width:820px}
.source-list li{padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.source-list li:last-child{border-bottom:0}
.source-list span{display:block;margin-top:2px;font-size:11px;color:var(--text-muted)}


/* BLOC HERO DE LA HOME (07)
   ------------------------------------------------------------------------
   Le builder a livre le hero sans image de fond, avec un simple degrade.
   L'image definitive generee a l'etape 07 est glissee SOUS ce degrade, rendu
   translucide pour la laisser transparaitre. La moitie gauche de l'image est
   calme et claire : c'est la que se lisent le h1, la lede et le bouton.

   Deux precautions volontaires :
   - on n'ecrit que `background-image`, jamais le raccourci `background`, pour
     ne pas effacer la couleur de fond des regles anterieures ;
   - la variante mobile est re-declaree ci-dessous dans sa propre media query.
     Sans elle, cette regle inconditionnelle neutraliserait le degrade a 135deg
     du `@media(max-width:700px)` d'origine, et rien ne le signalerait au test
     desktop. */
.hero{
  background-image:
    linear-gradient(115deg, rgba(244,239,228,.88) 57%, rgba(62,85,102,.80) 57%),
    url("/assets/img/05-hero-home.webp");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
@media(max-width:700px){
  .hero{
    background-image:
      linear-gradient(135deg, rgba(244,239,228,.90) 70%, rgba(62,85,102,.82) 70%),
      url("/assets/img/05-hero-home.webp");
  }
}
/* FIN BLOC HERO DE LA HOME (07) */

/* BLOC VISUELS (07c) — lockups de marque et figures des pages pilier.
   ------------------------------------------------------------------------
   Le lockup du header remplace le texte « Pianos / Angers » : on le contraint
   en hauteur (la largeur suit), pour qu'il tienne la meme place que le texte
   qu'il remplace, quelle que soit la taille du fichier servi.
   Le lockup du pied de page sert la variante ivoire : le wordmark encre est
   illisible sur le fond ebene, et un filtre CSS delaverait aussi les filets. */
.brand-logo{display:flex;align-items:center;padding:1.2rem 0}
.brand-logo img{height:34px;width:auto;display:block}
.footer-logo{height:30px;width:auto;display:block;margin-bottom:.2rem}

/* Figures des pages pilier. Le hero de page prend la largeur du bandeau,
   les illustrations in-content suivent la colonne de .prose. */
.page-visual{margin:0 4vw 3rem;padding:0}
.page-visual img{width:100%;height:auto;display:block;border-block:4px solid var(--ink)}
.page-visual figcaption{margin:.7rem 0 0;font-size:.74rem;line-height:1.5;color:var(--slate)}
.prose .page-visual{margin:2.4rem 0 2.8rem}
.prose .page-visual img{border:3px solid var(--ink);box-shadow:8px 8px 0 var(--slate)}
@media(max-width:700px){
  .brand-logo img{height:26px}
  .page-visual{margin:0 1rem 2rem}
  .prose .page-visual img{box-shadow:5px 5px 0 var(--slate)}
}
/* FIN BLOC VISUELS (07c) */