/* =====================================================================
   Patate Leveling — la vitrine (/)

   Cette feuille n'a RIEN à voir avec `style.css`, qui habille le jeu : ce
   dernier verrouille `overflow:hidden` sur le document et occupe l'écran
   entier, ce qu'une page qui défile ne peut pas supporter. Les deux ne
   sont jamais chargées ensemble.

   Toutes les mesures fixes sont calées sur une fenêtre de 1280 px, la
   largeur de rendu de la maquette. (La maquette fournie fait 1055 px de
   large, mais son cadre de contenu en occupe 88,9 % — exactement le
   rapport d'un conteneur de 1140 dans 1280 : c'est une capture réduite,
   et les cotes relevées dessus sont donc multipliées par 1,213.)
   ===================================================================== */

/* La page est sombre, et on le dit au navigateur : sans quoi certains
   téléphones lui appliquent leur propre mode sombre et repeignent ses
   couleurs (cf. le même bloc en tête de style.css). */
:root{color-scheme:dark}
@media (prefers-color-scheme:dark){:root{color-scheme:dark}}

:root{
  --fond:#0d0f1a;
  --fond2:#12141f;
  --carte:#171a29;
  --carte2:#1c1f31;
  --bord:rgba(255,255,255,.08);
  --bord2:rgba(255,255,255,.14);
  --texte:#ffffff;
  --doux:#9aa0b8;
  --jaune:#ffd23f;
  --violet:#8b5cf6;
  --violet2:#6d28d9;
  /* 1186 − 2×24 de gouttière = 1138 px de contenu, très exactement la
     largeur du cadre de la maquette une fois ramenée à 1280. */
  --large:1186px;
  --rayon:16px;
}

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

/* `hidden` doit TOUJOURS gagner. La règle par défaut du navigateur n'est
   qu'un `display:none` ordinaire : n'importe quel `display:flex` posé plus
   loin sur la même classe la neutralise, en silence, et l'élément « caché »
   reste à l'écran. Le piège s'est refermé deux fois ici — le menu mobile,
   puis le bandeau d'invitation, qui s'affichait vide faute de pseudo. */
[hidden]{display:none !important}

html{scroll-behavior:smooth;scroll-padding-top:100px}
body{background:var(--fond);color:var(--texte);
  font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.05;font-weight:900;letter-spacing:-.012em}

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

/* ---------------- Boutons ----------------
   `line-height:1.15` et non l'interligne du corps de texte : à 1.6, un
   bouton d'une seule ligne gagne 8 px de hauteur qui ne servent à rien et
   la barre du haut enfle d'autant. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 19px;border-radius:11px;border:1px solid transparent;
  font-size:14.5px;font-weight:700;line-height:1.15;cursor:pointer;white-space:nowrap;
  transition:transform .15s,background .18s,border-color .18s,box-shadow .18s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btnGrand{padding:17px 27px;font-size:15px;border-radius:12px}

.btnJaune{background:var(--jaune);color:#20180a;
  box-shadow:0 6px 20px rgba(255,210,63,.22)}
.btnJaune:hover{background:#ffdc63;box-shadow:0 10px 26px rgba(255,210,63,.3)}
.btnSombre{background:var(--carte2);color:#fff;border-color:var(--bord2)}
.btnSombre:hover{background:#252943;border-color:rgba(255,255,255,.26)}
.btnNoir{background:#191b2c;color:#fff;border-color:rgba(255,255,255,.18)}
.btnNoir:hover{background:#222540}

/* Le triangle de lecture est dessiné, pas écrit : le caractère « ▶ » change
   de dessin et de chasse d'une police système à l'autre, et décalait le
   texte du bouton d'un poste à l'autre. */
.ico{width:11px;height:13px;fill:currentColor;flex:none}

/* ---------------- Surtitres ----------------
   Un filet et des capitales espacées, pas une gélule arrondie : la pastille
   à coins ronds est le tic visuel des maquettes sorties d'un générateur, et
   elle donnait le même objet à trois endroits qui ne disent pas la même
   chose. Le filet, lui, rattache le surtitre au titre qu'il annonce. */
