/* Feuille des cinq pages de contenu — prix-site-internet-artisan, site-couvreur,
   site-plombier, site-menuisier, questions. C'etait `styles.css`, la feuille de
   l'accueil, que ces pages partageaient avec lui ; l'accueil est passe a la palette
   nuit et or le 2026-09-17 et elles sont restees ici, a l'identique au bit pres.
   Les faire suivre en palette est un chantier a part, a decider avec Andrei.
   Elles chargent aussi `assets/contenu.css`, qui ne bouge pas. */
/* Sites 2Cafes - page complete, systeme de la direction P (La pile).
   Une seule idee visuelle par ecran. Pas de grille de cartes pour raconter l'offre. */

:root{
  --bg:#E9EAE4;
  --paper:#FFFFFF;
  --ink:#14150F;
  --soft:#3B3D35;
  --mute:#65675E;
  --rule:#CFD1C9;
  --hair:#DEDFD8;
  --mark:#E1394F;
  /* La colonne suit la largeur de l'ecran au lieu de rester bloquee a 1180 px :
     sur un 2560, la page se reduisait a un ilot perdu entre 690 px de vide de chaque cote. */
  --wrap:min(92vw, 84rem);
  --pad:clamp(1.1rem, 3vw, 2.8rem);
}

*{box-sizing:border-box; margin:0; padding:0}

/* Tout est en rem : faire grandir la racine fait grandir la page entiere.
   16 px jusqu'a 1280, 20 px a partir de 2560. */
html{font-size:clamp(16px, 12px + 0.3125vw, 20px)}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Archivo', system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-width:320px;
}

.mono{font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums}

a{color:inherit}
img{max-width:100%}
button, input, textarea{font:inherit; color:inherit}

:where(a, button, input, textarea, summary, [tabindex]):focus-visible{
  outline:2px solid var(--mark); outline-offset:3px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:20;
  background:var(--ink); color:var(--bg); padding:.8rem 1.1rem; font-weight:600;
}
.skip-link:focus{left:0}

/* La pastille : le 2 d'Archivo vectorise, et un vrai point rond a la couleur de marque.
   Voir design/logo/. Le dessin est en SVG dans la page, il ne coute aucune requete. */
.pastille{width:1.55rem; height:1.55rem; flex:none}

/* Une ancre visee depuis la barre doit s'arreter SOUS elle : sans cette marge, le
   titre de section se range derriere la barre collante et le lecteur croit avoir
   rate sa cible. */
[id]{scroll-margin-top:4rem}

/* --- premier ecran --- */
.hero{
  max-width:var(--wrap); margin-inline:auto; padding:clamp(1.2rem,3vw,2.4rem) var(--pad) clamp(2rem,5vw,3.6rem);
  display:grid; grid-template-columns:minmax(0,43fr) minmax(0,57fr);
  gap:clamp(1.4rem,4vw,3.4rem); align-items:center;
  /* Plafonnee : sinon un 1440 de haut etirait le premier ecran a 1360 px
     pour 700 px de contenu, et la page paraissait vide. */
  min-height:min(calc(100vh - 5rem), 40rem);
}
h1{
  font-weight:800; font-size:clamp(1.85rem,4.2vw,3.6rem); line-height:1.04;
  letter-spacing:-.035em; max-width:13ch; text-wrap:balance;
}
h1 em{font-style:normal; color:var(--mark)}
.hero-say{
  margin-top:clamp(.7rem,1.4vw,1.05rem); font-size:clamp(.94rem,1.1vw,1.02rem);
  color:var(--soft); max-width:38ch;
}

.conditions{margin-top:clamp(1rem,2vw,1.5rem); border-top:1px solid var(--ink)}
.condition{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.42rem 0; border-bottom:1px solid var(--rule); font-size:.9rem;
}
.condition dd{
  font-family:'IBM Plex Mono', monospace; font-variant-numeric:tabular-nums;
  font-weight:500; font-size:1rem; letter-spacing:-.03em; white-space:nowrap;
}
.condition.free dd, .condition.none dd{color:var(--mark)}

