/* =====================================================================
   ASSOSTUDIO.FR — LA FEUILLE DE LA VITRINE
   =====================================================================

   L'IDÉE DIRECTRICE : L'OUTIL, PAS LA MARQUE.

   Cette page vend un produit à des associations qui n'ont rien en
   commun : un club de foot, une chorale, une épicerie solidaire, une
   association de parents d'élèves. Elle ne peut donc PAS avoir de
   personnalité graphique forte — toute couleur d'ambiance qu'elle
   prendrait dirait à deux tiers des visiteurs « ce n'est pas pour
   vous ».

   Son identité est celle d'une interface bien faite : blanc, un bleu de
   travail, des bordures d'un pixel, une grille qui tient, et de la
   place donnée aux CAPTURES — c'est-à-dire au produit.

   ---------------------------------------------------------------------
   CE QUI A ÉTÉ JETÉ, ET POURQUOI IL FAUT LE SAVOIR.

   La version précédente était un « panneau d'affichage » : fond
   #F7F5F0, rouge de tampon #973018, Archivo, filets de 2 px, angles
   vifs, titre d'accueil à 5,4 rem. C'était cohérent, et c'était
   toujours de la famille de StayStudio — un papier crème, une encre
   terreuse, une composition éditoriale. Mise à côté de staystudio.fr,
   on lisait deux déclinaisons d'un même goût.

   Ce qui change ici n'est donc pas la palette, c'est le REGISTRE :

     — le fond est BLANC, et le gris de bande est légèrement BLEUTÉ,
       jamais chaud. Aucun crème, nulle part ;
     — un seul accent, un bleu de travail, et il ne sert qu'aux liens,
       aux boutons et aux marques d'état ;
     — la bordure d'un pixel remplace le filet de deux : c'est la
       différence entre une interface et une affiche ;
     — six pixels de rayon partout — ni l'angle vif d'un panneau, ni
       l'arrondi généreux d'un thème d'association ;
     — Geist, une grotesque neutre de produit, à trois graisses. Aucune
       serif, aucune italique décorative ;
     — IBM Plex Mono pour les surtitres : c'est le signe « interface »,
       et il porte à lui seul le registre de toute la page ;
     — le titre d'accueil descend de 5,4 rem à 3,4 rem, et les cinq
       exemples remontent au-dessus de la ligne de flottaison.

   ---------------------------------------------------------------------
   LE CONTRASTE EST MESURÉ, PAS ESTIMÉ. Chaque couple porte son rapport,
   calculé selon WCAG 2.1. Rien sous 4,5:1 ne porte du texte courant,
   rien sous 3:1 ne porte une bordure d'interface.
   ===================================================================== */

/* ---------- 1. Les polices ----------------------------------------------
   QUATRE FICHIERS, ET CHACUN EST EMPLOYÉ. Geist 800 ne sert qu'au titre
   d'accueil et aux nombres ; Geist 500 aux titres de section et aux
   boutons ; Geist 400 à tout le texte ; Plex Mono 400 aux seuls
   surtitres. Un poids chargé « au cas où » coûte un aller-retour réseau
   pour rien.

   LES REPLIS PORTENT DES MÉTRIQUES MESURÉES : une même phrase française
   composée à 100 px dans chaque police, relevée au navigateur. Le repli
   est rétréci dans le rapport obtenu, et le décalage de mise en page
   reste sous le millième. */

/* FRAUNCES NE PORTE QU'UN MOT : « Assostudio », dans l'en-tête et nulle
   part ailleurs. C'est la police du même mot chez StayStudio et dans
   l'administration du socle — une enseigne d'éditeur qui change de
   dessin d'un écran à l'autre n'est plus une enseigne. Le reste de la
   page ne la voit jamais : les titres sont en Geist, et c'est ce qui
   sépare les deux marques. */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist'; src: url('../fonts/geist-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist'; src: url('../fonts/geist-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist'; src: url('../fonts/geist-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plex Mono'; src: url('../fonts/plexmono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Geist repli';
  src: local('Helvetica Neue'), local('Helvetica'), local('Arial'), local('Liberation Sans');
  size-adjust: 94.39%; ascent-override: 99%; descent-override: 25%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Plex Mono repli';
  src: local('SFMono-Regular'), local('Menlo'), local('Consolas'), local('Courier New');
  size-adjust: 96%; ascent-override: 100%; descent-override: 26%; line-gap-override: 0%;
}

/* ---------- 2. Les jetons ------------------------------------------------ */