.surtitre{display:flex;align-items:center;gap:12px;
  font-size:12px;font-weight:800;letter-spacing:.2em;line-height:1.2;
  text-transform:uppercase;color:#868ca6}
.surtitre::before{content:"";flex:none;width:28px;height:3px;border-radius:2px;
  background:var(--jaune)}
/* Sur l'illustration du héros, le gris du surtitre disparaîtrait. */
.surtitreClair{color:#e4e7f2;text-shadow:0 2px 10px rgba(0,0,0,.6)}

/* ---------------- Ruban « à venir » ----------------
   Un adhésif posé de travers sur ce qui n'est pas encore là. Il se lit en
   un coup d'œil et, contrairement à une étiquette rangée dans un coin, on
   ne peut pas le prendre pour une décoration : il RECOUVRE la chose qu'il
   annonce. Les bords légèrement de guingois (`clip-path`) et l'inclinaison
   font le collé-à-la-main ; d'aplomb, ce serait un bandeau d'interface. */
.scotch{position:absolute;left:50%;top:50%;z-index:5;pointer-events:none;
  transform:translate(-50%,-50%) rotate(-7deg);
  padding:10px 30px;white-space:nowrap;
  font-size:14px;font-weight:900;letter-spacing:.26em;text-transform:uppercase;
  color:#2c2208;
  background:
    repeating-linear-gradient(101deg,rgba(255,255,255,.14) 0 2px,transparent 2px 9px),
    linear-gradient(178deg,#ffe07d,#f0bc2c);
  clip-path:polygon(1.5% 4%,100% 0,98.5% 96%,0 100%);
  box-shadow:0 10px 26px rgba(0,0,0,.45)}
.scotchGrand{padding:15px 50px;font-size:21px;letter-spacing:.32em;
  transform:translate(-50%,-50%) rotate(-6deg)}

/* Ce qui est recouvert s'efface : à pleine intensité, le fond continue de
   réclamer le regard et le ruban n'a plus l'air de dire quoi que ce soit. */
.enAttente{position:relative}
.enAttente .galerie{opacity:.42}
.enAttente .reseaux{opacity:.38}

/* ---------------- En-tête ---------------- */
.entete{position:sticky;top:0;z-index:40;
  background:rgba(13,15,26,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--bord)}
.enteteBarre{display:flex;align-items:center;gap:26px;height:90px}
.logo img{width:130px}

.nav{display:flex;gap:30px;margin:0 auto;font-size:14.5px;font-weight:600}
.nav a{color:var(--doux);padding:7px 0;border-bottom:2px solid transparent;
  transition:color .16s,border-color .16s}
.nav a:hover{color:#fff}
.nav a.actif{color:var(--jaune);border-bottom-color:var(--jaune)}

.enteteActions{display:flex;gap:11px;align-items:center}

/* Le visiteur reconnu : son nom, son profil, et de quoi ressortir. « Se
   déconnecter » reste un lien discret et non un bouton — on ne met pas au
   même niveau visuel l'action qu'on souhaite (aller sur son profil) et
   celle qu'on subit. */
.moiBarre{display:flex;align-items:center;gap:13px}
.moiPseudo{font-size:14.5px;font-weight:700;color:#fff;max-width:150px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deco{font-size:13px;color:var(--doux);white-space:nowrap;transition:color .16s}
.deco:hover{color:#fff;text-decoration:underline}

.burger{display:none;flex-direction:column;gap:4px;width:42px;height:38px;
  align-items:center;justify-content:center;cursor:pointer;
  background:var(--carte2);border:1px solid var(--bord2);border-radius:10px}
.burger span{display:block;width:17px;height:2px;background:#fff;border-radius:2px}

.navMobile{display:flex;flex-direction:column;gap:2px;padding:12px 24px 18px;
  border-top:1px solid var(--bord);background:var(--fond)}
/* `display:flex` l'emporte sur la règle par défaut de l'attribut `hidden` :
   sans cette ligne, le panneau replié reste déplié et l'en-tête mesure cinq
   fois sa hauteur. C'est l'état FERMÉ qu'il faut réaffirmer, pas l'ouvert. */
.navMobile[hidden]{display:none}
.navMobile a{padding:11px 2px;color:#cfd4e6;font-weight:600;font-size:15px}
.navMobileActions{display:flex;gap:10px;margin-top:10px}
.navMobileActions .btn{flex:1}

/* ---------------- Héros ----------------
   L'illustration est posée en fond plutôt qu'en <img> : elle doit pouvoir
   se recadrer sur le château (à droite) quand la fenêtre rétrécit, sans
   jamais laisser le titre passer sur le ciel clair. */
.heros{position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;padding:88px 0 58px}
.herosFond{position:absolute;inset:0;z-index:-2;
  background:url("../assets_site_web/fond_hero_patate_leveling.webp") no-repeat right center;
  background-size:cover}
/* Deux voiles : l'un couche le texte sur du sombre, l'autre raccorde le bas
   de l'image au fond de la page pour qu'aucune ligne de coupe n'apparaisse. */
.heros::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,var(--fond) 4%,rgba(13,15,26,.92) 26%,
    rgba(13,15,26,.55) 46%,rgba(13,15,26,.12) 66%,rgba(13,15,26,0) 82%)}
.heros::after{content:"";position:absolute;left:0;right:0;bottom:0;height:32%;
  z-index:-1;background:linear-gradient(180deg,rgba(13,15,26,0),var(--fond))}

.herosTexte{position:relative}
.heros h1{font-size:clamp(34px,4.15vw,58px);margin:14px 0 19px;
  text-transform:uppercase;text-shadow:0 3px 20px rgba(0,0,0,.5)}
.heros h1 em{font-style:normal;color:var(--jaune)}
.herosSous{color:#c2c7da;font-size:15.5px;line-height:1.62;
  margin-bottom:27px;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.herosBoutons{display:flex;flex-wrap:wrap;gap:13px}
.herosMeta{display:flex;align-items:center;gap:9px;margin-top:26px;
  color:#b3b9cd;font-size:14.5px;font-weight:500;line-height:1.2}
.herosMeta i{font-style:normal;color:#6e7590}
.icoCheck{width:17px;height:17px;color:#b3b9cd;flex:none}

/* ---------------- Le bandeau « en direct » ----------------
   Deux chiffres, dans le fil du texte, juste au-dessus du bouton d'entrée :
   combien de gens jouent MAINTENANT, combien se sont inscrits en tout. Le
   premier est l'argument, le second le décor — d'où la différence de
   traitement, l'un vif et jaune, l'autre gris.

   Il tient dans le flux normal de la page. La version précédente était
   posée en absolu au bout d'une flèche dessinée, ce qui demandait une
   centaine de lignes de calage au pixel, un recalage à chaque
   redimensionnement, et la faisait disparaître entièrement sur téléphone.

   `pointer-events:none` : rien ne se clique là-dedans, et le bandeau ne
   doit pas voler un clic destiné au bouton qu'il surplombe. */
.direct{display:inline-flex;align-items:center;flex-wrap:wrap;gap:11px;
  margin:0 0 22px;padding:9px 15px;border-radius:12px;pointer-events:none;
  background:rgba(13,15,26,.62);border:1px solid var(--bord2);
  backdrop-filter:blur(8px);
  font-size:14.5px;line-height:1.25;font-weight:600}
.directVif{display:inline-flex;align-items:center;color:#eef1f8}
.directVif b{color:#39d98a;font-weight:800;font-variant-numeric:tabular-nums;
  display:inline-block}
.directCalme{color:#98a0b8;font-weight:500}
.directCalme b{color:#dfe3f0;font-weight:700;font-variant-numeric:tabular-nums;
  display:inline-block}
.directTrait{width:1px;height:15px;background:var(--bord2);flex:none}

/* Personne en ligne : le chiffre s'efface, la pastille reste. On n'écrit
   pas « 0 joueur en ligne » sur la page qui vend le multijoueur — mais on
   ne fait pas non plus disparaître le bandeau, sinon la page changerait de
   hauteur d'une visite à l'autre. Le serveur, lui, est bien en ligne : la
   pastille verte ne ment pas. (cf. `directSeul` dans index.html) */
.directSeul .directVif b{display:none}
.directSeul .directVif::after{content:"Serveur en ligne — entrez, la partie tourne"}
.directSeul #freqMotConnectes{display:none}

.pastille{display:inline-block;width:8px;height:8px;border-radius:99px;
  background:#39d98a;margin-right:8px;flex:none;
  box-shadow:0 0 0 0 rgba(57,217,138,.55);animation:battement 2.6s ease-out infinite}
@keyframes battement{
  0%{box-shadow:0 0 0 0 rgba(57,217,138,.55)}
  70%,100%{box-shadow:0 0 0 7px rgba(57,217,138,0)}
}
/* Le chiffre qui vient de changer : un bref éclat, pour qu'on voie que la
   page s'est mise à jour toute seule. */
.direct b.maj{animation:eclat .7s ease-out}
@keyframes eclat{
  0%{transform:scale(1);color:#fff}
  35%{transform:scale(1.22);color:#fff}
  100%{transform:scale(1)}
}

/* Quelqu'un qui a demandé moins de mouvement l'a demandé pour de bon : on
   ne lui montre que l'état final. */
@media (prefers-reduced-motion:reduce){
  .pastille,.direct b.maj{animation:none}
}

/* ---------------- En ligne, ensemble ----------------
   Trois cartes qui disent ce que « multijoueur » veut dire ici. Elles
   reprennent le fond et le filet des piliers : c'est la même famille de
   blocs, et deux traitements différents pour deux rangées voisines
   donneraient l'impression de deux pages recollées. */
/* Le même écart que les sections en duo (`.duo`), pour que le rythme
   vertical de la page reste régulier d'un bloc à l'autre. */
#multijoueur{padding-top:52px}
.titreSection{font-size:clamp(24px,2.4vw,32px);margin:16px 0 26px;
  text-transform:uppercase;letter-spacing:-.02em}
.titreSection em{font-style:normal;color:var(--jaune)}
.ensemble{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ensemble li{background:var(--carte);border:1px solid var(--bord);
  border-radius:var(--rayon);padding:24px 24px 26px}
.ensembleIco{display:block;font-size:26px;line-height:1;margin-bottom:14px}
.ensemble b{display:block;font-size:16px;font-weight:800;margin-bottom:9px;
  letter-spacing:-.01em}
.ensemble span:not(.ensembleIco){display:block;color:var(--doux);
  font-size:14px;line-height:1.6}

/* ---------------- Les quatre piliers ---------------- */
.piliers{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--carte);border:1px solid var(--bord);border-radius:var(--rayon);
  padding:22px 8px;margin-top:8px;position:relative;z-index:2;
  box-shadow:0 24px 60px rgba(0,0,0,.4)}
.piliers li{display:flex;align-items:center;gap:15px;padding:14px 24px}
/* Un filet plutôt qu'une bordure sur chaque case : la bordure aurait aussi
   tracé un trait à gauche du premier et à droite du dernier. */
.piliers li+li{border-left:1px solid var(--bord)}
.piliers img{width:46px;height:46px;flex:none;object-fit:contain}
.piliers b{display:block;font-size:14px;font-weight:800;letter-spacing:.045em;
  margin-bottom:4px}
.piliers span{display:block;color:var(--doux);font-size:12.5px;line-height:1.45}

/* ---------------- Sections en duo ---------------- */
.duo{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:64px;align-items:center;padding-top:46px}
/* La maquette tient « EXPLOREZ. COMBATTEZ. » sur UNE ligne dans une colonne
   étroite, avec une police plus resserrée que les polices système. D'où le
   corps un cran en dessous et l'interlettrage négatif : sans eux le titre
   passe sur trois lignes et fait enfler toute la section de 90 px. */
.duoTexte h2{font-size:clamp(22px,2.1vw,28px);margin:17px 0 17px;
  letter-spacing:-.025em;text-transform:uppercase}
.duoTexte h2 em{font-style:normal;color:var(--jaune)}
.duoTexte p{color:var(--doux);font-size:14.5px;line-height:1.65;margin-bottom:26px}

.galerie{display:grid;gap:22px}
.galerie3{grid-template-columns:repeat(3,1fr)}
.galerie4{grid-template-columns:repeat(4,1fr)}

/* Emplacements en attente de visuels. Le trait discontinu dit « rien n'est
   cassé, c'est réservé » — un cadre plein se lirait comme une image qui n'a
   pas chargé. Les proportions sont celles des cases de la maquette : le
   jour où les images arrivent, la mise en page ne bouge pas d'un pixel. */
.aVenir{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--carte2),rgba(20,23,36,.35));
  border:1.5px dashed rgba(255,255,255,.16);border-radius:14px}
.aVenir.carre{aspect-ratio:16/15}
.aVenir.portrait{aspect-ratio:5/6;border-radius:16px}
.aVenir span{color:#767d99;font-size:12.5px;font-weight:600;
  letter-spacing:.03em;text-align:center;padding:0 8px}

.points{display:flex;gap:7px;justify-content:center;margin-top:22px}
.points i{width:8px;height:8px;border-radius:99px;background:rgba(255,255,255,.2)}
.points i.actif{width:21px;background:var(--jaune)}

/* ---------------- Inviter ses amis ----------------
   Le même violet que l'appel final, mais en bande plus calme : c'est un
   outil qu'on utilise, pas une réclame qu'on subit à chaque passage. La
   patate est DANS le flux ici (et non en absolu comme sur l'appel final) :
   la bande n'a pas de hauteur imposée, elle suit le champ et ses boutons,
   qui passent à la ligne dès que la fenêtre se serre. */
.invit{display:flex;align-items:center;gap:26px;
  margin-top:46px;padding:26px 30px;border-radius:22px;
  background:linear-gradient(105deg,rgba(109,40,217,.5),rgba(139,92,246,.26));
  border:1px solid rgba(139,92,246,.5)}
.invitPatate{width:96px;flex:none;filter:drop-shadow(0 12px 22px rgba(0,0,0,.35))}
.invitTexte{flex:1;min-width:0}
.invit h2{font-size:clamp(19px,1.95vw,26px);text-transform:uppercase;margin-bottom:8px}
.invit p{color:rgba(255,255,255,.86);font-size:14.5px;line-height:1.45}
.invitLien{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
/* `min-width:0` sur un enfant flex n'est pas décoratif : sans lui, un champ
   qui contient une longue adresse refuse de rétrécir sous sa largeur
   naturelle et pousse le bouton hors de la bande. */
.invitLien input{flex:1 1 280px;min-width:0;padding:13px 15px;border-radius:11px;
  background:rgba(9,10,18,.62);border:1px solid var(--bord2);color:#fff;
  font-size:14.5px;font-weight:700;font-family:inherit}
.invitLien .btn{flex:none}
.invitPied{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;
  margin-top:12px;font-size:13.5px;color:rgba(255,255,255,.75)}
.invitPied a{color:var(--jaune);font-weight:700}
.invitPied a:hover{text-decoration:underline}

/* ---------------- Appel final ----------------
   La patate est posée en absolu, et la bande lui réserve sa marge à gauche.
   Placée dans le flux, c'est ELLE qui dictait la hauteur de la bande — 175
   px au lieu des 125 de la maquette. */
.appel{position:relative;display:flex;align-items:center;gap:30px;
  margin-top:60px;padding:34px 40px 34px 172px;border-radius:22px;
  background:linear-gradient(105deg,var(--violet2),var(--violet) 58%,#a855f7);
  box-shadow:0 26px 70px rgba(109,40,217,.35)}
/* Centrée sur la hauteur de la bande, et non calée sur le bas : à 112 px de
   large elle en faisait 119 de haut pour une bande de 123, et le crâne
   passait au-dessus du bord. Un cran plus petite, elle respire des deux
   côtés — et elle reste centrée quelle que soit la hauteur de la bande. */
.appelPatate{position:absolute;left:34px;top:50%;transform:translateY(-50%);
  width:104px;filter:drop-shadow(0 12px 22px rgba(0,0,0,.35))}
.appelTexte{flex:1;min-width:0}
.appel h2{font-size:clamp(19px,1.95vw,26px);text-transform:uppercase;
  margin-bottom:8px}
.appel p{color:rgba(255,255,255,.86);font-size:14.5px;line-height:1.45}
.appelBoutons{display:flex;gap:12px;flex:none}

/* ---------------- Pied de page ---------------- */
.pied{margin-top:26px;border-top:1px solid var(--bord);background:var(--fond2)}
.piedHaut{display:grid;grid-template-columns:1.55fr 1fr 1fr 1fr;gap:44px;
  padding-top:34px;padding-bottom:30px}
.piedMarque img{width:140px;margin-bottom:15px}
.piedMarque p{color:var(--doux);font-size:13.5px;line-height:1.6;max-width:290px}

.piedCol{display:flex;flex-direction:column;gap:4px}
.piedCol h3{font-size:12px;font-weight:800;letter-spacing:.11em;margin-bottom:9px}
.piedCol a{color:var(--doux);font-size:13.5px;transition:color .16s}
.piedCol a:hover{color:#fff}

/* Le cadre se rétracte sur les quatre icônes — étiré sur toute la colonne,
   il centrerait le ruban à côté d'elles. */
.reseauxCadre{align-self:flex-start;margin-top:2px}
.reseaux{display:flex;gap:11px}
.reseaux a{display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:11px;background:var(--carte2);
  border:1px solid var(--bord2);transition:background .18s,transform .15s}
.reseaux a:hover{background:#2a2e4a;transform:translateY(-2px)}
.reseaux svg{width:19px;height:19px;fill:#cfd4e6}

.piedBas{border-top:1px solid var(--bord);padding:11px 24px;text-align:center;
  color:#71778f;font-size:13px}

/* =====================================================================
   Adaptations

   La bascule tient à 900 px et pas plus haut : la maquette elle-même est
   une capture de 1055 px de large, et un point de rupture à 1080 la
   repliait en deux colonnes — c'est-à-dire qu'elle ne se serait jamais
   affichée telle qu'elle a été dessinée.
   ===================================================================== */
@media (max-width:900px){
  .nav,.enteteActions{display:none}
  .burger{display:flex}
  .enteteBarre{justify-content:space-between;height:76px}
  .logo img{width:112px}

  .heros{padding:52px 0 60px}
  /* Sur un écran étroit l'illustration ne laisse plus de vide : on la
     recouvre franchement et on la garde comme décor, pas comme sujet. */
  .heros::before{background:linear-gradient(100deg,var(--fond) 10%,
    rgba(13,15,26,.94) 48%,rgba(13,15,26,.72) 100%)}

  .duo{grid-template-columns:1fr;gap:38px;padding-top:56px}

  /* Deux cartes puis une : trois colonnes sur un écran étroit rendraient
     chaque bloc plus haut que large, et le texte y tomberait en colonne de
     deux mots. La troisième passe en pleine largeur dessous. */
  #multijoueur{padding-top:56px}
  .ensemble{grid-template-columns:repeat(2,1fr);gap:16px}
  .ensemble li:last-child{grid-column:1/-1}

  .piliers{grid-template-columns:repeat(2,1fr);padding:18px 6px}
  /* En deux colonnes, le filet doit séparer les colonnes, pas les cases
     paires — d'où le retour aux bordures posées case par case. */
  .piliers li+li{border-left:0}
  .piliers li:nth-child(odd){border-right:1px solid var(--bord)}
  .piliers li:nth-child(-n+2){border-bottom:1px solid var(--bord)}

  .appel{flex-wrap:wrap;justify-content:center;text-align:center;
    padding:112px 26px 30px;gap:20px;margin-top:56px}
  .appelPatate{left:50%;transform:translateX(-50%);bottom:auto;top:14px;width:92px}
  .appelBoutons{width:100%;justify-content:center}

  .piedHaut{grid-template-columns:1fr 1fr;gap:34px}
  .piedMarque{grid-column:1/-1}
}

@media (max-width:640px){
  .invit{flex-direction:column;text-align:center;padding:22px 18px}
  .invitPatate{width:78px}
  .invitLien,.invitPied{justify-content:center}
  .invitLien .btn{flex:1 1 auto}

  .conteneur{padding:0 18px}
  .heros h1{font-size:clamp(30px,8.6vw,42px)}
  .herosSous br,.duoTexte p br,.piliers span br{display:none}
  .herosBoutons .btn,.appelBoutons .btn{flex:1;min-width:150px}
  /* Le bandeau passe en pleine largeur : en ligne, ses deux moitiés se
     couperaient au milieu d'un chiffre. */
  .direct{display:flex;width:100%;gap:9px 11px}
  .ensemble{grid-template-columns:1fr}
  .ensemble li:last-child{grid-column:auto}
  .piliers{grid-template-columns:1fr}
  .piliers li{border-bottom:1px solid var(--bord);padding:14px 18px}
  .piliers li:nth-child(odd){border-right:0}
  .piliers li:last-child{border-bottom:0}
  .galerie3,.galerie4{grid-template-columns:repeat(2,1fr);gap:14px}
  /* Le grand ruban dépasserait de la galerie sur un téléphone. */
  .scotchGrand{padding:11px 30px;font-size:16px;letter-spacing:.24em}
  .piedHaut{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn:hover,.reseaux a:hover{transform:none}
}