.cta{
  display:inline-flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:clamp(.9rem,1.8vw,1.3rem); background:var(--ink); color:var(--bg);
  text-decoration:none; font-weight:700; font-size:.97rem; padding:1rem 1.4rem;
  border:1px solid var(--ink); cursor:pointer;
}
.cta:hover{background:#000}
.cta svg{width:15px; height:15px; flex:none}

/* --- la pile --- */
.stack{position:relative; aspect-ratio:4/3; width:100%; margin-inline:auto}
.card{
  position:absolute; inset:0; margin:auto; width:88%; aspect-ratio:4/3;
  border:0; padding:0; background:var(--paper); border-radius:.35rem; overflow:hidden;
  cursor:pointer;
  box-shadow:0 .1rem .2rem rgba(20,21,15,.1), 0 1.2rem 2.6rem rgba(20,21,15,.18);
  transition:transform .38s cubic-bezier(.22,.7,.3,1), opacity .3s, box-shadow .3s;
}
.card img{display:block; width:100%; height:100%; object-fit:cover; object-position:left top}
.card figcaption{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; justify-content:space-between; align-items:baseline; gap:.6rem;
  padding:.5rem .7rem; background:rgba(255,255,255,.94); border-top:1px solid var(--rule);
  font-size:.76rem; font-weight:600; text-align:left;
}
.card figcaption span{
  font-family:'IBM Plex Mono', monospace; font-weight:400; color:var(--mute);
  font-size:.68rem; letter-spacing:.06em; white-space:nowrap;
}
.card:first-child:hover{box-shadow:0 .1rem .2rem rgba(20,21,15,.12), 0 1.8rem 3.4rem rgba(20,21,15,.24)}
.stack-hint{
  margin-top:.7rem; text-align:center; font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mute);
}

/* --- bandes de contenu --- */
.band{
  max-width:var(--wrap); margin-inline:auto;
  padding:clamp(2.4rem,6vw,4.6rem) var(--pad);
  border-top:1px solid var(--rule);
}
.eyebrow{
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mark);
  margin-bottom:.9rem;
}
h2{
  font-weight:800; font-size:clamp(1.5rem,2.9vw,2.35rem); line-height:1.1;
  letter-spacing:-.03em; max-width:20ch; text-wrap:balance;
}
h3{font-weight:700; font-size:1.02rem; letter-spacing:-.01em}
.lead{margin-top:.9rem; font-size:clamp(.97rem,1.1vw,1.05rem); color:var(--soft); max-width:56ch}

/* A partir du grand format, le titre et son chapeau se repartissent sur deux colonnes.
   Sinon le texte reste tasse a gauche et la moitie droite de l'ecran reste vide. */
@media (min-width:1100px){
  .band:not(.demande){
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(2rem,5vw,5rem); align-items:start;
  }
  .band:not(.demande) > *{grid-column:1 / -1}
  .band:not(.demande) > .eyebrow{grid-column:1; grid-row:1}
  .band:not(.demande) > h2{grid-column:1; grid-row:2}
  .band:not(.demande) > .lead{grid-column:2; grid-row:2; margin-top:.35rem; max-width:46ch}
}

/* --- trois etapes --- */
.step-list{list-style:none; margin-top:clamp(1.4rem,3vw,2.2rem); border-top:1px solid var(--ink)}
.step-list li{
  display:grid; grid-template-columns:3.2rem minmax(0,1fr); gap:1rem;
  padding:clamp(.9rem,1.8vw,1.3rem) 0; border-bottom:1px solid var(--rule); align-items:start;
}
.step-list span{font-size:.8rem; color:var(--mark); padding-top:.15rem}
.step-list p{margin-top:.3rem; color:var(--soft); max-width:60ch; font-size:.95rem}

