/*
 * La page d'accueil, et elle seule.
 *
 * Volontairement independante de css/smm.css : celle-ci fait 51 ko, sert 138
 * pages, et toute retouche y porterait un risque de regression ailleurs. Ici
 * on repart de zero pour une seule page.
 *
 * L'identite ne change pas : le degrade indigo -> violet a 40 degres est la
 * signature du produit, il est dans l'application, dans l'icone, dans les
 * bandeaux. Ce qui change est la structure, la taille des choses, et le fait
 * que tout soit visible en arrivant.
 */

:root {
  --indigo:   #645AD2;
  --violet:   #B602FF;
  --fond:     #100C16;
  --surface:  #1A1422;
  --surface2: #221A2C;
  --bord:     #2E2639;
  --encre:    #F1EBF6;
  --doux:     #A79BB4;
  --accent:   #C77BFF;
  --degrade:  linear-gradient(140deg, #645AD2 0%, #B602FF 100%);
  --large:    1140px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.dedans { width: 100%; max-width: var(--large); margin: 0 auto; padding: 0 24px; }

a { color: var(--accent); }

/* ------------------------------------------------------------- l'en-tete */

.tete {
  position: sticky; top: 0; z-index: 20;
  background: rgba(16, 12, 22, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bord);
}
.tete .dedans { display: flex; align-items: center; gap: 16px; height: 74px; }
.marque { display: flex; align-items: center; gap: 11px; text-decoration: none;
          color: var(--encre); min-height: 44px; }
/* Le nuage est LARGE (ratio 1,48) : il se pose par sa HAUTEUR, largeur
   automatique. L'ancien fichier etait un carre de 1254 px dont le dessin
   n'occupait que 1094 x 738 -- pose en 32 x 32, un tiers de la surface etait
   du vide, ce qui explique qu'il paraissait minuscule. Le fichier livre est
   recadre au dessin. */
.marque img { height: 40px; width: auto; }
.marque span { font-size: 21px; font-weight: 700; letter-spacing: -.4px; }
.tete nav { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* La langue se PROPOSE. L'ancienne page redirigeait d'autorite selon le
   navigateur, ce qui empeche un francophone a l'etranger de lire le francais. */
.langue {
  min-height: 44px; min-width: 44px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 10px;
  color: var(--doux); text-decoration: none; font-size: 14px; font-weight: 600;
  border: 1px solid var(--bord);
}
.langue:hover { color: var(--encre); border-color: var(--accent); }
.tete nav .court { display: none; }

/* Les tarifs se cherchent depuis n'importe quelle page, pas seulement depuis
   le bas de l'accueil. Un lien de texte, pas un bouton : l'en-tete n'a de
   place que pour une seule action mise en avant. */
.tete nav .lien-tete {
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 10px;
  border-radius: 10px; text-decoration: none; font-size: 15px; font-weight: 500;
  color: var(--doux);
}
.tete nav .lien-tete:hover { color: var(--encre); }

/* Les boutons font au moins 44 px de haut : en dessous, on vise mal au doigt.
   L'ancienne page proposait « inscrire » en 52 x 19. */
.bouton, .bouton-clair, .bouton-fantome {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 22px; border-radius: 12px;
  font-family: inherit; font-size: 16px; font-weight: 600;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}
.bouton { background: var(--degrade); color: #fff; }
.bouton:hover { filter: brightness(1.09); transform: translateY(-1px); }
.bouton-clair { background: #fff; color: #2B0B3F; }
.bouton-clair:hover { filter: brightness(.94); }
.bouton-fantome { background: transparent; color: var(--encre); border-color: var(--bord); }
.bouton-fantome:hover { border-color: var(--accent); color: var(--accent); }
.bouton.petit, .bouton-fantome.petit { min-height: 44px; padding: 0 16px; font-size: 15px; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

/* --------------------------------------------------------------- le heros */

.heros { position: relative; overflow: hidden; padding: 74px 0 84px; }
.heros::before {
  content: ''; position: absolute; inset: -30% -20% auto -20%; height: 620px;
  background: radial-gradient(60% 60% at 30% 20%, rgba(100,90,210,.42), transparent 70%),
              radial-gradient(50% 60% at 78% 10%, rgba(182,2,255,.34), transparent 70%);
  pointer-events: none;
}
.heros .dedans { position: relative; display: grid; grid-template-columns: 1.05fr .95fr;
                 gap: 56px; align-items: center; }
.heros h1 {
  margin: 0 0 18px; font-size: clamp(38px, 5vw, 58px); line-height: 1.05;
  font-weight: 700; letter-spacing: -1.6px; text-wrap: balance;
}
.heros h1 em { font-style: normal; background: var(--degrade);
               -webkit-background-clip: text; background-clip: text; color: transparent; }
.heros p.chapo { margin: 0 0 12px; font-size: 20px; color: var(--doux); max-width: 46ch; }
.heros .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.heros .apres { margin-top: 16px; font-size: 15px; color: var(--doux); }

.telephone {
  /* height:auto est OBLIGATOIRE : les attributs width/height de la balise
     reservent la place avant le chargement, mais sans cela le navigateur les
     applique aussi comme dimensions et l'image se deforme. */
  width: 100%; height: auto; max-width: 320px; margin: 0 auto; display: block;
  border-radius: 26px; border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
}

/* ------------------------------------------------------------- les blocs */

section { padding: 76px 0; border-top: 1px solid var(--bord); }
section h2 {
  margin: 0 0 12px; font-size: clamp(27px, 3.2vw, 36px); line-height: 1.15;
  font-weight: 700; letter-spacing: -.9px; text-wrap: balance;
}
section .intro { margin: 0 0 40px; color: var(--doux); font-size: 18px; max-width: 62ch; }

.trois { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.carte {
  background: var(--surface); border: 1px solid var(--bord); border-radius: 18px;
  padding: 26px 24px;
}
.carte h3 { margin: 0 0 8px; font-size: 20px; font-weight: 600; }
.carte p  { margin: 0; color: var(--doux); font-size: 16px; }
.carte .pastille {
  width: 46px; height: 46px; border-radius: 13px; background: var(--degrade);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 16px;
}

/* les etapes : le nom de fichier est en chasse fixe, parce que ce produit
   parle de FICHIERS et que cela doit se voir */
ol.etapes { list-style: none; counter-reset: n; margin: 0; padding: 0;
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
ol.etapes li { counter-increment: n; background: var(--surface);
               border: 1px solid var(--bord); border-radius: 18px; padding: 26px 24px; }
ol.etapes li::before {
  content: counter(n); display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 11px; margin-bottom: 15px;
  background: var(--surface2); border: 1px solid var(--bord);
  font-weight: 700; font-size: 17px; color: var(--accent);
}
ol.etapes h3 { margin: 0 0 8px; font-size: 19px; font-weight: 600; }
ol.etapes p { margin: 0; color: var(--doux); font-size: 16px; }
.fichiers {
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  background: #14101B; border: 1px solid var(--bord);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; color: var(--doux); line-height: 1.8;
  overflow-x: auto; white-space: nowrap;
}

/* ------------------------------------------------------------ sans compte */

.libre { display: grid; grid-template-columns: .95fr 1.05fr; gap: 56px; align-items: center; }
.libre ul { list-style: none; margin: 0; padding: 0; }
.libre li { display: flex; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--bord); }
.libre li:last-child { border-bottom: 0; }
.libre li .ic {
  flex: none; width: 40px; height: 40px; border-radius: 11px;
  background: var(--surface2); border: 1px solid var(--bord);
  display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.libre li b { display: block; font-size: 17px; font-weight: 600; }
.libre li span { color: var(--doux); font-size: 15.5px; }

/* --------------------------------------------------------------- offres */

.offres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.offre {
  background: var(--surface); border: 1px solid var(--bord); border-radius: 18px;
  padding: 26px 22px; display: flex; flex-direction: column; gap: 6px;
}
.offre.mise-en-avant { border-color: var(--accent); background: var(--surface2); }
.offre .nom { font-size: 15px; font-weight: 600; color: var(--doux);
              text-transform: uppercase; letter-spacing: .07em; }
.offre .prix { font-size: 34px; font-weight: 700; letter-spacing: -1px; }
.offre .prix small { font-size: 15px; font-weight: 500; color: var(--doux); letter-spacing: 0; }
.offre .espace { color: var(--doux); font-size: 16px; margin-bottom: 16px; }
.offre .bouton, .offre .bouton-fantome { margin-top: auto; width: 100%; }

/* --------------------------------------------------------------- le pied */

footer.pied { border-top: 1px solid var(--bord); padding: 44px 0 60px; }
footer.pied .dedans { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; }
footer.pied nav { display: flex; flex-wrap: wrap; gap: 22px; margin-left: auto; }
footer.pied a { color: var(--doux); text-decoration: none; font-size: 15px;
                min-height: 44px; display: inline-flex; align-items: center; }
footer.pied a:hover { color: var(--encre); }
footer.pied .copy { color: var(--doux); font-size: 14.5px; }

/* --------------------------------------------------- liens vers les pages */

/* Les pages d'atterrissage sont citees depuis l'accueil, et pas seulement
   depuis le plan du site : un lien depuis une page qui compte vaut bien plus
   qu'une ligne dans un sitemap.xml. */
.lectures { padding: 44px 0; border-top: 1px solid var(--bord); }
.lectures h2 { font-size: 17px; margin: 0 0 12px; color: var(--doux);
               font-weight: 600; letter-spacing: .02em; }
.lectures ul { list-style: none; padding: 0; margin: 0;
               display: flex; flex-wrap: wrap; gap: 8px 26px; }
.lectures a { display: inline-flex; align-items: center; min-height: 44px;
              font-size: 15.5px; }

/* ----------------------------------------------------- pages d'atterrissage */

/* Du texte long : la colonne est bornee a une largeur ou l'oeil suit la
   ligne sans se perdre. Le reste du site est en blocs, ici on LIT. */
.article { padding: 48px 0 84px; }
.article .dedans { max-width: 46em; }
.article h1 {
  font-size: clamp(30px, 4.4vw, 42px); line-height: 1.12; letter-spacing: -1px;
  margin: 0 0 20px; text-wrap: balance;
}
.article h2 {
  font-size: 24px; line-height: 1.24; letter-spacing: -.4px;
  margin: 46px 0 14px; text-wrap: balance;
}
.article p { margin: 0 0 16px; }
.article .chapo { font-size: 18.5px; line-height: 1.6; color: var(--encre); }
.article .chapo + .chapo { color: var(--doux); font-size: 17px; }
.article .actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 8px; }
.article .actions.bas { margin-top: 46px; }
.article .apres { color: var(--doux); font-size: 14.5px; margin: 0 0 8px; }

/* ---------- pages legales : titres de rang 3, listes, liens ----------
 * Ces pages viennent du site de 2024 : leur texte n'a pas ete touche, mais il
 * emploie des balises que le gabarit d'atterrissage ne stylait pas.
 */
.article h3 {
  font-size: 18.5px; line-height: 1.3; margin: 32px 0 10px;
  color: var(--encre); font-weight: 600;
}
.article ul, .article ol { margin: 0 0 18px; padding-left: 22px; }
.article li { margin-bottom: 8px; }
.article a { color: var(--accent); }
.article a:hover { color: var(--encre); }
/* Un bouton n'est pas un lien de texte. `.article a` (0,1,1) l'emportait sur
   `.bouton` (0,1,0) : le texte des boutons pleins des pages d'atterrissage
   virait au violet sur le degrade violet. On rend au bouton sa couleur, au
   repos comme au survol. */
.article a.bouton, .article a.bouton:hover { color: #fff; }
.article a.bouton-clair, .article a.bouton-clair:hover { color: #2B0B3F; }
.article a.bouton-fantome { color: var(--encre); }
.article a.bouton-fantome:hover { color: var(--accent); }
.article b, .article strong { color: var(--encre); font-weight: 600; }
.article .legal, .article .dedans > div { max-width: 100%; }

/* Le renvoi vers l'autre langue, en tete de page. */
.article .langue-autre {
  margin: 0 0 26px; font-size: 14.5px;
}
.article .langue-autre a {
  display: inline-flex; align-items: center; min-height: 40px;
  color: var(--doux); text-decoration: none;
}
.article .langue-autre a:hover { color: var(--accent); text-decoration: underline; }

/* Le texte des pages legales n'a pas de h1 propre : le premier titre est un
   h2. On lui donne la presence d'un titre de page. */
.article > .dedans > h2:first-of-type,
.article h2:first-child {
  font-size: clamp(28px, 4vw, 38px); line-height: 1.12; letter-spacing: -1px;
  margin: 0 0 22px;
}

/* Le tableau de comparaison. Il porte l'essentiel de l'argument sur ces
   pages : il est donc lisible avant d'etre joli, et il defile tout seul
   plutot que de pousser la page de cote. */
.article .tableau { overflow-x: auto; margin: 6px 0 8px; }
.article table {
  width: 100%; border-collapse: collapse; font-size: 15.5px;
  background: var(--surface); border: 1px solid var(--bord); border-radius: 14px;
  overflow: hidden;
}
.article th, .article td {
  text-align: left; padding: 11px 15px; border-bottom: 1px solid var(--bord);
  vertical-align: top;
}
.article th {
  font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--doux); font-weight: 600; white-space: nowrap;
}
.article tr:last-child td { border-bottom: none; }
.article td.quoi { color: var(--doux); }
.article td b { color: var(--encre); }

/* Les etapes numerotees. Le numero encode une SUITE : ces pages decrivent
   des marches a suivre, pas des listes de qualites. */
.article ol.etapes-liste {
  counter-reset: pas; list-style: none; padding: 0; margin: 16px 0 8px;
}
.article ol.etapes-liste li {
  counter-increment: pas; position: relative; padding-left: 52px; margin-bottom: 20px;
}
.article ol.etapes-liste li::before {
  content: counter(pas); position: absolute; left: 0; top: 0;
  width: 34px; height: 34px; border-radius: 11px;
  background: var(--surface2); border: 1px solid var(--bord); color: var(--accent);
  font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.article ol.etapes-liste b { display: block; margin-bottom: 3px; }
.article ol.etapes-liste span { color: var(--doux); }

.article .voisines { margin-top: 54px; padding-top: 26px; border-top: 1px solid var(--bord); }
.article .voisines h2 { font-size: 17px; margin: 0 0 10px; }
.article .voisines ul { list-style: none; padding: 0; margin: 0;
                        display: flex; flex-direction: column; gap: 2px; }
.article .voisines a { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 600px) {
  .article { padding: 32px 0 64px; }
  .article .actions .bouton, .article .actions .bouton-fantome { width: 100%; }
}

/* ------------------------------------------------------------ l'entree */

/* La carte d'inscription et de connexion. Un seul bloc, centre, borne : la
   page n'a qu'une chose a faire faire, elle ne doit rien proposer d'autre. */
/*
 * Les pages d'entree -- connexion, inscription -- portent peu de contenu : le
 * pied de page remontait au milieu de l'ecran. On colle donc le pied en bas,
 * SANS jamais comprimer ce qu'il y a au-dessus.
 *
 * `flex: 1 0 auto` est ce qui garantit le second point : le contenu prend au
 * moins sa hauteur naturelle, et si la carte est plus haute que la fenetre --
 * un telephone couche, une fenetre basse -- la page defile au lieu de couper
 * le formulaire. Un `height: 100vh` aurait fait l'inverse.
 *
 * `dvh` plutot que `vh` : sur mobile, `vh` compte la barre d'adresse meme
 * quand elle est retractee, ce qui fait sauter la mise en page au defilement.
 * `vh` reste en repli pour les navigateurs qui ignorent `dvh`.
 */
body.page-entree { min-height: 100vh; min-height: 100dvh;
                   display: flex; flex-direction: column; }
body.page-entree main.entree { flex: 1 0 auto; }
body.page-entree footer.pied { flex-shrink: 0; }

.entree { padding: 56px 0 80px; }

/* Fenetre basse : on rend au formulaire la place prise par les marges. */
@media (max-height: 720px) {
  .entree { padding: 26px 0 34px; }
  body.page-entree footer.pied { padding: 22px 0 26px; }
  .entree .carte-entree { padding: 30px 28px 26px; }
  .entree .sous { margin-bottom: 24px; }
  .entree .ou { margin: 20px 0; }
}
/* Le centrage se fait DANS le conteneur : .dedans borne deja la largeur du
   site, un flex pose sur .entree ne centrait donc que ce conteneur-la. */
.entree .dedans { display: flex; justify-content: center; }
.entree .carte-entree {
  width: 100%; max-width: 420px; background: var(--surface);
  border: 1px solid var(--bord); border-radius: 18px; padding: 44px 34px 36px;
}
.entree h1 { font-size: 28px; line-height: 1.22; margin: 0 0 10px; letter-spacing: -.5px; }
.entree .sous { color: var(--doux); margin: 0 0 34px; font-size: 15.5px; }

/* Le bouton Google est rendu par Google : on lui laisse sa forme, on ne
   fait que le centrer. Le reste s'aligne dessus. */
.entree .par-google { display: flex; justify-content: center; min-height: 44px; }

.entree .ou {
  display: flex; align-items: center; gap: 12px;
  margin: 28px 0; color: var(--doux); font-size: 13.5px;
}
.entree .ou::before, .entree .ou::after {
  content: ""; flex: 1; height: 1px; background: var(--bord);
}

/* Sur ces pages le bouton est l'objet principal : il porte une hauteur
   propre, la taille par defaut le rendait maigre au milieu de la carte. */
.entree .bouton, .entree .bouton-fantome {
  width: 100%; min-height: 52px; font-size: 16px;
}

.entree .rassure {
  margin: 26px 0 0; color: var(--doux); font-size: 14px; text-align: center;
}
.entree .consentement {
  margin: 26px 0 0; padding-top: 24px; border-top: 1px solid var(--bord);
  color: var(--doux); font-size: 13px; line-height: 1.5;
}
.entree .deja {
  margin: 20px 0 0; text-align: center; font-size: 14.5px; color: var(--doux);
}
.entree .deja a { font-weight: 600; }

/* ---------- les champs de formulaire des pages d'entree ----------
 *
 * Ces regles manquaient : connexion.php ecrivait `.champ`, `.oeil`,
 * `.message-erreur` et `.entree .liens`, et rien ne les stylait. Les champs
 * tombaient donc sur l'apparence par defaut du navigateur -- un rectangle
 * blanc a texte noir -- au milieu d'une carte sombre.
 */
.champ { margin-bottom: 18px; }
.champ label {
  display: block; margin-bottom: 7px;
  font-size: 14px; font-weight: 500; color: var(--doux);
}
.champ input {
  width: 100%; min-height: 50px; padding: 0 14px;
  /* 16 px au moins : en dessous, Safari sur iPhone zoome a la mise au point */
  font-family: inherit; font-size: 16px; color: var(--encre);
  background: var(--surface2); border: 1px solid var(--bord); border-radius: 10px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.champ input::placeholder { color: var(--doux); }
.champ input:hover { border-color: var(--bord); }
.champ input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(199, 123, 255, .22);
}
.champ input:focus-visible { outline: none; }
.champ input:-webkit-autofill,
.champ input:-webkit-autofill:hover,
.champ input:-webkit-autofill:focus {
  /* Chrome repeint les champs remplis automatiquement en bleu pale et remet
     le texte en noir : sur fond sombre, le champ redevenait illisible. */
  -webkit-text-fill-color: var(--encre);
  -webkit-box-shadow: 0 0 0 40px var(--surface2) inset;
  caret-color: var(--encre);
  transition: background-color 9999s ease-in-out 0s;
}

/* Le champ de mot de passe porte un bouton d'affichage a l'interieur. */
.champ.avec-oeil { position: relative; }
.champ.avec-oeil input { padding-right: 52px; }
.champ .oeil {
  position: absolute; right: 1px; bottom: 1px;
  width: 50px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 0 10px 10px 0;
  color: var(--doux); font-size: 17px; line-height: 1; cursor: pointer;
}
.champ .oeil:hover { color: var(--encre); }
.champ .oeil[aria-pressed="true"] { color: var(--accent); }

.message-erreur {
  margin: 0 0 20px; padding: 12px 14px; border-radius: 10px;
  background: rgba(242, 147, 140, .12); border: 1px solid rgba(242, 147, 140, .34);
  color: #F2938C; font-size: 14.5px; line-height: 1.45;
}

/* Les deux liens sous le formulaire : creer un compte, mot de passe oublie. */
.entree .liens {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--bord);
  font-size: 14.5px;
}
.entree .liens a { color: var(--doux); text-decoration: none; }
.entree .liens a:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 420px) {
  .entree .liens { justify-content: center; gap: 8px 18px; }
}

/* Le test anti-robot : l'image, puis le bouton qui en demande une autre. */
.champ .captcha {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.champ .captcha img {
  display: block; max-width: 100%; height: auto;
  border: 1px solid var(--bord); border-radius: 10px; background: var(--surface2);
}
.champ .captcha-autre {
  background: none; border: 0; padding: 0;
  color: var(--doux); font: inherit; font-size: 14px;
  text-decoration: underline; cursor: pointer;
}
.champ .captcha-autre:hover { color: var(--accent); }
.champ textarea {
  width: 100%; min-height: 150px; padding: 12px 14px;
  font-family: inherit; font-size: 16px; line-height: 1.5; color: var(--encre);
  background: var(--surface2); border: 1px solid var(--bord); border-radius: 10px;
  resize: vertical;
}
.champ textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(199, 123, 255, .22);
}

.champ input#placeholder-inputCaptcha, .champ input#inputCaptcha {
  letter-spacing: .22em; text-transform: uppercase; font-weight: 600;
}

/* -------------------------------------------------------- choix de devise */

/* Deux boutons, pas une liste deroulante : il n'y a que deux valeurs, et un
   bouton dit tout de suite ce qu'on obtient en le pressant. */

/* ------------------------------------------------------------ etroitesse */

@media (max-width: 900px) {
  .heros { padding: 48px 0 56px; }
  .heros .dedans, .libre { grid-template-columns: 1fr; gap: 38px; }
  .heros .telephone { max-width: 260px; }
  .trois, ol.etapes { grid-template-columns: 1fr; }
  .offres { grid-template-columns: repeat(2, 1fr); }
  section { padding: 56px 0; }
  /* Rien ne passe a la ligne dans l'en-tete : mesure a 360 px, « Stream My
     Music » tenait sur trois lignes et le bouton sur deux, ce qui donnait une
     barre de 91 px de haut. */
  .tete .dedans { gap: 12px; }
  .marque span, .tete nav a { white-space: nowrap; }

  /* « Se connecter » ne DISPARAIT pas sous 900 px : c'est la seule porte
     d'entree d'une personne qui a deja un compte, et l'en-tete est le seul
     endroit ou elle la cherche. Le bouton perd son cadre et devient un lien,
     ce qui laisse la place au bouton plein a cote. La zone tactile de 44 px
     est conservee. */
  .tete nav .bouton-fantome.petit {
    border-color: transparent; background: transparent; padding: 0 8px;
  }
}
@media (max-width: 520px) {
  .offres { grid-template-columns: 1fr; }
  body { font-size: 16px; }
  /* Le bouton prend son libelle court. Les deux sont dans le HTML : masquer
     du texte est sur, le reecrire en CSS ne l'est pas (lecteurs d'ecran). */
  .tete nav .long { display: none; }
  .tete nav .court { display: inline; }
  .marque span { font-size: 18px; }
  .marque img { height: 34px; }
}
@media (max-width: 400px) {
  /* Sous 400 px le nom ne rentre plus a cote des deux actions. Le logo reste,
     et le titre de la page comme le heros portent le nom juste en dessous.
     Le logo fait 40 px de haut sur ~59 de large : c'est une cible tactile. */
  .marque span { display: none; }
  .marque { min-height: 44px; min-width: 44px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bouton:hover { transform: none; }
}