:root {
  /* LES FONDS. Blanc dominant. Le gris de bande est légèrement BLEUTÉ —
     #F4F5F7 et non #F5F4F2 — et cette différence d'un point de teinte
     est exactement ce qui sépare « interface » de « papier ». */
  --fond:        #FFFFFF;
  --fond-bande:  #F4F5F7;
  --fond-creux:  #EAECF0;
  --fond-encre:  #0E1116;   /* la seule surface sombre : une bande, pas un thème */

  /* L'ENCRE.
     encre sur fond        : 17,4:1
     encre-douce sur fond  :  6,9:1
     clair sur encre       : 16,6:1
     clair-doux sur encre  :  7,1:1 */
  --encre:       #101418;
  --encre-douce: #4E5560;
  --clair:       #F7F8FA;
  --clair-doux:  #9AA3B0;

  /* LES BORDURES. Un pixel, partout : c'est le langage des outils.
     trait-champ sur fond : 3,2:1 — seuil des éléments d'interface. */
  --trait:       #E3E6EA;
  --trait-fort:  #C7CCD4;
  --trait-champ: #99A1AC;
  --trait-nuit:  #262C35;

  /* L'ACCENT, ET IL EST SEUL. Un bleu de travail, ni startup ni
     institutionnel.
     bleu sur fond  : 7,4:1 — il porte du texte
     fond sur bleu  : 7,4:1 — donc le bouton plein est lisible */
  --bleu:        #1D4ED8;
  --bleu-fonce:  #1740B0;
  --bleu-pale:   #EAF0FE;

  /* Le vert ne sert QU'AUX ÉTATS DE RÉUSSITE — jamais au décor.
     vert sur fond : 5,3:1 */
  --vert:        #0F7A4D;
  --alerte:      #B3261E;   /* 5,9:1 */

  --texte: 'Geist', 'Geist repli', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono:  'Plex Mono', 'Plex Mono repli', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* L'ÉCHELLE EST RESSERRÉE, ET C'EST UNE DÉCISION. Le titre d'accueil
     plafonne à 3,4 rem — la moitié de l'ancienne version — pour que le
     hero tienne, boutons compris, au-dessus de la ligne de flottaison
     d'un portable de 1440 × 900. */
  --t-affiche:  clamp(2.1rem, 4.2vw, 3.4rem);
  --t-h2:       clamp(1.5rem, 2.6vw, 2.1rem);
  --t-h3:       clamp(1.08rem, 1.4vw, 1.25rem);
  --t-lead:     clamp(1.05rem, 1.3vw, 1.2rem);
  --t-corps:    1.0625rem;
  --t-petit:    0.9375rem;
  --t-mention:  0.78125rem;
  --t-nombre:   clamp(1.6rem, 2.8vw, 2.2rem);

  --gouttiere:  clamp(18px, 4vw, 56px);
  --large:      1200px;
  --lecture:    36rem;
  /* La densité d'un produit, pas d'une revue : 88 px au maximum entre
     deux parties, là où l'ancienne version en mettait 132. */
  --partie-y:   clamp(48px, 6.5vh, 88px);

  /* SIX PIXELS, ET UN SEUL RAYON. Ni l'angle vif d'une affiche, ni
     l'arrondi d'un thème d'association : le rayon d'un composant. */
  --rayon:      6px;

  --h-entete:   62px;
  --ease:       cubic-bezier(0.2, 0, 0.2, 1);
}

@media (max-width: 899px) { :root { --h-entete: 56px; } }

/* ---------- 3. Remise à plat --------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--h-entete) + 16px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--texte);
  font-size: var(--t-corps);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body[data-menu-ouvert] { overflow: hidden; }

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--bleu-pale); color: var(--encre); }

.evitement {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--encre); color: var(--clair);
  padding: 0.7em 1.1em; font-weight: 500;
}
.evitement:focus { left: 0; }

/* ---------- 4. L'en-tête -------------------------------------------------- */

.entete {
  position: sticky; top: 0; z-index: 100;
  min-height: var(--h-entete);
  display: flex; align-items: center; gap: 1.2rem;
  padding: 0 var(--gouttiere);
  background: var(--fond);
  border-bottom: 1px solid transparent;
  transition: border-color 140ms var(--ease);
}
.entete[data-fixe] { border-bottom-color: var(--trait); }

.marque {
  display: inline-flex; align-items: center; gap: 0.5rem;
  text-decoration: none; font-weight: 500; font-size: 1.12rem;
  letter-spacing: -0.015em;
}
.marque__signe { width: 24px; height: 24px; flex: none; color: var(--bleu); }
.marque__mot {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 600; font-size: 1.725rem;
  letter-spacing: -0.01em; line-height: 1;
}