/* --- six exemples : c'est une galerie, pas une grille qui raconte l'offre --- */
.exemples-list{
  list-style:none; margin-top:clamp(1.4rem,3vw,2.2rem);
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(1.1rem,2.4vw,1.8rem);
}
.exemples-list a{display:block; text-decoration:none; color:inherit}
.exemples-list .vue{display:block; position:relative}
/* Marque posee sur l'image : le chapeau ne suffit pas, on regarde les vignettes. */
.exemples-list .tag{
  position:absolute; z-index:2; top:.55rem; left:.55rem;
  background:var(--ink); color:var(--bg); font-size:.6rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; padding:.28rem .5rem;
}
.exemples-list img{
  display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover;
  object-position:left top; background:var(--paper); border:1px solid var(--rule);
  border-radius:.35rem; transition:transform .25s ease, box-shadow .25s ease;
}
.exemples-list a:hover img, .exemples-list a:focus-visible img{
  transform:translateY(-3px); box-shadow:0 1rem 2rem rgba(20,21,15,.16);
}
.exemples-list .nom{display:block; margin-top:.6rem; font-weight:700; font-size:.95rem; letter-spacing:-.012em}
.exemples-list .nom i{
  font-style:normal; font-weight:400; font-family:'IBM Plex Mono', monospace;
  font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:var(--mute);
  margin-left:.45rem; white-space:nowrap;
}
.exemples-list .parti{display:block; margin-top:.15rem; font-size:.85rem; color:var(--soft)}

/* --- preuves : une image par ecran, en grand --- */
.proof{margin-top:clamp(1.4rem,3vw,2.4rem)}
.proof img{
  display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  object-position:left top; background:var(--paper); border:1px solid var(--rule);
  border-radius:.35rem;
}
.proof figcaption{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem .8rem;
  margin-top:.6rem; font-size:.88rem; font-weight:700;
}
.proof figcaption span{
  font-family:'IBM Plex Mono', monospace; font-weight:400; font-size:.74rem;
  letter-spacing:.07em; color:var(--mute); text-transform:uppercase;
}

/* --- lignes descriptives (60 euros) --- */
.rows{margin-top:clamp(1.4rem,3vw,2.2rem); border-top:1px solid var(--ink)}
.row{
  display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:.4rem 2rem;
  padding:clamp(.75rem,1.5vw,1.05rem) 0; border-bottom:1px solid var(--rule); align-items:baseline;
}
.row dt{font-weight:700; font-size:1rem; letter-spacing:-.012em}
.row dd{color:var(--soft); font-size:.95rem}

/* --- propriete et sortie : la seule bande sombre --- */
.exit{
  background:var(--ink); color:var(--bg); max-width:none; border-top:0;
  padding-inline:max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad)));
}
.exit .eyebrow{color:#F0A7B1}
.exit .lead{color:#C9CBC2}

/* --- perimetre --- */
.scope-cols{
  margin-top:clamp(1.4rem,3vw,2.2rem);
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(1.4rem,3.5vw,3rem);
}
.scope-label{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute);
  padding-bottom:.5rem; border-bottom:1px solid var(--ink);
}
.scope-cols ul{list-style:none}
.scope-cols li{
  padding:.5rem 0 .5rem 1.4rem; border-bottom:1px solid var(--rule);
  font-size:.94rem; position:relative;
}
.scope-cols li::before{position:absolute; left:0; top:.5rem; font-family:'IBM Plex Mono',monospace}
.in li::before{content:"+"; color:var(--mark)}
.out li::before{content:"—"; color:var(--mute)}

/* --- FAQ --- */
.faq-list{margin-top:clamp(1.4rem,3vw,2.2rem); border-top:1px solid var(--ink)}
.faq-list details{border-bottom:1px solid var(--rule)}
.faq-list summary{
  cursor:pointer; list-style:none; padding:clamp(.8rem,1.6vw,1.05rem) 2.2rem clamp(.8rem,1.6vw,1.05rem) 0;
  font-weight:700; font-size:1rem; letter-spacing:-.012em; position:relative;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"+"; position:absolute; right:.2rem; top:50%; transform:translateY(-50%);
  font-family:'IBM Plex Mono', monospace; font-size:1.15rem; color:var(--mark);
}
.faq-list details[open] summary::after{content:"–"}
.faq-list p{padding:0 0 1.1rem; color:var(--soft); max-width:62ch; font-size:.95rem}

/* --- formulaire --- */
.demande{
  display:grid; grid-template-columns:minmax(0,40fr) minmax(0,60fr);
  gap:clamp(1.6rem,4vw,3.4rem); align-items:start;
}
.signature{margin-top:1rem; font-size:.88rem; color:var(--mute)}
.form{display:flex; flex-direction:column; gap:.85rem}
.pair{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.85rem}
.form label{display:flex; flex-direction:column; gap:.35rem}
.form label > span{font-size:.78rem; letter-spacing:.05em; color:var(--mute); font-weight:600}
.form input, .form textarea{
  background:var(--paper); border:1px solid var(--rule); border-radius:0;
  padding:.8rem .9rem; width:100%;
  /* Jamais sous 16 px : en dessous, Safari iOS zoome au focus et sort la page du cadre.
     max() preserve la taille voulue sur grand ecran, ou la racine monte a 20 px. */
  font-size:max(16px, .97rem);
}
.form input:focus, .form textarea:focus{border-color:var(--ink); outline-offset:1px}
.form textarea{resize:vertical; min-height:7rem}
.form .invalid{border-color:var(--mark)}
.submit{margin-top:.4rem; justify-content:center}
.form-note{font-size:.82rem; color:var(--mute)}
.form-status{font-size:.9rem; font-weight:600}
.form-status.err{color:var(--mark)}
.rgpd{
  margin-top:.4rem; padding-top:.9rem; border-top:1px solid var(--rule);
  font-size:.78rem; line-height:1.55; color:var(--mute);
}
.pot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* Ecran de confirmation, en remplacement du formulaire. */
.sent{
  background:var(--paper); border:1px solid var(--ink); padding:clamp(1.2rem,2.6vw,2rem);
  display:flex; flex-direction:column; gap:.7rem; align-items:flex-start;
}
.sent .eyebrow{margin-bottom:0}
.sent h3{font-size:clamp(1.1rem,1.8vw,1.4rem); letter-spacing:-.02em; max-width:26ch}
.sent p{color:var(--soft); font-size:.95rem; max-width:46ch}
.again{
  background:transparent; color:var(--ink); border:1px solid var(--ink);
  padding:.7rem 1.1rem; font-weight:600; font-size:.9rem; cursor:pointer; margin-top:.3rem;
}

/* --- pied --- */
.footer{
  max-width:var(--wrap); margin-inline:auto; padding:clamp(1.8rem,4vw,3rem) var(--pad) clamp(1.6rem,3vw,2.4rem);
  border-top:1px solid var(--ink);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem 2rem;
}
.footer .brand{display:inline-flex; align-items:center; gap:.55rem;
  font-weight:800; letter-spacing:-.02em}
.footer .pastille{width:1.7rem; height:1.7rem}
.footer .slogan{color:var(--mute); font-size:.9rem; flex:1 1 18rem}
.footer nav{display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; font-size:.85rem}
.footer nav a{
  color:var(--soft);
  /* 44 px dans les deux sens, seuil des recommandations Apple : les liens ne
     faisaient que 20 px de haut. La largeur a ete ajoutee le 2026-09-05, quand le
     pied a repris les libelles courts de la barre : « Le prix » n'en mesurait
     que 40. */
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px;
}

/* --- barre de navigation ---
   Demandee par Andrei le 2026-09-05, parti pris A (voir design/barre-nav.md).
   Elle vit DANS LE FLUX, posee apres le premier ecran sur la landing et apres le
   fil d'Ariane sur les pages de fond, et colle en haut une fois atteinte.

   Pourquoi pas une barre fixe revelee au defilement, qui etait la demande la plus
   litterale : une barre fixe se place en tete du document et y reste dans l'ordre
   de tabulation. Un lecteur au clavier qui descend la page l'a donc depassee avant
   qu'elle n'apparaisse, et ne la retrouve qu'en remontant tout en arriere — ses
   liens lui sont hors d'atteinte. Ici la barre est a sa place dans le document,
   l'ordre du clavier suit l'ordre de l'ecran sans un octet de JavaScript.

   Elle a d'abord ete posee APRES le premier ecran, pour ne pas lui reprendre un
   pixel : le bouton s'arrete a 637 px pour 659 reellement visibles sur un
   iPhone 13 (chantier nº 3 d'AGENTS.md). Andrei a refuse ce placement le
   2026-09-05 — « le menu doit etre en haut des l'arrivee sur la page ».

   Ce qui rend la chose tenable : elle ne s'ajoute pas a la barre de titre, elle
   la REMPLACE. L'ancienne `.topbar` occupait deja 38 px sur un iPhone 13, celle-ci
   en prend 48 : la fusion ne coute que dix pixels, la ou une seconde barre en
   aurait coute quarante-huit. Ne pas reintroduire de `.topbar` au-dessus. */
.barre{
  position:sticky; top:0; z-index:15;
  background:var(--bg);
  border-bottom:1px solid var(--ink);
}
.barre-in{
  max-width:var(--wrap); margin-inline:auto; padding:0 var(--pad);
  display:flex; align-items:center; gap:clamp(.5rem,1.6vw,1.4rem); min-height:3rem;
}
/* Les 44 px de cible tactile sont portes par les liens, pas par la barre : elle se
   contente de les contenir, et reste a 48 px de haut. */
.barre-marque{
  flex:none; display:inline-flex; align-items:center; gap:.5rem;
  min-height:44px; min-width:44px; text-decoration:none;
  font-weight:800; font-size:.92rem; letter-spacing:-.02em; color:var(--ink);
}
.barre-marque .pastille{width:1.4rem; height:1.4rem}
/* Le `nav` porte le repoussoir et la capacite a retrecir ; la liste porte le
   defilement. Les deux sur le meme element et la bande refusait de se comprimer. */
.barre-nav{margin-inline-start:auto; min-width:0; display:flex}
.barre-liens{
  list-style:none; display:flex; align-items:center;
  gap:clamp(.35rem,1.2vw,1.25rem); min-width:0;
  /* La bande defile lateralement plutot que de replier la barre sur deux lignes :
     une barre qui double de hauteur n'est plus une barre. */
  overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
}
.barre-liens::-webkit-scrollbar{display:none}
.barre-liens a{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px; padding-inline:.25rem;
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:.67rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--mute); text-decoration:none; white-space:nowrap;
}
.barre-liens a:hover{color:var(--ink)}
/* La page ouverte se marque au trait autant qu'a la couleur : la couleur seule ne
   se voit pas d'un daltonien, et le trait tient sur un ecran mal calibre. */