.menu { margin-left: auto; display: flex; align-items: center; gap: clamp(0.7rem, 1.8vw, 1.7rem); }
.menu__lien {
  text-decoration: none; font-size: var(--t-petit); color: var(--encre-douce);
  padding: 0.4em 0;
}
.menu__lien:hover { color: var(--encre); }

.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0.5em 1.1em;
  font-weight: 500; font-size: var(--t-petit);
  text-decoration: none; cursor: pointer;
  border: 1px solid var(--bleu); border-radius: var(--rayon);
  background: var(--bleu); color: #FFFFFF;
  transition: background 140ms var(--ease), border-color 140ms var(--ease);
}
.bouton:hover { background: var(--bleu-fonce); border-color: var(--bleu-fonce); }
.bouton--grand { min-height: 46px; padding: 0.65em 1.4em; font-size: var(--t-corps); }

/* Le burger n'existe que si le script a tourné ET que l'écran est
   étroit : sans script, le menu complet est déjà dans la page ; au-delà
   de 900 px, un bouton qui ouvre un menu déjà visible ne sert à rien. */
.burger { display: none; }
@media (max-width: 899px) {
  .entete[data-js] .burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-left: auto;
    background: none; border: 1px solid var(--trait-fort); border-radius: var(--rayon);
    cursor: pointer;
  }
  .burger__trait { display: block; width: 18px; height: 2px; background: var(--encre); position: relative; }
  .burger__trait::before, .burger__trait::after {
    content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--encre);
    transition: transform 160ms var(--ease), top 160ms var(--ease);
  }
  .burger__trait::before { top: -6px; }
  .burger__trait::after  { top: 6px; }
  .entete[data-ouvert] .burger__trait { background: transparent; }
  .entete[data-ouvert] .burger__trait::before { top: 0; transform: rotate(45deg); }
  .entete[data-ouvert] .burger__trait::after  { top: 0; transform: rotate(-45deg); }

  .entete[data-js] .menu {
    position: fixed; inset: var(--h-entete) 0 0 0;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: 0.8rem var(--gouttiere) 3rem;
    background: var(--fond); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity 160ms var(--ease), transform 160ms var(--ease), visibility 160ms;
  }
  .entete[data-js][data-ouvert] .menu { transform: none; opacity: 1; visibility: visible; }
  .entete[data-js] .menu__lien {
    font-size: 1.08rem; padding: 0.9em 0; color: var(--encre);
    border-bottom: 1px solid var(--trait);
  }
  .entete[data-js] .menu .bouton { margin-top: 1.1rem; }
}

/* ---------- 5. La trame ---------------------------------------------------
   UNE PARTIE, UNE BORDURE D'UN PIXEL. Pas de filet épais : ce qui sépare
   deux parties d'un outil est un trait, pas une règle typographique. */

.partie {
  padding: var(--partie-y) var(--gouttiere);
  border-top: 1px solid var(--trait);
}
.partie:first-of-type { border-top: 0; }
.partie--fonce { background: var(--fond-bande); }
.partie--encre {
  background: var(--fond-encre); color: var(--clair);
  border-top-color: var(--fond-encre);
}
.partie--encre .partie__numero,
.partie--encre .mention,
.partie--encre .partie__chapo { color: var(--clair-doux); }
.partie--encre a { color: var(--clair); }

.dedans { max-width: var(--large); margin: 0 auto; }

/* LE SURTITRE EST EN MONOSPACE, et c'est le seul endroit où elle
   apparaît. Un surtitre en petites capitales espacées fait un titre de
   rubrique de magazine ; en monospace, il fait une étiquette
   d'interface. C'est un signe, pas une décoration — et il porte à lui
   seul le registre de toute la page. */
.partie__numero {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-mention); letter-spacing: 0.01em;
  color: var(--bleu);
  margin-bottom: 0.8rem;
}
.partie--encre .partie__numero { color: var(--clair-doux); }

.partie__titre {
  font-size: var(--t-h2); font-weight: 500;
  line-height: 1.15; letter-spacing: -0.022em;
  max-width: 24ch; text-wrap: balance;
}
.partie__chapo {
  margin-top: 0.8rem; max-width: var(--lecture);
  font-size: var(--t-lead); color: var(--encre-douce);
}
.partie__corps { margin-top: clamp(1.8rem, 3vw, 2.8rem); }