.barre-liens a[aria-current="page"]{color:var(--ink); box-shadow:inset 0 -2px var(--mark)}
/* « Pilote — 10 places » vivait dans la barre de titre : il la suit ici. Il
   disparait des que la barre se serre, les liens et l'appel a l'action passant
   avant lui. */
.places{
  flex:none; white-space:nowrap;
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:.67rem; letter-spacing:.13em; text-transform:uppercase; color:var(--mute);
  /* Meme casse et meme graisse que les liens : sans filet, « Pilote — 10 places »
     se lisait comme un sixieme element du menu. Le trait le range du cote de
     l'appel a l'action, ou il appartient. */
  display:inline-flex; align-items:center; min-height:1.7rem;
  border-left:1px solid var(--rule);
  margin-inline-start:clamp(.3rem,1vw,.7rem);
  padding-inline-start:clamp(.7rem,1.6vw,1.2rem);
}
.barre-cta{
  flex:none; display:inline-flex; align-items:center; min-height:44px;
  padding:0 .9rem; background:var(--ink); color:var(--bg);
  text-decoration:none; font-weight:700; font-size:.8rem; letter-spacing:-.01em;
}
.barre-cta:hover{background:#000}
.barre-court{display:none}

/* --- telephone --- */

/* --- renvois vers les pages de contenu ---
   Ces liens en ligne precedent la barre de navigation et lui survivent : la barre
   dit qu'une page existe, le renvoi dit a quel moment de la lecture elle sert.
   Andrei a demande la barre le 2026-09-05 ; le commentaire qui tenait ici — « une
   landing d'une page n'a pas de menu, et n'en veut pas » — etait une decision
   d'agent, pas la sienne. */
.aussi{
  margin-top:clamp(1.2rem,2.5vw,1.8rem);
  display:flex; flex-wrap:wrap; gap:.2rem 1.4rem;
  font-size:.88rem;
}
.aussi a{
  color:var(--soft); text-underline-offset:.22em; text-decoration-thickness:1px;
  display:inline-flex; align-items:center; min-height:44px;
}
.aussi a:hover{color:var(--ink)}
.exit .aussi a{color:#C9CBC2}
.exit .aussi a:hover{color:var(--bg)}

/* A six entrees, le compteur ne tient plus a cote des liens et du bouton des que
   la fenetre passe sous 1280 px — c'etait 1100 quand ils n'etaient que cinq. */
@media (max-width:1280px){
  .barre .places{display:none}
}

@media (max-width:900px){
  .hero{
    grid-template-columns:1fr; gap:.85rem; align-items:start;
    min-height:0; padding-top:.7rem;
  }
  /* La signature de la barre de titre repliait celle-ci sur deux lignes en 390,
     cinq en 320, pour une information deja donnee par le pied. */
  /* Les six derniers pixels : Safari iOS n'affiche que 659 px sur un iPhone 13,
     pas 844, et la derniere condition tombait juste en dessous. */
  .conditions{margin-top:.75rem}
  .condition{padding:.36rem 0}
  .hero-stack{order:-1}
  /* Le bouton du premier ecran tombait a 668 px pour 659 reellement visibles sur
     un iPhone 13. La pile est superposee : lui retirer une carte ne gagne aucune
     hauteur, seul son format en gagne. En 16/9, moins l’indice de clic, le bouton
     remonte a 580 px. Mesure sur la production, fenetre 390x659. */
  .stack{aspect-ratio:16/9}
  .stack-hint{display:none}
  h1{font-size:1.85rem; max-width:none}
  /* Le chapeau porte desormais le prix et l'engagement : il ne peut plus etre masque. */
  .hero-say{font-size:.93rem; margin-top:.55rem}
  /* Le format de la carte doit suivre celui de la pile : laissee en 4/3 dans une
     boite 16/9, elle debordait par le haut et couvrait le titre. */
  .card{width:94%; aspect-ratio:16/9}
  .row{grid-template-columns:1fr; gap:.2rem}
  .exemples-list{grid-template-columns:1fr; gap:1.3rem}
  .scope-cols{grid-template-columns:1fr; gap:1.6rem}
  .demande{grid-template-columns:1fr; gap:1.4rem}
  .pair{grid-template-columns:1fr}
  .footer{gap:.5rem 1.2rem}
  /* Le nom s'efface, la pastille reste : elle identifie a elle seule et garde ses
     44 px de cible. Le libelle long de l'appel a l'action ne tient pas a cote des
     cinq liens dans 390 px, et le tronquer serait pire que le raccourcir. */
  .barre-marque b{display:none}
  .barre-long{display:none}
  .barre-court{display:inline}
  .barre-cta{padding:0 .75rem; font-size:.78rem}
  /* 44 px pile : la barre ne fait plus que contenir ses cibles tactiles, sans un
     pixel de rab. Sur un iPhone 13 il ne reste que douze pixels entre le bouton du
     premier ecran et le bas de l'ecran — chacun compte. */
  .barre-in{gap:.5rem; padding-inline:clamp(.7rem,3vw,1.1rem); min-height:44px}
  /* Le dernier lien s'efface au lieu d'etre coupe net : coupe, il passait pour un
     defaut de mise en page ; efface, il annonce qu'il y a une suite. Seulement ici,
     la bande ne debordant pas au-dessus de 900 px — le degrade y mangeait la fin de
     « QUESTIONS » sans raison. */
  .barre-liens{mask-image:linear-gradient(to right, #000 calc(100% - 1.6rem), transparent)}
}