p + p { margin-top: 0.8em; }
.texte { max-width: var(--lecture); }
/* CE QUI SUIT UN BLOC, ET LE COMMENTE. Une seule règle, employée sous la
   liste des rubriques, sous les écrans et sous le tableau des prix :
   c'est ce qui remplace les trois paragraphes de justification qui
   suivaient le prix. Un paragraphe, détaché par un filet. */
.texte--suite {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  padding-top: clamp(1.1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--trait);
  color: var(--encre-douce);
}
.mention { font-size: var(--t-mention); color: var(--encre-douce); }
.mention--apres { margin-top: 1.2rem; }

/* ---------- 6. L'accueil --------------------------------------------------
   COMPACT, ET LES TROIS EXEMPLES JUSTE EN DESSOUS. Le hero d'une page
   qui vend un outil doit tenir en un écran : ce qui décide n'est pas la
   promesse, c'est la preuve — et la preuve est plus bas. */

.affiche {
  padding: clamp(2.2rem, 4.5vh, 3.6rem) var(--gouttiere) clamp(2.2rem, 4vh, 3.4rem);
  border-top: 0;
}

/* DEUX COLONNES À PARTIR DE 1000 PX, ET LA PAROLE EST LA PLUS LARGE.
   Sept parts contre cinq : la capture accompagne le texte, elle ne lui
   dispute pas la place. En dessous, tout s'empile et la capture passe
   APRÈS le tarif — le premier écran d'un téléphone doit porter la
   promesse et le bouton, pas une image. */
.affiche__grille { display: grid; gap: clamp(1.8rem, 4vw, 3.4rem); align-items: start; }
@media (min-width: 1000px) {
  .affiche__grille { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
/* LES DEUX PLAQUES D'ACCUEIL, ET ELLES SE CHEVAUCHENT.

   IL N'Y EN AVAIT QU'UNE, LÉGENDÉE, ET C'ÉTAIT L'ERREUR. Une capture
   seule dit « voilà LE site que nous faisons », alors que toute la page
   dit ensuite le contraire. Deux captures qui n'ont rien en commun —
   un club omnisports devant, un centre d'art derrière — le disent avant
   la première ligne lue.

   AUCUNE OMBRE PORTÉE POUR AUTANT. La plaque de devant se détache par
   une RÉSERVE de la couleur du fond, comme un passe-partout : le reste
   de cette page n'a pas un flou, celle-ci non plus. Les deux gardent le
   filet d'un pixel qui est le langage de l'ensemble. */
.affiche__preuve { position: relative; }
.affiche__plaque { margin: 0; }
.affiche__plaque img {
  width: 100%; aspect-ratio: 1520 / 1046; object-fit: cover; object-position: top center;
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--fond-bande);
}
.affiche__plaque--arriere {
  position: absolute; top: 0; inset-inline-end: -3%;
  width: 64%; z-index: 1;
}
.affiche__plaque--avant {
  position: relative; z-index: 2;
  width: 86%; margin-top: 10%;
}
.affiche__plaque--avant img { box-shadow: 0 0 0 7px var(--fond); }

@media (min-width: 1000px) {
  /* Au-dessus de la bascule, la colonne de droite ne porte plus qu'elles :
     on leur laisse la hauteur nécessaire pour que le décalage se voie. */
  .affiche__preuve { min-height: 21rem; }
  .affiche__plaque--arriere { width: 68%; inset-inline-end: -8%; }
  .affiche__plaque--avant { width: 90%; margin-top: 12%; }
}
/* EN CAPITALES. Un surtitre en bas de casse se lit comme le début d'une
   phrase et l'œil enchaîne sur le titre ; en capitales, il se lit comme
   une étiquette et le titre repart de zéro. L'interlettrage est ouvert
   parce qu'une monospace en capitales se serre à la lecture. */
.affiche__surtitre {
  font-family: var(--mono); font-size: var(--t-mention); color: var(--bleu);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.affiche__titre {
  margin-top: 0.85rem;
  font-size: var(--t-affiche); font-weight: 800;
  line-height: 1.05; letter-spacing: -0.035em;
  max-width: 20ch; text-wrap: balance;
}
/* LE SECOND MEMBRE DU TITRE EST DEUX FOIS MOINS GRAS, ET DROIT.
   « Le site de votre association » est la promesse, « fait à partir de ce
   que vous avez déjà » est la façon dont elle est tenue : deux poids pour
   deux natures de phrase. La famille ne change pas — Geist des deux
   côtés, à 800 puis à 400 —, ce qui garde au titre une seule voix.

   L'italique a été essayée puis retirée. Le dépôt n'a pas de fichier
   Geist italique : l'inclinaison était synthétique, calculée par le
   navigateur, et une italique qu'aucun dessinateur n'a tracée se voit. */
.affiche__titre em { font-style: normal; font-weight: 400; color: inherit; }
.affiche__chapo {
  margin-top: 1rem; max-width: 54ch;
  font-size: var(--t-lead); color: var(--encre-douce);
}
.affiche__actions { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; align-items: center; }

/* LE SECOND CHEMIN EST UN LIEN, PAS UN BOUTON. Deux boutons côte à côte
   posent deux actions de même poids, et le visiteur choisit celle qui
   engage le moins. Un seul bouton, un lien souligné à côté : la page dit
   ce qu'elle attend, sans interdire de regarder d'abord. */
.lien-discret {
  font-size: var(--t-petit); color: var(--encre-douce);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--trait-fort);
}
.lien-discret:hover { color: var(--encre); text-decoration-color: currentColor; }

/* LE TARIF EN TEXTE, SOUS LES BOUTONS. Il était en panneau de trois
   chiffres au-dessus du pli — des badges de logiciel, trois promesses
   simultanées avant qu'on ait compris l'offre. Une phrase, après
   l'action : on la lit quand on a une raison de la lire. */
.affiche__tarif {
  margin-top: 1.5rem; padding-top: 1.1rem;
  border-top: 1px solid var(--trait);
  max-width: 62ch; font-size: var(--t-petit); color: var(--encre-douce);
}

/* ---------- 7. Le constat -------------------------------------------------
   DES LIGNES DE TABLEAU, PAS UNE DOUBLE PAGE. Chaque ligne est une
   phrase entendue et sa conséquence : deux colonnes, un filet d'un
   pixel, rien d'autre. C'est une démonstration, pas un article. */

.constats { border-top: 1px solid var(--trait); }
.constat {
  border-bottom: 1px solid var(--trait);
  padding: 0.95rem 0;
  display: grid; gap: 0.25rem;
}
@media (min-width: 800px) {
  .constat {
    grid-template-columns: minmax(0, 27ch) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 4vw, 4rem); align-items: baseline;
  }
}
.constat__quoi { font-weight: 500; }
.constat__detail { color: var(--encre-douce); }

/* ---------- 8. Les cinq exemples ------------------------------------------
   LE MOMENT CENTRAL DE LA PAGE. Cinq captures de largeur égale, dans
   cinq cadres bordés, chacune coiffée d'une bande de LA COULEUR DE SON
   THÈME. C'est là que se voit ce que la page affirme : le site s'adapte
   à l'association, et pas l'inverse. */

/* CINQ PLANCHES, ET LA GRILLE LE DIT. À trois, `auto-fit` donnait trois
   colonnes sur grand écran ; à cinq il en donnerait cinq, larges de
   deux cent quarante pixels — des vignettes, plus des exemples. On fixe
   donc trois colonnes au-delà de 1000 px : deux rangées, trois puis
   deux, et chaque planche reste lisible. */
.planches {
  display: grid; gap: clamp(1.1rem, 2.2vw, 1.8rem);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
@media (min-width: 1000px) {
  .planches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.planche {
  display: flex; flex-direction: column;
  border: 1px solid var(--trait); border-radius: var(--rayon);
  overflow: hidden; background: var(--fond);
}
/* LA BANDE DE COULEUR DU THÈME. Quatre pixels, en tête de chaque
   planche : c'est ce qui fait voir, sans lire une ligne, que les cinq
   sites ne partagent pas une direction artistique. Les cinq valeurs
   sont celles des cinq thèmes, recopiées à l'identique de leurs jetons
   — et c'est la SEULE couleur de cette page qui ne soit pas le bleu. */
.planche::before { content: ""; display: block; height: 4px; background: var(--planche-teinte, var(--trait-fort)); }
.planche--club       { --planche-teinte: #0B3B8C; }
.planche--plateau    { --planche-teinte: #E9C24A; }
.planche--permanence { --planche-teinte: #0E5A4B; }
.planche--cimaise    { --planche-teinte: #C2005E; }
.planche--tribune    { --planche-teinte: #0B7A3B; }

.planche__vue { background: var(--fond-bande); border-bottom: 1px solid var(--trait); }
.planche__vue img { width: 100%; aspect-ratio: 760 / 523; object-fit: cover; object-position: top center; }
.planche__texte { padding: 0.9rem 1.05rem 1.15rem; display: grid; gap: 0.28rem; }
.planche__nom { font-size: var(--t-h3); font-weight: 500; }
.planche__quoi { font-size: var(--t-petit); color: var(--encre-douce); line-height: 1.5; }

/* QUATRE VUES DE DÉTAIL, EN DEUX COLONNES. Elles étaient cinq sur trois
   colonnes, soit quatre cents pixels chacune : une page entière réduite à
   cette taille ne se lit plus, et une capture illisible ne prouve rien.
   Deux colonnes leur en donnent six cents, où l'on distingue un créneau
   d'un tarif — et quatre remplissent la grille sans trou. */
.bande {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  display: grid; gap: clamp(0.9rem, 1.8vw, 1.4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
@media (min-width: 900px) {
  .bande { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.bande figure { display: flex; flex-direction: column; gap: 0.5rem; }
.bande img { width: 100%; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--fond-bande); }
.bande figcaption { font-size: var(--t-mention); color: var(--encre-douce); }

/* ---------- 9. Les rubriques ----------------------------------------------
   UNE LISTE À DEUX COLONNES, PAS HUIT CARTES. Huit cartes bordées pour
   huit mots feraient une grille de fonctionnalités de logiciel ; huit
   lignes sur des filets font un sommaire, et c'est ce que c'est. */

.rubriques {
  display: grid; gap: 0;
  border-top: 1px solid var(--trait);
}
@media (min-width: 780px) {
  .rubriques { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4.5rem); }
  /* La bordure haute de la seconde colonne est celle de la grille : sans
     cette règle, la première ligne de droite en porterait deux. */
  .rubriques > li:nth-child(-n+2) { border-top: 0; }
}
.rubriques > li {
  padding: 0.85rem 0; border-bottom: 1px solid var(--trait);
  font-size: var(--t-petit); color: var(--encre-douce);
}
@media (min-width: 780px) { .rubriques > li { border-top: 1px solid var(--trait); border-bottom: 0; } }
.rubriques strong {
  display: block; font-weight: 500; font-size: 1rem;
  color: var(--encre); margin-bottom: 0.2em;
}

/* ---------- 10. Les écrans de l'administration --------------------------- */

.ecran { display: grid; gap: clamp(1.2rem, 2.6vw, 2.4rem); align-items: center; }
.ecran + .ecran {
  margin-top: clamp(2rem, 4vw, 3.4rem);
  padding-top: clamp(2rem, 4vw, 3.4rem);
  border-top: 1px solid var(--trait);
}
@media (min-width: 900px) {
  .ecran { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .ecran:nth-child(even) .ecran__vue { order: 2; }
}
.ecran__vue { border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; background: var(--fond-bande); }
.ecran__vue img { width: 100%; aspect-ratio: 760 / 523; object-fit: cover; object-position: top center; }
.ecran__titre { font-size: var(--t-h3); font-weight: 500; }
.ecran__texte { margin-top: 0.6rem; color: var(--encre-douce); }

/* ---------- 11. Les trois façons de s'y prendre ---------------------------
   TROIS COLONNES ÉGALES, ET LA NÔTRE N'EST PAS PLUS GROSSE. Elle est
   marquée d'un filet bleu en tête et de rien d'autre : une colonne deux
   fois plus large ou coiffée d'un « recommandé » ferait un comparatif de
   logiciel, où l'on sait avant de lire quelle réponse on doit choisir.
   Ici les trois se lisent, et c'est la liste qui décide. */

.voies {
  display: grid; gap: clamp(1rem, 2.2vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.voie {
  padding: 1.3rem 1.35rem;
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--fond);
  display: flex; flex-direction: column;
}
.voie--nous { border-color: var(--bleu); }
.voie__titre { font-size: var(--t-h3); font-weight: 500; }
.voie__sous { margin-top: 0.3rem; font-size: var(--t-petit); color: var(--encre-douce); }
.voie__liste {
  margin-top: 1.1rem; display: grid; gap: 0.5em;
  font-size: var(--t-petit);
}
.voie__liste li { position: relative; padding-left: 1.15em; }
.voie__liste li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 1px; background: var(--trait-fort);
}
.voie--nous .voie__liste li::before { background: var(--bleu); height: 2px; }
.voie__cout {
  margin-top: auto; padding-top: 1.1rem;
  font-size: var(--t-petit); color: var(--encre-douce);
}

/* ---------- 12. Le prix ---------------------------------------------------
   EN CADRES, ET SANS ASTÉRISQUE. Une trésorière cherche le prix avant
   tout le reste ; le cacher lui fait fermer l'onglet. */

/* DEUX POSTES, ET LA GRILLE LE DIT. Il y en avait trois, dont un « 0 €
   pour partir » : un zéro en corps 2,6 rem à côté du prix réel, qui
   attirait l'œil sur ce qu'on ne paie pas. Ce qu'il disait tient en une
   phrase sous le tableau, et le prix redevient lisible d'un regard. */
.prix { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.prix__poste {
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--trait); border-radius: var(--rayon);
  display: flex; flex-direction: column; gap: 0.35rem;
}
.prix__poste--phare { border-color: var(--bleu); background: var(--bleu-pale); }
/* LA LISTE DE CE QUI EST COMPRIS. À 990 €, « la reprise de vos textes et
   deux tours de corrections » ne suffit pas : une trésorière qui doit
   faire voter la dépense a besoin d'une liste qu'elle puisse recopier
   dans son ordre du jour. Chaque ligne est une chose faite, jamais une
   qualité revendiquée. */
.prix__liste {
  margin-top: 0.6rem; display: grid; gap: 0.42em;
  font-size: var(--t-petit); color: var(--encre-douce);
}
.prix__liste li { position: relative; padding-left: 1.15em; }
.prix__liste li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 2px; background: var(--bleu);
}
.prix__poste--phare .prix__liste li::before { background: var(--bleu); }

.prix__valeur {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 800;
  line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums;
}
/* LE « HT » DES CHIFFRES. Il doit se lire sans peser : à la graisse et à
   la taille du nombre, il en volerait la moitié. Un cran plus petit, une
   graisse ordinaire, l'encre douce — il informe, il ne compte pas. */
.valeur__ht {
  font-size: 0.42em; font-weight: 500; letter-spacing: 0.04em;
  color: var(--encre-douce); vertical-align: 0.28em;
}
.prix__poste--phare .valeur__ht { color: var(--bleu); }

.prix__quoi { font-weight: 500; }
.prix__detail { color: var(--encre-douce); font-size: var(--t-petit); }

/* L'APARTÉ. Un bloc de texte à part, dans la colonne de la demande :
   c'est ce qui répond à « qui est au bout » sans en faire une section
   entière. Il n'a ni fond, ni cadre — un filet et un retrait suffisent à
   dire qu'on change de voix. */
.aparte {
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
  padding-left: clamp(0.9rem, 2vw, 1.4rem);
  border-left: 2px solid var(--bleu);
  display: grid; gap: 0.8em;
  max-width: 58ch;
  font-size: var(--t-petit);
}
.aparte__titre {
  font-weight: 600; font-size: var(--t-mention);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--encre-douce);
}
/* Sur la bande sombre, où il vit : le filet et le titre reprennent les
   deux clairs du thème, sans quoi ils tomberaient sous le seuil. */
.partie--encre .aparte { border-left-color: var(--clair-doux); }
.partie--encre .aparte,
.partie--encre .aparte__titre { color: var(--clair-doux); }
.partie--encre .aparte p:not(.aparte__titre) { color: var(--clair-doux); }

/* ---------- 13. La méthode ------------------------------------------------ */

.etapes { counter-reset: etape; display: grid; gap: 10px; }
.etape {
  counter-increment: etape;
  padding: 0.95rem 1.2rem 1rem 3.4rem;
  border: 1px solid var(--trait); border-radius: var(--rayon);
  position: relative;
}
.etape::before {
  content: counter(etape);
  position: absolute; left: 1.2rem; top: 1rem;
  font-family: var(--mono); font-size: var(--t-petit); color: var(--bleu);
}
.etape__titre { font-weight: 500; }
.etape__texte { margin-top: 0.3rem; color: var(--encre-douce); }
.etape__delai { display: block; margin-top: 0.4rem; font-family: var(--mono); font-size: var(--t-mention); color: var(--encre-douce); }

/* ---------- 14. Les questions --------------------------------------------- */

.faq { max-width: var(--lecture); border-top: 1px solid var(--trait); }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1em;
  padding: 1em 0; min-height: 44px; font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 12px; height: 12px;
  background:
    linear-gradient(var(--bleu), var(--bleu)) center / 100% 2px no-repeat,
    linear-gradient(var(--bleu), var(--bleu)) center / 2px 100% no-repeat;
}
.faq details[open] summary::after {
  background: linear-gradient(var(--bleu), var(--bleu)) center / 100% 2px no-repeat;
}
.faq__reponse { padding-bottom: 1.1em; color: var(--encre-douce); }

/* ---------- 15. Le formulaire --------------------------------------------- */

.demande { max-width: 44rem; }
.champs { display: grid; gap: 1rem; }
@media (min-width: 700px) { .champs { grid-template-columns: 1fr 1fr; } }
.champ { display: grid; gap: 0.3rem; }
.champ--plein { grid-column: 1 / -1; }
.champ > label { font-weight: 500; font-size: var(--t-petit); }
.champ__note { font-weight: 400; color: var(--clair-doux); }

.controle {
  width: 100%; min-height: 44px; padding: 0.55em 0.7em;
  background: var(--fond); color: var(--encre);
  border: 1px solid var(--trait-champ); border-radius: var(--rayon);
  font-size: var(--t-corps);
}
textarea.controle { min-height: auto; resize: vertical; }
.controle:focus-visible { outline: 3px solid var(--bleu); outline-offset: 0; border-color: var(--bleu); }
.champ[data-invalide] > .controle { border-color: var(--alerte); border-width: 2px; }

.champ--case { grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: start; gap: 0.65rem; }
.champ--case input { width: 24px; height: 24px; margin-top: 1px; accent-color: var(--bleu); }
.champ--case label { font-weight: 400; font-size: var(--t-petit); color: var(--clair-doux); }

.appat { position: absolute; left: -9999px; }

/* L'ERREUR SUR FOND SOMBRE. Le rouge d'alerte du clair — 5,9:1 sur
   blanc — tombe à 2,1:1 sur l'encre : il faut sa version claire, et une
   bordure qui se voie. */
.erreur {
  margin-top: 1rem; padding: 0.75em 0.95em;
  border: 1px solid #E5675E; border-radius: var(--rayon);
  color: #FFC9C4; background: rgba(179, 38, 30, 0.16);
  font-size: var(--t-petit);
}
.merci {
  border: 1px solid var(--vert); border-radius: var(--rayon);
  padding: 1.2em 1.3em; background: var(--fond); color: var(--encre);
}
.merci__titre { font-size: var(--t-h3); font-weight: 500; }
.merci p { color: var(--encre-douce); }
/* Un bloc qui change de fond reprend TOUTES les couleurs de son fond,
   pas seulement la sienne : sans cette règle, « .partie--encre a »
   peignait le lien de secours en blanc sur blanc. */
.partie--encre .merci a { color: var(--encre); }

.envoi { margin-top: 1.3rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

/* ---------- 16. Le pied --------------------------------------------------- */

.pied {
  border-top: 1px solid var(--trait);
  padding: clamp(2rem, 4vw, 3rem) var(--gouttiere);
  font-size: var(--t-petit);
}
.pied__dedans {
  max-width: var(--large); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 1rem 2.4rem; align-items: baseline;
}
.pied__liens { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-left: auto; }
.pied a { text-decoration: none; color: var(--encre-douce); }
.pied a:hover { color: var(--bleu); }
.pied__mention { color: var(--encre-douce); }

/* ---------- 17. Les pages secondaires ------------------------------------- */

.page { max-width: var(--lecture); margin: 0 auto; padding: var(--partie-y) var(--gouttiere); }
.page__surtitre { font-family: var(--mono); font-size: var(--t-mention); color: var(--bleu); margin-bottom: 0.9rem; }
.page h1 { font-size: var(--t-h2); font-weight: 500; line-height: 1.15; letter-spacing: -0.022em; }
.page h2 { font-size: var(--t-h3); font-weight: 500; margin-top: 2.2em; }
.page h3 { font-size: var(--t-corps); font-weight: 500; margin-top: 1.6em; }
.page p, .page li { margin-top: 0.8em; color: var(--encre-douce); }
.page ul { margin-top: 0.8em; }
.page li { padding-left: 1.1em; position: relative; }
.page li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: var(--bleu); }
.page a { color: var(--bleu); text-decoration: underline; text-underline-offset: 2px; }
.page__retour { display: inline-block; margin-top: 2.4em; }

/* ---------- 18. Impression ------------------------------------------------
   Une trésorière imprime la page pour la porter au bureau. */

@media print {
  .entete, .burger, .menu, .affiche__actions, .envoi, form { display: none !important; }
  .partie { border-top: 1pt solid #000; padding: 12pt 0; }
  .partie--encre { background: #fff; color: #000; }
  .partie--encre .partie__chapo, .partie--encre .aparte { color: #333; }
  .voie, .prix__poste { border-color: #000; break-inside: avoid; }
  .planche, .ecran { break-inside: avoid; }
  details { open: true; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { text-decoration: underline; }
}